React函数式组件渲染、useEffect顺序总结

﹏ヽ暗。殇╰゛Y 2023-10-13 23:16 60阅读 0赞

> 参考资料：  
> [深入React的生命周期(上)：出生阶段(Mount)][React_Mount]  
> [深入React的生命周期(下)：更新(Update)][React_Update]  
> [精读《useEffect 完全指南》][useEffect]  
> [React组件重新渲染理解 & 优化大全][React_ _]  
> [React渲染顺序及useEffect执行顺序探究（含并发模式）][React_useEffect]

## 组件状态 ##

同样还是可以把组件的状态分为mount、update和unmount。

*  mount：组件首次出现在页面中。React会通过最后组件的**函数返回值**，确定它有哪些子组件，依次mount和render子组件。**一个component只是定义了，但没有最后被返回，就不会被挂载和渲染。**
 *  update：组件的重新渲染，重新渲染的条件见[这里][Link 1]。
 *  unmount：如果组件从页面消失，就会被unmount。常见于条件渲染、或者子组件未使用key标明时的位置更改。

## React16的组件渲染过程 ##

即使用`ReactDOM.createRoot(DOM).render(<App />)`渲染组件时。

### 单一组件渲染过程 ###

在组件的不同阶段，调用顺序如下

#### mount ####

*  函数体：此时`useState`等hooks取初始值，如果用callback初始化，则会调用初始化函数
 *  effect函数：会调用一遍所有`useEffect`注册的函数，调用顺序**就是`useEffect`在函数体里出现的顺序**

#### update ####

*  函数体：正常调用，取最新state和ref的值
 *  clean函数：如果依赖项`A=[…]`发生改变，则会调用，但若有其它依赖项`B`也变了，却没列进依赖项里，这些未注册依赖项会使用**最后一次`A=[…]`发生改变时的B的值。**因为这是clean函数最新的定义。
    
    样例可见[React函数式组件渲染顺序探究（Demo）][React_Demo]，组件依赖了name和state，但只注册了state这一个依赖项。
 *  effect函数：如果依赖项`A=[…]`发生改变，则会调用，但若有其它依赖项`B`也变了，却没列进依赖项里，这些未注册依赖项会使用**最后一次`A=[…]`发生改变时的B的值。**因为这是effect函数最新的定义。

#### unmount ####

*  clean函数：会调用一遍所有`useEffect`返回的clean函数，调用顺序也是注册顺序。同样，也取的是它最新的定义。
    
    假设有两个effect，都有未注册依赖项`B`。但它们一个依赖项为`A=[…]`，另一个为`[]`。
    
    如果最开始`B=1`，而`A`变的时候`B=2`，最后unmount的时候，前者的`B=2`，后者的`B=1`，因为后者的clean函数并未更新。

### 树型组件调用顺序 ###

#### mount ####

如果有一个这样的component：

*  函数体：调用顺序是先序遍历的DFS，即`[A, A1, A1_1, A1_2, A2, A2_1, A2_2]`
 *  effect：类似于二叉树的后序遍历，先遍历孩子，再遍历根，即：`[A1_1, A1_2, A1, A2_1, A2_2, A2, A]`。

#### update ####

如果上述的component变成了如下，A重新渲染。

*  如果A1和A2没有设置key，React会当作需要unmount旧的A1、A2，再mount新的A1、A2。
 *  否则，React只会重新渲染A1、A2。

假设这里**A1设置了key，而A2没有：**

*  函数体：按**当前组件内容**的先序DFS：`[A1, A1_1, A1_2, A2, A2_1, A2_2]`。
 *  clean：
    
     *  先执行unmount的组件的clean，执行顺序是**先序DFS**，即`[A2, A2_1, A2_2]`
     *  再执行update组件的clean，执行顺序是**后序DFS**，即`[A1_1, A1_2, A1]`
 *  effect：按**当前组件内容**的后序DFS执行，即`[A2_1, A2_2, A2, A1_1, A1_2, A1]`。

## React18的更新 ##

即使用`StrictMode`渲染组件时。

root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );

与16最大的区别是：

（1）函数体都会被调用2遍

（2）新mount的组件都会再次调用一遍clean和effect

有点类似于， `mount (React 18)`约等于`mount(React 16) + update(React 16)`

所以：

*  第一次body即mount的body，第二次body是update的body
    
    但也不完全相同，比如，如果使用callback来初始化state的值时，mount的时候调用的两遍函数体，都是会调用这个callback的，而不是一次调用一次不调用。
 *  第一次effect是mount的effect
 *  接下来的clean和effect是update时的clean+effect

#### mount ####

如果有一个这样的component：

*  函数体：调用顺序是先序遍历的DFS，即`[A, A1, A1_1, A1_2, A2, A2_1, A2_2]`。由于会叫两遍，实际上是`[A, A, A1, A1, A1_1, A1_1, A1_2, A1_2, A2, A2, A2_1, A2_1, A2_2, A2_2]`
    
     *  有意思的是，不是先mount DFS一遍，update DFS一遍，是在DFS的过程中直接叫两遍函数体。
 *  effect：类似于二叉树的后序遍历，先遍历孩子，再遍历根，即：`[A1_1, A1_2, A1, A2_1, A2_2, A2, A]`。
 *  clean：后序DFS`[A1_1, A1_2, A1, A2_1, A2_2, A2, A]`。
 *  effect：后序DFS`[A1_1, A1_2, A1, A2_1, A2_2, A2, A]`。

#### update ####

如果上述的component变成了如下，A重新渲染。

*  如果A1和A2没有设置key，React会当作需要unmount旧的A1、A2，再mount新的A1、A2。
 *  否则，React只会重新渲染A1、A2。

假设这里**A1设置了key，而A2没有：**

*  函数体：按**当前组件内容**的先序DFS：`[A1, A1_1, A1_2, A2, A2_1, A2_2]`。同样会调用2次。
 *  clean：
    
     *  先执行unmount的组件的clean，执行顺序是**先序DFS**，即`[A2, A2_1, A2_2]`
     *  再执行update组件的clean，执行顺序是**后序DFS**，即`[A1_1, A1_2, A1]`
 *  effect：按**当前组件内容**的后序DFS执行，即`[A2_1, A2_2, A2, A1_1, A1_2, A1]`。
 *  clean：mount的组件会被update，所以会有**第二轮clean**，后序DFS，即`[A2_1, A2_2, A2]`
 *  effect：第二轮effect，即`[A2_1, A2_2, A2]`

[React_Mount]: https://zhuanlan.zhihu.com/p/30757059
[React_Update]: https://www.v2think.com/dig-into-react-lifecircle-02
[useEffect]: https://zhuanlan.zhihu.com/p/60277120
[React_ _]: https://blog.renwangyu.com/2022/10/07/react-rerender/
[React_useEffect]: https://blog.csdn.net/web2022050901/article/details/125238225
[Link 1]: https://www.notion.so/react-26dfff09d9fe4871980c922972548b8e?pvs=21
[React_Demo]: https://www.cnblogs.com/milliele/p/17577996.html