react diff 原理

1.把树形结构按照层级分解,只比较同级元素。

2.给列表结构的每个单元添加唯一的 key 属性,方便比较。

3.React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字)

4.合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制.

5.选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

相关推荐
漂移的电子4 分钟前
【echarts 细节】
前端·javascript·echarts
当时只道寻常4 分钟前
JavaScript 实现图片懒加载
javascript·性能优化
im_AMBER5 分钟前
万字长文:从零实现 Yjs + Hocuspocus 协同文档
前端·react.js·前端框架
kyriewen6 分钟前
事件流与事件委托:当点击按钮时,浏览器里发生了什么?
前端·javascript·面试
是真的小外套7 分钟前
第十一章:Flask入门之从零构建Python Web应用
前端·python·flask
Alanzeeb8 分钟前
博客系统测试文档
java·javascript·功能测试·可用性测试
AY呀10 分钟前
# 从手写 debounce 到企业级实现:我在面试中如何“降维打击”面试官
前端·面试
chenhdowue11 分钟前
Vue 表格组件 vxe-table 进阶,灵活导出指定数据的 CSV 文件
javascript·vue.js·vxe-table
政采云技术13 分钟前
深入理解 setState 执行机制
前端·react.js
清汤饺子15 分钟前
Everything Claude Code:让我把 AI 编程效率再翻一倍的东西
前端·javascript·后端