react中context的优化

  • A+
所属分类:Web前端
摘要

很多时候,为了减少render的次数,我们不得不使用shouldUpdate或memo等方法,但是当组件使用了context上下文之后,无论你的反回值是true或false,只要context里的值发生了改变,都无法阻止组件的render,这也是因为组件需要监听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的变化。