React组件渲染触发的条件-归纳总结

一、React组件何时发生渲染——何时会生成React元素？

React组件的渲染发生在两个阶段。

1. 组件挂载。

2. 组件更新。

二、React组件更新的触发条件是什么？

对没有实现shouldComponentUpdate方法的继承自Component的class组件来说：①父组件更新或者②该组件调用setState方法后，该组件会更新。

对function组件来说：①父组件更新之后，该组件会更新。

 

当使用继承自PureComponent的class组件或使用memo来包装的function组件时，

组件更新与否的判断条件是——比较前后两次props和state的属性值是否严格相等？若是严格相等，则组件不会重新渲染。若不是严格相等，则会重新渲染，生成新的React元素。

 

在编写了shouldComponent的class组件或使用传入areEqual函数的memo函数所包装的function组件上的更新触发条件是什么样的呢？

shouldComponentUpdate(props, state) 返回true则重新渲染组件。（在该函数中，你可以得到props和state变化前后的值。）

areEqual(prevProps, nextProps) 返回false则重新渲染组件。（在该函数中，你可得到props变化前后的值。）

 

另外，使用hook之后的function组件的更新情况需要额外注意。当hook生成的state发生改变时，function组件是否更新的条件是——前后两次的state是否严格相等。

若严格相等，则不重新渲染组件，若不严格相等，则重新渲染组件。

 

参考资料：

[1] shouldComponent.https://reactjs.bootcss.com/docs/react-component.html#shouldcomponentupdate.


[2] PureComponent.https://reactjs.bootcss.com/docs/react-api.html#reactpurecomponent.

[3] memo.https://reactjs.bootcss.com/docs/react-api.html#reactmemo.

[4] shouldComponentUpdate作用.https://reactjs.bootcss.com/docs/optimizing-performance.html#shouldcomponentupdate-in-action.