React Fiber架构应用渲染流程详解：prerender与render阶段

在"13 了解基于 React Fiber 架构的应用程序整体渲染流程"这一慕课专栏中，讲解了React Fiber架构下应用程序的运行机制。React Fiber的主要运行流程分为prerender、render和commit三个阶段。首当其冲的是prerender阶段，这是在应用程序首次渲染时发生的，其目标是构建fiberRoot对象，这是整个Fiber树的起点。在这个阶段，React会检查容器的有效性，实例化fiberRoot，以及初始化更新队列，确保架构的基础设施得以建立。 接下来是render阶段，这个阶段的核心任务是确定哪些UI组件需要更新。React通过时间分片的方式处理Fiber节点的更新，确保高优先级任务（如动画）先执行。在render阶段，React会构建workInProgress对象树，并在此过程中收集可能产生的副作用，最终得到一个标记了副作用的Fiber节点树链表，这部分信息将在commit阶段进行关键处理。 render阶段的特点是动态调度，React会逐个Fiber节点进行更新，每次更新前都会向调度器申请执行权，直到所有更新任务完成。整个过程如图3.3.3所示，波谷代表任务的深入执行，而波峰则是控制权返回的时刻。 最后是commit阶段，这是真正将更改应用到DOM的过程，包括执行副作用、合并更新和重新布局等操作。在这个阶段，React会根据之前的标记和更新队列，将变化反映到实际的用户界面中，从而完成一次完整的渲染周期。 总结来说，理解React Fiber架构的这三个阶段至关重要，因为它们揭示了React如何组织和优化其组件的渲染，确保性能和响应性。通过学习和实践这些概念，开发者能够更好地掌握React的运行机制，提升应用程序的性能和用户体验。