react的context更新而组件不更新的解决方案

代码地址请在github查看，我将下面的例子分成了几个包来运行，你只要简单的npm run dev就可以了，也欢迎您star,issue,共同进步!

1.react中父组件的shouldComponentUpdate返回false

在React的Context API中，如果context中属性发生变化，而父组件的shouldComponentUpdate返回false，那么该父组件中所有子组件都不会监测到conext的变化，从而不会reRender。比如下面的例子中，我们的ThemeProvider中的context发生了变化，但是TodoList的属性props没有发生改变，所以TodoList的shouldComponentUpdate返回了false,那么TodoList下面产生的所有的ThemedText的颜色都不会发生变化了(没有检测到ThemeProvider的contex变化)。代码运行请查看这里

class ThemeProvider extends React.Component {
 //Will invoke when state or props change!
  getChildContext() {
    return {color: this.props.color}
  }
  render() {
    return <div>{this.props.children}</div>
  }
}
//Add color props to context
ThemeProvider.childContextTypes = {
  color: React.PropTypes.string
}

上面这个ThemeProvider 组件用于将props中获取到的color属性放置到react的context中。

class ThemedText extends React.Component {
  render() {
    return <div style={{color: this.context.color}}>
      {this.props.children}
    </div>
  }
}
//Will get color prop from parent Component context
ThemedText.contextTypes = {
  color: React.PropTypes.string
}

该ThemedText 组件负责从父级组件的context中获取color来作为自己的style。

class TodoList extends React.PureComponent {
  render() {
    return (<ul>
      {this.props.todos.map(todo => 
        <li key={todo}><ThemedText>{todo}</ThemedText></li>
      )}
    </ul>)
  }
}

TodoList 组件用于从props中获取到todos属性，同时根据这些属性来渲染出我们的ThemedText组件。下面给出我们最顶层的组件：

const TODOS = ["Get coffee", "Eat cookies"]
class App extends React.Component {
  constructor(p, c) {
    super(p, c)
    this.state = { color: "blue" } 
  }
  render() {
    return (
         {/*ThemeProvider将color放到context中*/}
         <ThemeProvider color={this.state.color}>
              <button onClick={this.makeRed.bind(this)}>
                 {/*ThemedText通过this.context.color获取到父组件的color属性设置style*/}
                <ThemedText>Red please!</ThemedText>
              </button>
              <TodoList todos={TODOS} />
              {/*
（1）当点击按钮的时候，按钮本身颜色发生变化，但是TodoList这个组件没有变化，因为它继承了React.PureComponent，所以组件的props没有发生变化，那么组件不会重新渲染。因此，我们的TodoList里面的所有的组件颜色都不会发生变化，因为TodoList组件的shouldComponentUpdate返回了false!!!!因此不管是TodoList还是他的子组件都不会更新
（2）更加糟糕的是，我们也不能在TodoList中手动实shouldComponentUpdate,因为SCU根本就不会接收到context数据(只有当它的state或者props修改了才能接收到,getChildContext才会调用)。
(3)因此，shouldComponentUpdate如果返回false，那么所有的子组件都不会接收到context的更新。如这里的TodoList组件返回了false,那么TodoList下所有的ThemedText从context中获取到的color都不会更新，这很重要!!!!
               */}
        </ThemeProvider>
        )
  }
  //rewrite color attr in state
  makeRed() {
    this.setState({ color: "red" })
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("container")
)

2.使用依赖注入(context-based Dependency Injection)

使用依赖注入(context-based Dependency Injection)来解决当ThemeProvider的context发生变化，同时TodoList的shouldComponentUpdate返回false(其Props发生了变化)，而子组件不会更新的情况。其原理其实就是：不再将context作为一个容器，而是作为一个事件系统。详细代码请查看这里。此时ThemeProvider变成了如下内容:

class ThemeProvider extends React.Component {
  constructor(s, c) {
    super(s, c)
    this.theme = new Theme(this.props.color)
  }
  /**
   * 这个方法组件在shouldComponentUpdate之前肯定是被调用的，所以我们的这个内置的Theme对象肯定可以接收到下一个状态的color
   */
  componentWillReceiveProps(next) {
    this.theme.setColor(next.color)
  }
  //传入到子组件中的是theme而不是我们的color属性
  getChildContext() {
    return {theme: this.theme}
  }
  render() {
    return <div>{this.props.children}</div>
  }
}
//放到子组件中的是theme
ThemeProvider.childContextTypes = {
  theme: React.PropTypes.object
}

我们看看我们的Theme事件系统:

class Theme {
  // this.theme = new Theme(this.props.color)
  constructor(color) {
    this.color = color
    this.subscriptions = []
  }

 /*
  *每次setColor的时候将我们的subscription中的所有的函数都调用一遍
  */
  setColor(color) {
    this.color = color
    this.subscriptions.forEach(f => f())
  }
  /**
   * 调用subscribe方法来push一个函数用于执行
   */
  subscribe(f) {
    this.subscriptions.push(f)
  }
}

此时我们传递到下级组件的往往是一个Theme对象而不是一个color属性，即传递的不再是state的容器，而是一个小型的事件系统。我们再看看TodoList下的ThemedText如何在TodoList的shouldComponentUpdate返回false的情况下(props没有发生改变)进行了组件更新。

class ThemedText extends React.Component {
    /**
     * 在所有子组件中，我们在componentDidMount中我们会获取到theme然后注册我们的事件，并且强制组件更新
     */
  componentDidMount() {
    this.context.theme.subscribe(() => this.forceUpdate())
  }
  render() {
    return <div style={{color: this.context.theme.color}}>
      {this.props.children}
    </div>
  }
}
ThemedText.contextTypes = {
  theme: React.PropTypes.object
}

其实我们的顶级组件压根就不需要进行改造，和上一种情况完全一致：

class App extends React.Component {
  constructor(p, c) {
    super(p, c)
    this.state = { color: "blue" } 
  }

  render() {
    return (
           <ThemeProvider color={this.state.color}>
               {/*
（1）ThemeProvider将color这个props放到context中，不过不是直接放进去,而是采用一种更加优雅的方式来完成
（2）在ThemeProvider中传递给子组件的不再是color，而是一个依赖注入系统然后所有需要接收到Context更新的组件全部subscribe这个事件即可
 （3）TodoList我们依然使用的是React.PureComponent，但是其下面的ThemedText组件却可以接收到我们的ThemeProvider的context更新(前提TodoList本身prop/state没有改变)
（4）这个事件系统的实现有点简单，我们需要在componentWillUnMount中取消
  事件监听，同时应该使用setState而不是forceUpdate让组件更新
               */}
              <button onClick={this.makeRed.bind(this)}>
                <ThemedText>Red please!</ThemedText>
              </button>
              <TodoList todos={TODOS} />
            </ThemeProvider>
        )
  }
  makeRed() {
    this.setState({ color: "red" })
  }
}

参考资料：
How to safely use React context
Why Not To Use Context