React要更新，就像渣男会变心

╰+攻爆jí腚メ 2022-10-18 12:44 121阅读 0赞

大家好，我是卡颂。

今天和同事聊天，我说他是个铁憨憨，不会和女生聊天。

他啪的一下跳起来，“我可懂情调了”

“哦？那你来句土味情话。”

他清清嗓子，压低了腔调，望向远方，缓缓道：

> 如果我是`component`，我对你的情愫在`didMount`时燃起，直到我生命`unmount`时熄灭

正当他沉浸在YY的世界无法自拔时，我说：

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

![69898fdb443602fc3973630ced1b4eeb.png][]

呵，渣男！

## 从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`善变的渣男行径。

![2487108e0ffad15130a64e89b99b14a9.png][]

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

![1f30a9bebb421fbbde46ecf7f99dbeb8.png][] ![c7c2ac3d2662e82c45afb8dd3ac6027f.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`逻辑会被重复执行。

![1de5e41adbb9a1cc8b29718b1204d3ae.png][]

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

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

## 一切为了Offscreen ##

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

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

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

![24b5e19070d53d734aac5ea79322bf12.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`规则的原因。

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

![0aa77713bb78fda58c751b4526943268.png][]

## React18是真的挑战 ##

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

这既是机遇，也是挑战。

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

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

![52f77f260bccd5eef3126deb9d69ca3e.png][]

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

![0f6b94aebdbd6c12c8c448c0660830f3.png][]

### 参考资料 ###

\[1\]

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

[![42444aca8b31c8972e075f0a68783a4c.png][]][42444aca8b31c8972e075f0a68783a4c.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![082b8036f21c8a31e4389db15065afe8.png][]

[69898fdb443602fc3973630ced1b4eeb.png]: /images/20221005/2a1102460d4c4eaebea9111aed2843e5.png
[2487108e0ffad15130a64e89b99b14a9.png]: /images/20221005/790e8c0ee7ab4f0da4afb515383d4119.png
[1f30a9bebb421fbbde46ecf7f99dbeb8.png]: https://img-blog.csdnimg.cn/img_convert/1f30a9bebb421fbbde46ecf7f99dbeb8.png
[c7c2ac3d2662e82c45afb8dd3ac6027f.png]: /images/20221005/03ece373d3ae48aca713541973ba9ac6.png
[1de5e41adbb9a1cc8b29718b1204d3ae.png]: /images/20221005/8f8d60aaea404a97ad514bd1e7d911ab.png
[24b5e19070d53d734aac5ea79322bf12.png]: /images/20221005/e0922832d9894305ac9af4d2472fd188.png
[0aa77713bb78fda58c751b4526943268.png]: /images/20221005/5b96e99b81034422ac79720eee29644f.png
[52f77f260bccd5eef3126deb9d69ca3e.png]: /images/20221005/45ecae536e37494db4c2022eb0846763.png
[0f6b94aebdbd6c12c8c448c0660830f3.png]: /images/20221005/e4b83fd8f91b4115bc0659b950d0c147.png
[42444aca8b31c8972e075f0a68783a4c.png]: /images/20221005/c6956ea80d1e4d7aa8279f8bb7e45046.png
[42444aca8b31c8972e075f0a68783a4c.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[082b8036f21c8a31e4389db15065afe8.png]: /images/20221005/398679dd2c3440ddbacfa1e8b864e41c.png