[React] 是如何处理组件更新和渲染的？【热度: 862】

[yanlele]

关键词：React 组件更新、React 组件渲染

React 组件的更新和渲染遵循一个相对严格的生命周期，这个生命周期在 React 16 版本之后，也就是从引入 Fiber 架构开始，稍微有所变化。React 通过一系列的生命周期方法以及新引入的 Hooks API，对组件的更新进行管理，主要流程如下：

类组件的生命周期方法包括：

1. 挂载(Mounting)

   • constructor(): 组件被创建时调用，初始化 state。
   • static getDerivedStateFromProps(): 组件实例化后和接受新属性时将会调用。
   • render(): 唯一必须实现的方法，返回元素描述。
   • componentDidMount(): 组件挂载（插入 DOM 树中）之后调用。

2. 更新(Updating)

   • static getDerivedStateFromProps(): 在接收到新的 props 时调用。
   • shouldComponentUpdate(): 在接收到新的 props 或者 state 时，决定是否进行渲染。
   • render(): 重新渲染组件。
   • getSnapshotBeforeUpdate(): 在最新的渲染输出提交到 DOM 前将会立即调用。
   • componentDidUpdate(): 在组件更新后调用。

3. 卸载(Unmounting)

   • componentWillUnmount(): 在组件卸载及销毁之前直接调用。

React 16.3 之后的生命周期的变化

React 团队增加了新的生命周期方法，并且准备弃用某些旧的生命周期方法（如 componentWillMount、componentWillReceiveProps、componentWillUpdate 等）。引入了如 static getDerivedStateFromProps 和 getSnapshotBeforeUpdate 等新的生命周期方法。

函数组件和 Hooks

在 React 16.8 版本后，引入了 Hooks API，允许在不编写类的情况下使用 state 以及其他的 React 特性。对于函数组件，有几个常用的 Hooks：

• useState: 在函数组件中添加 state。
• useEffect: 可以在组件中执行副作用操作（数据请求、订阅以及手动更改 React 组件中的 DOM 等）。
• useContext: 允许你访问 React 的 Context 对象。
• useReducer: 另一种在组件中管理 state 的方式，它用于复杂的 state 逻辑。
• 其他 Hooks（如 useCallback, useMemo, useRef 等）。

更新和渲染流程：

1. 当组件的 state 或者 props 发生变化时，React 会将新的 props 和 state 比较之前的，根据比较结果决定是否进行更新。
2. 如果 shouldComponentUpdate、PureComponent 或 React.memo 表示不需要更新，React 将不会进行更新。
3. 如果需要更新，React 会调用 render 方法以及相关的生命周期方法或 Hooks，这个过程会创建一个虚拟 DOM 树。
4. React 之后会对比新的虚拟 DOM 树与上一次更新时的虚拟 DOM 树，通过 DOM diffing 算法判断在哪进行实际的 DOM 更新。
5. 应用必要的 DOM 更新到实际的 DOM 树上，如果有必要，调用 getSnapshotBeforeUpdate 和 componentDidUpdate 方法。

这个过程保持了 React 组件的高效和可预测性，同时提供了生命周期的方法和 Hooks，使开发者能够插入自定义行为或响应组件的生命周期事件。