react渲染流程
React的渲染流程主要包括以下几个步骤：
- 初始化阶段：React会创建组件的实例，并初始化组件的state和props。同时，React会调用组件的constructor方法和componentWillMount生命周期方法。
- 渲染阶段：React会调用组件的render方法，生成组件的虚拟DOM树。在这个过程中，React会遍历组件树，调用每个组件的render方法，生成对应的虚拟DOM树。
- 调和阶段：在渲染阶段结束后，React会将新生成的虚拟DOM树与之前的虚拟DOM树进行比较，找出两者之间的差异。这个过程称为调和（reconciliation），主要通过DOM diff算法来优化性能。
- 提交阶段：在调和阶段结束后，React会将差异应用到实际的DOM上，更新视图。这个过程称为提交（commit），包括插入、更新和删除DOM节点，以及更新DOM节点的属性和内容。
- 副作用处理阶段：在提交阶段结束后，React会处理组件的副作用，如处理事件监听器、启动定时器等。同时，React会触发组件的相应生命周期方法，如componentDidMount和componentDidUpdate。
总的来说，React的渲染流程包括初始化阶段、渲染阶段、调和阶段、提交阶段和副作用处理阶段。通过这些步骤，React能够高效地更新视图，并提供一个可靠的渲染机制。
fiber 架构双缓存树工作原理
React Fiber架构的双缓存树工作原理是指在渲染过程中使用两个不同的虚拟DOM树来实现增量渲染和可中断的渲染。这种双缓存树的工作方式可以提高React应用的性能和用户体验。
工作原理如下：
- 初始渲染：在React应用的初始渲染阶段，会创建两个虚拟DOM树，分别称为current tree和work-in-progress tree。current tree是当前显示在屏幕上的虚拟DOM树，而work-in-progress tree是正在进行渲染的虚拟DOM树。
- 渲染阶段：在渲染阶段，React会从根组件开始递归遍历整个组件树，生成work-in-progress tree。这个过程是增量式的，即每次只处理一小部分组件。
- 任务切片：为了实现可中断的渲染，React将渲染过程划分为多个任务切片，每个任务切片的执行时间不超过一定的时间片。当一个任务切片执行完后，React会检查是否有更高优先级的任务需要执行，如果有，则会中断当前任务切片，切换到更高优先级的任务。
- 任务优先级：React Fiber架构引入了优先级的概念，每个任务都有一个优先级，用于决定任务的执行顺序。优先级高的任务会优先执行，而低优先级的任务会被推迟执行，以保证用户界面的响应性。
- 交替更新：在渲染过程中，React会交替更新current tree和work-in-progress tree。每次只更新一小部分组件，然后将更新结果反映到屏幕上。这样可以避免长时间的阻塞，提高用户界面的响应性。
- 提交阶段：当所有任务切片都执行完后，React会将work-in-progress tree标记为current tree，并将其渲染到屏幕上。这样，下一次的渲染过程就从新的work-in-progress tree开始。
通过使用双缓存树和增量渲染，React Fiber架构能够实现更高效、可中断的渲染，提高React应用的性能和用户体验。它使得React能够更好地适应复杂的应用场景，并为未来的功能和扩展提供了更好的基础。
