深度理解 React Render

[arlyxiao]

https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/#what-is-rendering

Render 流程概览

React 从根节点组件往下开始寻找所有被标记为需要更新的组件，对于类组件来说，会调用 classComponentInstance.render(), 如果是函数组件，会用 FunctionComponent() 渲染输出。

组件渲染函数用 jsx 语法， jsx 语法会在编译时先转成 React.createElement() 用法，最后再转成纯 JS 对象。具体过程参考如下代码

// This JSX syntax:
return <SomeComponent a={42} b="testing">Text here</SomeComponent>

// is converted to this call:
return React.createElement(SomeComponent, {a: 42, b: "testing"}, "Text Here")

// and that becomes this element object:
{type: SomeComponent, props: {a: 42, b: "testing"}, children: ["Text Here"]}

React 会将最后生成的纯对象 (一般把这个对象叫做 virtual dom) 跟上一次渲染前的对象进行 diff 过程，最后同步所有修改。

Render and Commit Phases

1. Render phase 主要是渲染组件并计算所有变更
2. Commit phase 主要将这些变更应用到 DOM 结构上

在 commit phase 之后，React 开始同步调用 componentDidMount, componentDidUpdate (类生命周期)，或者 useLayoutEffect hooks。然后 React 会设置一个很短的延迟时间，一旦这个时间过期，就开始执行所有的 useEffect hooks。这个步骤也被称为副作用阶段。

How does react handle renders

• 类组件: this.setState(), this.forceUpdate()
• 函数组件: useState, useReducer
• 其它情况: ReactDOM.render()，这种情况相当于是从根节点执行 forceUpdate()

Standard render behavior

需要知道的很重要的一点是，React 默认情况下是当父组件需要渲染时，会开始递归循环所有子组件

[arlyxiao]

Render flow

1. User interacts with App. Let us say the user clicks a button.
2. Component state changes
3. The DOM is mutated
4. cleanup function is invoked to clean effects from previous render if useLayoutEffect dependencies have changed.
5. useLayoutEffect hook is called after cleanup.
6. Changes are painted on the screen