作者回复: 你好,Dearest,“React Fiber”学习心愿单+1,安排!
作者回复: 你好,Geek_8aba0d,很棒的回答,也很感谢你提出的问题。 你提到的“描述jsx的对象”在Fiber协调引擎中就是FiberNode。正如你说的,引用类型要比较是否同一个引用,在React底层实现中目前大量使用Object.is来判断值是否有变化。我们在接下来的第12节课单向数据流中还会涉及到这方面内容。 > 如果父组件的属性发生变化 那么子组建会重新渲染吗? 会。父组件的属性props变化,意味着父组件自己要重新渲染,父组件下面的子组件,只要不是纯组件(PureComponent),就都会重新渲染。当然,重新渲染的结果可能并没有什么需要提交的更改,从页面上看也是,子组件没有变化。
作者回复: 你好,海华呀,思路是ok的。有一点我稍微纠正一下,React内置的合成事件(如onClick,onChange等),不需要在对比HTML元素时移除监听,因为在React的内部实现中,合成事件是通过事件代理实现的,即React会在自己的根节点上监听所有支持的原生DOM事件,然后根据DOM事件发生时的target来触发对应的事件处理函数,这部分内容在第11节课也会提到。
作者回复: 你好,joel,抱歉这两周在赶稿回复晚了。你的理解从逻辑上是ok的。 等你学习过08组件生命周期,会发现React的内部过程会更加复杂一些: * 函数生成的还是元素,元素进入Fiber协调引擎会生成虚拟节点FiberNode; * 重新渲染产生的元素会对应到已有的虚拟节点,diffing发生在虚拟节点上; * 在提交阶段,Fiber协调引擎会一股脑地把虚拟节点上记录的变化更新到真实DOM中。
作者回复: 你好,里脊,简单来说不会的,它只会触发子组件和后代组件的重新渲染,期间会发生相应的虚拟DOM的比对。关于这个话题,《加餐02|留言区心愿单:Fiber协调引擎》和《21|性能优化:保证优秀的用户体验》还会涉及到,欢迎你深入学习。
作者回复: 你好,Geek_0c843c,“React Fiber”学习心愿单+1,我记下来了:)
作者回复: 你好,学习前端-react,是的,在这一讲对Fiber协调引擎的描述只是个简单的摘要,后面的08和加餐02,对Fiber有更详细的介绍。尤其是加餐02,我在写稿时又反复读了几遍React 18的相关源码,希望对你有所帮助。
作者回复: 你好,01,基本是这样的。对于HTML元素,React会比对HTML tag,也会利用Object.is() 一一比对props。
作者回复: 你好,Pioneer,“React Fiber”学习心愿单再+1 :)
作者回复: 你好,船长,你的答案已经很接近了。如果是原始数据类型,进行值对比,如果是对象,则进行值引用对比。在后面第12节课讲单向数据流时,我们还会讲到React如何判断state是否变化,届时会有更详细的介绍。敬请期待。