context

context

snippet

const Context = React.createContext();

class TodoProvider extends React.Component {
  state = {todos: [...]};
  render() {
    return (
      <Context.Provider value={this.state.todos}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

class TodoList extends React.Component {
    render() {
      return (
        <Context.Consumer>
          {todos => ....}
        </Context.Consumer>
      );
    }
  }

原理

Provider会对传入的value属性进行登记，并通过类Object.is()算法进行是否变化对比。发生变化后所有的Consumer组件都会rerender.

如果pure组件里有个Consumer，该组件能否在Consumer rerender后进行重新渲染

组件不会，但是Consumer里的部分会。Consumer有个很神奇的地方，如果Provider里的value改变，Consumer里的内容会自己重新渲染，不会走宿主Component里的re-render。

兄弟产品的做法

Vue

采用EventBus的形式 只是一个解决方案。但并未出相关api。