React组件渲染触发的条件-归纳总结
2024-10-20 20:46:51
一、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.
[4] shouldComponentUpdate作用.https://reactjs.bootcss.com/docs/optimizing-performance.html#shouldcomponentupdate-in-action.
最新文章
- PHP实现查询Memcache内存中的所有键与值
- BZOJ1264——[AHOI2006]基因匹配Match
- Android系统启动分析(Init->Zygote->SystemServer->Home activity)
- bash shell命令（2）
- [Mac]Mac OS 10.11虚拟机搭建ReactNative遇坑记录
- 【风马一族_Python】 实施kNN算法
- python(三)一个文件读写操作的小程序
- Quartz－2D绘图之概览
- c++11: trailing return type in functions（函数返回类型后置）
- javascript 的对象
- 【Android进阶】使用Andbase快速开发框架实现常见侧滑栏和滑动标签页组合效果
- jquery控制audio的播放与暂停
- Python笔记·第六章——集合 (set) 的增删改查及 copy()方法
- C# 命名空间和程序集
- 解决IE下a标签点击有虚线边框的问题
- CSS像素、物理像素、逻辑像素、设备像素比、PPI、Viewport
- 使用 AcceptTcpClientAsync 进行 异步 操作
- python中可变参数和关键字参数总结
- 019_nginx upstream中keepalive参数
- HttpClient 通信工具类