React 的 Context

当我们需要像很多组件共享一些Props的时候，就可以使用Context，但是不要使用太多，使用太多会导致组件的复用性下降。

如何创建一个Context

const { Provider, Consumer } = React.createContext(defaultValue)

结构出来的Provider和Consumer是两个组件，而且这个默认值是当Consumer在上层早不到Provider的时候才会使用，并不是Provider的默认值

Provider

相当于一个容器，提供基本的值，可以在这个和react的state关联起来，一旦Provider的value发生变化就会导致Consumer刷新，而且需要注意的是Provider的刷新不受shouldComponentUpdate 这个生命周期的影响

Consumer

使用该组件的时候需要在里面嵌套一个方法，参数为当前的context值，值为和最近的Provider提供的相同，如果上层没有Provider那么值和defaultValue相同，如下

<Consumer> 
   {
        (value) => {
            //根据拿到的value进行相应的处理
        }
    }
</Consumer>

使用Context

方式一: Provider里面套一个Consumer组件, 然后再Consumer里面的方法中返回我们自己的组件
方式二: 外部不使用Provider，直接使用Consumer, 此时Consumer孩子方法访问到的context值就我们我们创建时候的默认值

性能优化

  render() {
    return (
      <Provider value={{something: 'something'}}>
        <Toolbar />
      </Provider>
    );
  }

上面这种写法由于Provider里面的value是直接传的而不是引用state里面的，所以会导致render函数执行的时候Provider的value属性重新创建一次，就会导致Provider里面的Consumer也重新刷新一次，由于Provider的刷新可以不受shouldComponentUpdate影响的，所以这就是不必要的刷新，正确的写法应该是下面这样

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

猜你喜欢