React主要的三部分
这是从ReactDom.render后触发的步骤
- 调度
- 协调
- 渲染
设计理念
首先在React中需要在浏览器刷新一次就需要执行如下的步骤：
JS脚本执行->样式布局->样式绘制，如果js执行时间超过了16.6ms，那么就没有时间留给样式布局，此时就会出现掉帧现象。
React的设计理念：快速响应
制约瓶颈：CPU与IO
解决办法：异步可中断更新的机制
架构演变史
老架构的更新策略：
假如我们将dom的数据改为了2,4,6那么会出现如下的更新事项
如果对于老的架构是无法实现异步可中断更新的，因为是递归调用执行栈，如果想要实现可中断则会出现如下情况，只会将Dom的值变为2,2,4
对于新架构的更新策略的变化是，从异步更新变为了同步可中断更新：
- 每一个更新都会赋予一个优先级，高优先级的更新会更快的被调用，这个模块被称为scheduler调度器
- 在新的架构中，更新首先会被新的调度器处理，调度器会调度更新的优先级，更高的优先级会首先进入协调器(Reconciler)，在协调器正在执行diff算法时，如果此时出现了更高优先级的任务，则此时的更新任务会被中断，使得更高优先级的任务进入协调器。
- 对于调度器和协调器都是在内存中工作，不会执行对应的视图操作，所以即使有中断发生，用户此时也是无法感知。
- 当完成了在协调器中的工作时，协调器会通知渲染器告诉哪些需要渲染
- 当高优先级的更新最终完成了渲染，调度器又会开始新一轮的调度
更新过程中的流程：
Fiber
Fiber详细介绍看如下链接：Fiber架构原理
如何调试源码
四步骤：
-
从React仓库中拉去代码
-
安装依赖并构建
- git clone https://github.com.cnmjs.org/facebook/react(拉去react源码)
- cd react (进入下载git的文件夹)
- yarn(安装依赖)
- yarn build react/index,react-dom/index,scheduler -type=NODE(对三个react/sheduler/react-dom三个包进行打包)，打包后的目录如下
- 进入到react与react-dom下，使用yarn link来创建软链，便于后续创建react项目时引入我们所打包的react和react-dom的包，方便调试
- npx create-react-app a-react-demo(创建一个React项目)
- 进入到我们所创建的项目，执行yarn link react react-dom，使得可以在新项目中引入我们在build目录中生成的react/react-dom包
- 启动项目后，可以看到控制台打印了我们所写的hello react，代表我们所创建的项目引用了我们在build目录中生成的包
- 那么后续我们就可以打断点来调试react/react-dom/scheduler了
-
creat-react-app创建新应用
- React
- ReactDom
- scheduler
源码目录
三部分：
- fixtures：包含一些给贡献者准备的小型 React 测试项目
- packages：包含元数据（比如 package.json）和 React 仓库中所有 package 的源码（子目录 src）
- scripts：各种工具链的脚本，比如git、jest、eslint等
源码目录功能：
- react：react的核心，包含所有全局React API
- React.createElement
- React.Component
- React.Children
- scheduler：调度器
- react-dom：渲染器，跟dom相关操作的api都是暴露在react-dom这个包下的
- react-reconciler：协调器，需要重点关注~
- react-native：渲染器，渲染native
- react-noop-renderer：渲染器，用于调试Fiber
- react-server与react-client用于SSR
- react-art：渲染器，用于渲染canvas与svg