react中context的优化

很多时候，为了减少render的次数，我们不得不使用shouldUpdate或memo等方法，但是当组件使用了context上下文之后，无论你的反回值是true或false,只要context里的值发生了改变，都无法阻止组件的render，这也是因为组件需要监听context值的变化，但有时，我们并不需要所有变化都被更新。所以尝试了几种方案进行优化：

1. 更新时不使用扩展符{...}，context就不会生成新的对象，但明显不合理。
2. 把值存在顶层的state中，不存context中，这样又有点绕，得不偿失
3. 使用EventEmitter这种发布式模式，不在本次讨论范围内，包括使用redux的方案
4. 使用不同颗粒度的context
5. 既然使用了useContext的组件一定会被render，只要把useContext进行上移即可，移到父组件上去调用，相当于一种折中的方式，把大量子组件的更新context的方法移交到父组件中去，这样就可以变相的优化了。

　　在以上几点中，我最后选择了使用第五点，也就是把context的使用提升到了父级，这就有点类似于redux中的connect组件了，在这里可以把context转化成props传入子组件，然后在子组件中判断props的变化。

参考资料:https://github.com/facebook/react/issues/15156#issuecomment-474590693 ，官网上提到可以 通过使用 memoization 来优化。