啥玩意，React 一更新，我又得重学了？

阳光穿透心脏的1/2处 2022-10-19 12:54 64阅读 0赞

> 你知道在`React18`，`componentDidMount`和`componentWillUnmount`可能调用多次么？

## 从Strict Mode谈起 ##

`React`有个特性 —— `Strict Mode`，被`StrictMode`包裹的组件在`DEV`环境会对不推荐写法有更严格的提示与辅助检测行为。

**「辅助检测行为」**是指部分方法会被`React`重复调用，帮助开发者更容易发现不规范使用这些方法时的潜在`bug`。

> 所有会被重复调用的API见StrictMode文档\[1\]

举个例子：

function App() {
      const [num, update] = useState(0);
    
      function onClick() {
        update(num + 1);
      }
    
      console.log('render');
    
      return (
        <p onClick={onClick}>{num}</p>
      );
    }

当`App`被`StrictMode`包裹，点击`p`触发更新后，`App`组件会`render`两次。

> 在`v17`之前，例子中`console.log`会执行两次。但在`v17`之后，`React`覆写了`console`方法，所以`console.log`只会执行一次，但组件实际会`render`两次

这么做的目的是：作为函数组件，`App`的**「副作用」**应该在`useEffect`回调中执行。

如果不规范书写副作用（比如在组件函数体内写副作用），那么重复`render`更容易暴露可能产生的`bug`。

铺垫完背景。接下来，让我们揭露`React`善变的渣男行径。

![0d4d2e32568da72fab142db2c1cc1c32.png][]

最近刷`v18`讨论组时突然发现：`StrictMode`中会增加一条`Strict Effect`规则。

![8a23f09743f8e8e48c92ad67a2dc8a0d.png][] ![c88172a1c3689df64b6fb6782afcfb4e.png][]

## Strict Effect ##

简单的说，类似上文讲到的部分`API`在`StrictMode`下会重复执行。

`Strict Effect`规则会让`useEffect`、`useLayoutEffect`在`StrictMode`下也会重复执行。

比如：

function App() {
      // 或useLayoutEffect
      useEffect(() => {
        // 逻辑1
        return () => // 逻辑2;
      }, [])
      
      // ...
    }

在当前`React`中，组件`mount`时，执行逻辑1。

而在`Strict Effect`规则下，`mount`时的逻辑如下：

*  组件`mount`时，执行逻辑1
 *  `React`模拟组件`unmount`，执行逻辑2
 *  `React`模拟组件`mount`，执行逻辑1

注意，这里`useEffect`的依赖项是`[]`，在以往的认知里，依赖项为**「空数组」**意味着该`useEffect`逻辑只会在`mount`时执行一次。

而在`v18`的`Strict Mode`，由于包含了`Strict Effect`规则，`mount`时的`useEffect`逻辑会被重复执行。

![2e856971fa255506368d6e9e64ae0dfd.png][]

某种程度上讲，这种打破开发者既有认知的`Breaking Change`，比`Concurrent Mode`更让人难以接受。

那么`React`团队为什么要设计这条规则呢？

## 一切为了Offscreen ##

`Offscreen`是一个开发中的`API`，预计会在某个`v18`的小版本发布。

他的功能类似`Vue`中的`keep-alive`，用来在组件**「失活」**时在后台保存组件状态。

举个`Tab`切换的例子，在`Posts`和`Archive`之间切换`Tab`：

![75817bcc96dabeab5e0738246794f54a.png][]

当切换到`Posts`时，`Archive`属于**「失活」**状态。

如果不需要保存状态，则销毁`Archive`组件。当切换到`Archive Tab`时，再重新`mount Archive`。

当需要保存状态时，只能将`Posts`与`Archive`的状态保存在他们的父组件或状态管理（比如`Redux`）中。

而有了`Offscreen API`，在`Fiber`树（可以理解为虚拟`DOM`树）层面，可以保存失活的组件结构与状态。

这个`API`的应用场景主要包括：

*  切换路由时保存之前路由的状态
 *  预加载将要切换的路由

现在问题来了：当`Offscreen`组件从**「失活」**变为**「活动」**，会触发什么生命周期函数呢？

答案是：`componentDidMount`以及：

useEffect(() => {
       // 触发这个逻辑...
    }, [])

当`Offscreen`组件从**「活动」**变为**「失活」**时，会触发`componentWillUnmount`：

useEffect(() => {
       // ...
       return () => {
         // 触发这个逻辑...
       }
    }, [])

所以，这些曾经被认为在组件生命周期中只会触发一次的方法，由于`Offscreen`，在未来可能会多次触发。

这也是`React`提前在`StrictMode`中加上`Strict Effect`规则的原因。

就像渣男变心前都会有些反常的举动。

![cd29d0d5a9af350759424d9fa4c8b09f.png][]

## React18是真的挑战 ##

不管是`Offscreen`还是`Concurrent Mode`，可以预见随着`v18`的到来，`React`会更强大，相应的学习曲线会更陡峭。

这既是机遇，也是挑战。

千万别等变化一股脑到眼前时再埋怨：

你个渣男，当初说好一心一意只会触发一次，现在为了妖艳新特性，背叛我们的诺言。

![2243134636e743f58dcb8a87ced1976b.png][]

到那时`React`只会拍拍屁股转身，留下不羁的背影：

![6e682ba7fc2d213e79eb3f6ffb24ed89.png][]

### 参考资料 ###

\[1\]

StrictMode文档: https://zh-hans.reactjs.org/docs/strict-mode.html\#detecting-unexpected-side-effects

[0d4d2e32568da72fab142db2c1cc1c32.png]: /images/20221004/3583354c750b4d09a70983e08f75f137.png
[8a23f09743f8e8e48c92ad67a2dc8a0d.png]: https://img-blog.csdnimg.cn/img_convert/8a23f09743f8e8e48c92ad67a2dc8a0d.png
[c88172a1c3689df64b6fb6782afcfb4e.png]: /images/20221004/62364873632340d5aec8541709871f05.png
[2e856971fa255506368d6e9e64ae0dfd.png]: /images/20221004/b292dd9ec75c4fa1a438b7ddf1bbf240.png
[75817bcc96dabeab5e0738246794f54a.png]: /images/20221004/2e57754edec1458fb5112e898e657066.png
[cd29d0d5a9af350759424d9fa4c8b09f.png]: /images/20221004/8744caf4e410455db4eb74146531e541.png
[2243134636e743f58dcb8a87ced1976b.png]: /images/20221004/25f36249613c4d419008bdb6e179c0df.png
[6e682ba7fc2d213e79eb3f6ffb24ed89.png]: /images/20221004/5de7b8a85c654daaaf5979761b83d4a5.png