React diff算法核心复用图文详解，能否改写为长尾关键词？

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

目录 + 引言 + Fiber + 架构 + React 的 diff 算法 + 总结 + 引言：React 是基于 vdom 的前端框架，组件通过 render 生成 vdom，然后渲染器将 vdom 渲染出来。当 state 更新时，组件会重新 render，生成新的 vdom，与旧 vdom 进行 diff 计算，确定最小变更集，最后更新 DOM。

目录

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

引言

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

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

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