【第3262期】React的Fiber架构原理

前言主要内容是解释 React 的 Fiber 架构原理及其在 React 16 版本中的实现和优势。文章通过比较 React 15 和 React 16 在处理大量列表渲染时的性能差异，引出了 Fiber 架构的必要性。今日前端早读课文章由 @林督俊分享，公号：哈啰技术授权。正文从这开始～～简介先看两个例子，例子除了 React 版本外没有不同，列表有 5000 个元素，元素中的文字会随着用户进行输入的内容而改变，执行相同操作，也就是输入从 1 到 9 变为 '123456789'，可以看到上下两张图，展示上会有不同的效果，其中上图为 React15.7 版本的例子，下图为 React16.8 版本的例子，可以看出 React16.8 的例子比 React15.7 的例子流畅。React15.7 版本React16.8 版本这是为什么呢？在讲解 React Fiber 之前，我们需要了解一下浏览器的渲染流程。主流浏览器刷新频率为 60Hz，即每（1000ms / 60Hz）16.6ms 浏览器刷新一 ………………………………