React中Context API的应用

在之前react的工程项目中，关于数据流动以及父子组件中数据通信大都是通过react-redux、redux来完成，虽然可以解决问题，但是这种数据管理是较为复杂的，在最新的react16.3中推出了Context API，降低了开发的复杂度。下面通过代码来进行详细的分析首先创建一个context的实例

import React from 'react';
import { render } from "react-dom";
const GlobalContext = React.createContext('dark');

生成的context对象具有两个组件类对象

{
  Provider: React.ComponentType<{value: T}>,
  Consumer: React.ComponentType<{children: (value: T)=> React.ReactNode}>
}

接下来创建Provider对象，该对象类似react-redux中的Provide对象

class GlobalContextProvider extends React.Component {
  // 类似redux中的初始化状态
  state = {
    theme: 'dark'
  };
  
  // 类似reducer
  handleContextChange = action => {
    switch (action.type) {
      case "UPDATE_THEME":
        return this.setState({
          theme: action.theme
        });
      default:
        return;
    }
  };
  
  render() {
    return (
      <GlobalContext.Provider
        value={{
          dispatch: this.handleContextChange,
          theme: this.state.theme
        }}
      >
        {this.props.children}
      </GlobalContext.Provider>
    );
  }
}

接下来定义一个组件来改变state

const SubComponent = props => (
  <div>
    {/* 类似action，触发后改变状态 */}
    <button
      onClick={() =>
        props.dispatch({
          type: "UPDATE_THEME",
          theme: "light"
        })
      }
    >
      change theme
    </button>
    <div>{props.theme}</div>
  </div>
);

最后利用到上述提到的Consumer对象加载状态并挂载到dom节点上

class App extends React.Component {
  render() {
    return (
      <GlobalContextProvider>
        <GlobalContext.Consumer>
          {context => (
            <SubComponent
              theme={context.theme}
              dispatch={context.dispatch}
            />
          )}
        </GlobalContext.Consumer>
      </GlobalContextProvider>
    );
  }
}

render(<App />, document.getElementById("root"));

那么是不是就是可以利用新的API来代替redux呢？答案当然是否定的我们可以看到上述的使用Context的方式与redux很类似，因此如果很复杂的应用这样的写法无异于使代码复杂混乱，因此可以这样进行选择：

注入式的组件，类似背景、语言这种控制全局的变量，可以选择这种
对于那些复杂的数据交互，父子组件通信还是选择redux

参考文章