在之前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'};// 类似reducerhandleContextChange = action => {switch (action.type) {case "UPDATE_THEME":return this.setState({theme: action.theme});default:return;}};render() {return (<GlobalContext.Providervalue={{dispatch: this.handleContextChange,theme: this.state.theme}}>{this.props.children}</GlobalContext.Provider>);}
}
复制代码

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

const SubComponent = props => (<div>{/* 类似action，触发后改变状态 */}<buttononClick={() =>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 => (<SubComponenttheme={context.theme}dispatch={context.dispatch}/>)}</GlobalContext.Consumer></GlobalContextProvider>);}
}render(<App />, document.getElementById("root"));
复制代码

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

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

参考文章

1. React's new Context API

2. 从新的 Context API 看 React 应用设计模式