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 (
      
        {this.props.children}
      
    );
  }
}

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

const SubComponent = props => (
  

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

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

class App extends React.Component {
  render() {
    return (
      
        
          {context => (
            
          )}
        
      
    );
  }
}

render(, document.getElementById("root"));

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

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

参考文章

1. React's new Context API

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