全新的 React Context API

Haley的空间 · 掘金 · · 2018-04-09 08:43

正文

在一个经典的 React 应用中，组件之间通信是常用到的技术方案。在父子组件之间通常通过 props 来传递参数，而非父子组件就比较麻烦了，要么就一级一级通过 props 传递，要么就使用 Redux or Mobx 这类状态管理的状态管理库，但是这样无疑增加了应用的复杂度。在 FEers 的期盼中， React 团队终于从 16.3.0 版本开始新增了一个新的 API Context ，福音啊。好了，今天我就来一起学习一下这个新的 Context 。

什么时候使用 Contsxt

Context 目的是为了共享可以被认为是 React 组件“全局”树的数据。例如当前应用的主题、首选语言等等。接下来看看通过 props 和 Context 两种方式实现按钮组件样式参数传递方式的对比：

props

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}
Toolbar(props) {
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}
ThemedButton(props) {
  return <Button theme={props.theme} />;
}

Context

// 创建 context 实例
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}
Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

ThemedButton(props) {
  return (
    <ThemeContext.Consumer>
      {theme => <Button {...props} theme={theme} />}
    </ThemeContext.Consumer>
  );
}

API

React.createContext

创建一个 Context ， React.createContext 提供了 {Provider,Comsumer} 两个方法，上面的代码也可以这个来写：

const {Provider,Comsumer} = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <Provider value="dark">
        {/* ... */}
      </Provider>
    );
  }
}
{/* ... */}
ThemedButton(props) {
  return (
    <Consumer>
      {/* ... */}
    </Consumer>
  );
}