06｜虚拟DOM：为什么要关心React组件的渲染机制？
虚拟 DOM
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
React组件渲染机制及虚拟DOM的重要性是本文的核心内容。文章深入探讨了虚拟DOM作为React开发者API与内部实现对接的桥梁，以及其在性能方面的优势。重点分析了虚拟DOM的Diffing算法和触发协调的场景，强调了只有当`props`、`state`或`context`发生变化时才会触发协调过程。此外，还介绍了Fiber协调引擎的异步协调过程和React技术的学习曲线。总的来说，本文通过深入浅出的方式解释了虚拟DOM的概念及其在React中的重要性，为读者提供了对React组件渲染机制的全面了解。文章还提出了思考题，引发读者对React内部机制的深入思考。
《现代 React Web 开发实战》，新⼈⾸单¥59
全部留言(14)
- 最新
- 精选
Dearest想多了解 React Fiber， 想了解React18对实际开发的影响作者回复: 你好，Dearest，“React Fiber”学习心愿单+1，安排！
2022-09-11归属地：内蒙古19
学习前端-react思考题一：也是猜测。对于相同的标签元素，可能变化的就是children 和 attr。那attr来说，因为到最后都会生成一个对象去描述jsx，所以这些attrs可以做对比 简单类型可以直接做对比，引用类型可以比较是否同一个引用。类似浅拷贝。 判断数据类型目前比较常规的是通过object prototype to string call 去判断。 这时同样有一个问题如果父组件的属性发生变化 那么子组建会重新渲染吗？作者回复: 你好，Geek_8aba0d，很棒的回答，也很感谢你提出的问题。 你提到的“描述jsx的对象”在Fiber协调引擎中就是FiberNode。正如你说的，引用类型要比较是否同一个引用，在React底层实现中目前大量使用Object.is来判断值是否有变化。我们在接下来的第12节课单向数据流中还会涉及到这方面内容。 > 如果父组件的属性发生变化 那么子组建会重新渲染吗？ 会。父组件的属性props变化，意味着父组件自己要重新渲染，父组件下面的子组件，只要不是纯组件（PureComponent），就都会重新渲染。当然，重新渲染的结果可能并没有什么需要提交的更改，从页面上看也是，子组件没有变化。
2022-09-08归属地：内蒙古4
海华呀1、相同tag，属性修改的实现 应该新旧属性都遍历一遍，遍历旧的因为要移除一些可能存在的事件监听，遍历新的是为了查看属性新增更新情况。 2、尽量不要在JSX中写大量JS语句，对事件的处理，要另外写在函数中，不要直接在JSX中写作者回复: 你好，海华呀，思路是ok的。有一点我稍微纠正一下，React内置的合成事件（如onClick，onChange等），不需要在对比HTML元素时移除监听，因为在React的内部实现中，合成事件是通过事件代理实现的，即React会在自己的根节点上监听所有支持的原生DOM事件，然后根据DOM事件发生时的target来触发对应的事件处理函数，这部分内容在第11节课也会提到。
2022-10-17归属地：北京2
joel老师咨询一个问题： 比如一个函数组件： function A （）{ return (<span>我是组件A</span>) } 是不是只要这个函数执行了，就会生成一个虚拟节点，然后通过diff 算法对比是否需要在真实的dom 结构中更新这个节点。作者回复: 你好，joel，抱歉这两周在赶稿回复晚了。你的理解从逻辑上是ok的。 等你学习过08组件生命周期，会发现React的内部过程会更加复杂一些： * 函数生成的还是元素，元素进入Fiber协调引擎会生成虚拟节点FiberNode； * 重新渲染产生的元素会对应到已有的虚拟节点，diffing发生在虚拟节点上； * 在提交阶段，Fiber协调引擎会一股脑地把虚拟节点上记录的变化更新到真实DOM中。
2022-09-15归属地：北京2
里脊当一个组件的状态发生变化，会触发整个虚拟dom的比对吗？作者回复: 你好，里脊，简单来说不会的，它只会触发子组件和后代组件的重新渲染，期间会发生相应的虚拟DOM的比对。关于这个话题，《加餐02｜留言区心愿单：Fiber协调引擎》和《21｜性能优化：保证优秀的用户体验》还会涉及到，欢迎你深入学习。
2022-10-23归属地：北京21- Geek_0c843c想多了解下react fiber
作者回复: 你好，Geek_0c843c，“React Fiber”学习心愿单+1，我记下来了：）
2022-09-05归属地：北京21 - 学习前端-reactfiber 的理解： 首先不是普遍意义上的 parent-children 结构 而是 parent-child的结构，他是一个链表结构。 Parent-child - child - sibling，即父子关系是单向的，通过sibling完成兄弟之前的链接。 ”这棵树可以随时暂停并恢复渲染， 触发组件生命周期等副作用（Side-effect）， 并将中间结果分散保存在每一个节点上， 不会 block 浏览器中的其他工作。“ 这里引用了文档中描述fiber 简要做了四件事情，但是好像都不太理解他是怎么操作的。
作者回复: 你好，学习前端-react，是的，在这一讲对Fiber协调引擎的描述只是个简单的摘要，后面的08和加餐02，对Fiber有更详细的介绍。尤其是加餐02，我在写稿时又反复读了几遍React 18的相关源码，希望对你有所帮助。
2022-09-17归属地：北京 
01html元素 主要是判断 props 是否相等， 简单粗暴作者回复: 你好，01，基本是这样的。对于HTML元素，React会比对HTML tag，也会利用Object.is() 一一比对props。
2022-09-16归属地：北京
Pioneer想学习下react fiber作者回复: 你好，Pioneer，“React Fiber”学习心愿单再+1 ：）
2022-09-11归属地：内蒙古
船长思考题 1：以我目前后端的水平我能想到的是：React 先判断属性的类型变没变，如果变了，则直接触发渲染。否则再进行值的对比作者回复: 你好，船长，你的答案已经很接近了。如果是原始数据类型，进行值对比，如果是对象，则进行值引用对比。在后面第12节课讲单向数据流时，我们还会讲到React如何判断state是否变化，届时会有更详细的介绍。敬请期待。
2022-09-07归属地：内蒙古