ReactFiber源码如何进行深度剖析？

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

目录+前言+React架构前世今生+React@15及以前+React@16及以后+Fiber+Fiber简单理解+Fiber结构+Fiber工作原理+mount+update+前言+本次React源码参考版本为17.0.3+React架构前世今生+查阅文档了解到，

目录

• 前言
• React架构前世今生
• React@15及之前
• React@16及之后
• Fiber
• Fiber简单理解
• Fiber结构
• Fiber工作原理
• mount
• update

前言

本次React源码参考版本为17.0.3。

React架构前世今生

查阅文档了解到， React@16.x是个分水岭。

React@15及之前

在16之前，React架构大致可以分为两层：

• Reconciler： 主要职责是对比查找更新前后的变化的组件；
• Renderer： 主要职责是基于变化渲染页面；

但是React团队意识到这样的架构有致命问题： 因为在React15中，组件的更新是基于递归查找实现的，这样一旦开始递归，是没有办法中断的，如果组件层级很深，就会出现性能问题，导致页面卡顿。