React diff算法如何实现核心复用，图文解析详解？

本文共计2289个文字，预计阅读时间需要10分钟。

目录+引言+Fiber+架构+React+的diff+算法+总结+引言+React+是基于+vdom+的前端框架，组件+render+生产+vdom+，然后渲染器把+vdom+渲染出来。+state+更新的时+候，组件会重新+render+，生产新的+vdom+，在“

目录

• 引言
• Fiber 架构
• React 的 diff 算法
• 总结

引言

React 是基于 vdom 的前端框架，组件 render 产生 vdom，然后渲染器把 vdom 渲染出来。

state 更新的时候，组件会重新 render，产生新的 vdom，在浏览器平台下，为了减少 dom 的创建，React 会对两次的 render 结果做 diff，尽量复用 dom，提高性能。

diff 算法是前端框架中比较复杂的部分，代码比较多，但今天我们不上代码，只看图来理解它。