あらすじ

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);

React「context API」を一筆書き。

あらすじ

注意点

実装