あらすじ
context APIとライフサイクル(componentDidMount)をあわせた、簡単な記事としてとりあえず書きたかった。
解説はまた別の機会にします。
注意点
この記事はReact 16.3以降で使える実装です。
React 16.2以前は、別の実装方法になり現在非推奨です。
実装
実用的というより、基本を抑えるイメージで書きました。
import React from "react";
import ReactDOM from "react-dom";
import { compose, withStateHandlers, lifecycle } from "recompose";
import "./styles.css";
const { Provider, Consumer } = React.createContext();
function App(props) {
return (
<Provider value={{ color: props.color }}>
<div className="App">
<h1>Hello CodeSandbox</h1>
<Consumer>
{({ color }) => (
<h2
style={{
backgroundColor: color
}}
>
{color}
</h2>
)}
</Consumer>
</div>
</Provider>
);
}
const enhance = compose(
withStateHandlers(
{
color: "red"
},
{
handleColor: (state, props) => color => {
return { color };
}
}
),
lifecycle({
componentDidMount() {
const { handleColor } = this.props;
setTimeout(() => {
handleColor("blue");
}, 1000);
}
})
);
const Main = enhance(props => <App {...props} />);
const rootElement = document.getElementById("root");
ReactDOM.render(<Main />, rootElement);