React渲染基础
React渲染
渲染简介
渲染是React在组件树中从根节点开始向下移动的过程，寻找所有标记为更新的组件，并要求它们根据当前的props和state描述其期望的UI结构。对于每个标记的组件，React将调用其render()方法（对于类组件）或FunctionComponent()（对于函数组件），并将JSX结果转换为纯JS对象后保存输出结果，使用React.createElement()。
在收集整个组件树的渲染输出后，React将对比新树（虚拟DOM）与当前DOM树，并收集需要对DOM进行的更改列表，以生成所需的UI结构。在这个被称为协调的过程中，React将应用所有计算出的更改到DOM中。
渲染和提交阶段
从概念上讲，这项工作分为两个阶段：
- 渲染阶段：渲染组件，计算更改
- 提交阶段：将更改应用到DOM中
在提交阶段完成后，React将运行componentDidMount和componentDidUpdate生命周期方法，以及useLayoutEffect()和一段时间后的useEffect()钩子函数。
这里有两个关键要点：
- 渲染不等于更新DOM
- 组件可能在没有可见变化的情况下被渲染
渲染原因
在初始渲染完成后，有几种不同的情况会导致重新渲染：
this.setState()（类组件）this.forceUpdate()（类组件）useState()的setter（函数组件）useReducer()的dispatch（函数组件）- 再次调用
ReactDOM.render()（在根组件上）
渲染行为
React的默认行为是在父组件渲染时递归渲染其中的所有子组件。这意味着它不关心组件的props是否发生了变化 - 只要父组件渲染了，它的子组件就会无条件地重新渲染。
换句话说，如果在根组件中调用setState()而没有其他变化，React将重新渲染组件树中的每个组件。很可能，大多数组件将返回与上次渲染完全相同的渲染输出，这意味着React不需要对DOM进行任何更改，但渲染和差异计算仍将被执行，需要时间和努力。