避免react重新渲染

原文链接： https://www.jianshu.com/p/d2941b8292b0

前段时间一个面试官问我如何避免react重新渲染，当场很懵逼，因为看深入浅出react技术栈这本书的时候，是酱紫讲的：当修改props或者state，diff能够自动计算组件内部DOM树的不同，然后找出真正变化的DOM节点，对变化部分进行渲染。

这个理解是错误的。diff算法只是用来计算出改变状态或props的组件／虚拟节点。而这个组件／虚拟节点，无论多大都会被重新渲染。

例如：

当绿色部分状态修改，应该只是修改其对应的节点，但是react会把整个dom树都重新渲染。

那么如何避免这个问题呢？

shouldComponentUpdate

这个生命周期在组件被重新渲染前被调用，这个函数的返回值确定了组件是否需要重新渲染。函数默认返回true，表示组件的props或者state修改，就会重新构建virtual dom，然后使用diff算法进行比较，根据比较结果来决定是否需要重新渲染组件。如果返回false则表示，不需要重新渲染。

PureRenderMixin

react官方提供了PureRenderMixin插件，插件的功能是在不必要的情况下让shouldComponenUpdate返回false，减少不需要的渲染开销。

Immutable.js

对于复杂的数据比较是很费时的，使用Immutable.js在shouldComponentMixin中，可以提升react性能。