这是一篇 React 知识的总稿梳理，旨在对 React 涉及知识做一个大致分类，梳理视图挂载更新涉及哪些概念，为什么会有这些概念。
部分比较重要的知识概念，如 Diff，Fiber，事件合成，render 阶段具体内容，commit 阶段具体内容等将在其他文章中继续整理。
理念
数据驱动 UI 更新(React 不是 MVVC 结构的原因是 React 是单向数据流驱动)
快速响应
架构演进
React 15
包含内容
- Reconciler(找出需要更新的内容)
- Render(进行内容的更新，这个更新过程是同步的，不可中断的)
过程描述
这个阶段 JSX 是转换为虚拟 DOM，再根据虚拟 DOM 的信息去由 React 挂载更新真实 DOM。
此阶段更新过程是 Reconciler 找出需要更新的内容，找到一个就通知 Render 进行更新，然后再找出下一个需要更新的内容继续更新，整个过程是同步的，不支持中断(中断会让用户看到更新到一半的页面)。
Reconciler 采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler
时间分片
浏览器更新内容是一帧一帧更新的，js 计算过程会占用布局渲染时间，如果 js 计算过程占用时间过长，导致页面无法在一帧内完成刷新，造成视觉上的卡顿。
因此 React 16 的核心是要把 Render 阶段的同步更新过程修改为异步的可中断的更新，在浏览器有空余时间的时候根据优先级执行一个个拆分后的任务。
将长任务拆分成一个个独立的任务，在合适的时间安排，这种技术称为时间分片
React 16
包含内容
- Scheduler(调度器,任务分解及复用，确定更新任务的优先级)
- Reconciler(找出需要更新的内容)
- Render(进行内容的更新，注意由于 React 支持跨平台,这一步会根据宿主环境去转换 React)
注意 Scheduler 调度器和 Reconciler 协调器做的事情称为 Render 阶段,因为涉及到 React.render 函数的调用。
Render 渲染器做的事情称为 commit 阶段，类似于新的渲染树在内存里生成了，做的事情是把渲染结果“提交”到页面上。
过程描述 ⭐
引入 Fiber 后，JSX 是转换为虚拟 DOM，Fiber 结构是用来跟踪虚拟 DOM 节点的渲染状态和更新过程，Fiber 节点跟虚拟 DOM 是一一对应的关系(大部分情况下，但是也看到有可能再基于虚拟 DOM 划分出更多的 Fiber 任务，例如组件的递归渲染或分支结构。对于 Fiber 就是虚拟 DOM 的说法的，也可以接受，毕竟 Fiber 节点上存在stateNode属性是指向对应的真实 DOM 节点的，个人更倾向于一一对应关系)，根据虚拟 DOM 的信息去由 React 挂载更新真实 DOM。
更新发生之后，Scheduler 会产生任务的优先级，并传递给 Reconciler，每个任务更新单元为React Element对应的Fiber节点，Reconciler 会使用 Diff 算法比对节点是发生了什么变化(新增、删减、属性修改等)并打上标记。
Scheduler 向 Reconciler 传递更新任务，Reconciler 标记更新这个过程发生在浏览器存在空闲时间时，如果不存在空闲时间，这个过程能够被随时中断。
Fiber 采用了双缓存架构，即存在一个页面上展示的 Current Fiber Tree,也存在一个内存中正在进行比对更新的 WorkInProgress Fiber Tree，这个过程是对 WorkInProgress Fiber 的生成及标记。Current Fiber Tree 和 WorkInProgress Fiber Tree 对应节点存在alternate属性关联。
当所有更新标记完毕后，内存中这个更新的结果再给到 Render，基于节点的标记更新到页面上。
React 17
React 18
并发模式
Fiber 架构
React 内部实现的一套状态更新机制。支持任务不同优先级，可中断与恢复，并且恢复后可以复用之前的中间状态。其中每个任务更新单元为 React Element 对应的 Fiber 节点。
Mount 阶段
- 首次执行
ReactDOM.render会创建fiberRootNode（源码中叫fiberRoot）和rootFiber。其中fiberRootNode是整个应用的根节点，rootFiber是<App/>所在组件树的根节点。之所以要区分
fiberRootNode与rootFiber，是因为在应用中我们可以多次调用ReactDOM.render渲染不同的组件树，他们会拥有不同的rootFiber。但是整个应用的根节点只有一个，那就是fiberRootNode。
fiberRootNode的current会指向当前页面上已渲染内容对应Fiber树，即current Fiber树。
Render 阶段
这里对应 Scheduler 调度器和 Reconciler 协调器的部分。
render阶段开始于performSyncWorkOnRoot或performConcurrentWorkOnRoot方法的调用。这取决于本次更新是同步更新还是异步更新。
主要包含的过程是 BeginWork 和 CompleteWork
- BeginWork
- CompleteWork
Commit 阶段
这个阶段是内存构建完毕的 WorkInProgress Fiber Tree 在页面渲染的过程，由 Render 渲染器完成，不同宿主环境有不同的渲染器，Web 端是 React DOM，rn 也有 React Native 的渲染器。
这个阶段分为 DOM 渲染之前，DOM 渲染，DOM 渲染之后。
- before Mutation
- Mutation
- Layout