主题

严格模式提案

简单示例

全局仅可以包裹一个 StrictMode 标签。且不提供跳过 StrictMode 的可选项。

<StrictMode>
    <App />
</StrictMode>

发起动机

1. 组件存在卸载重新挂载的场景。可以参考 Keyed Element 提案
2. 一些初始化操作和库的初始化是异步的。异步操作在同步的 onMount onUnMount 钩子函数中，容易编写出易出错代码（不鲁棒的代码）。特别是在 快速地 卸载重新挂载 的场景下.

const Test = () => {
  let someInstance;

  onMount(()=>{
    someAsync().then((instance)=>{
        someInstance = instance
    })
  })

  onUnMount(()=>{
    someInstance?.destory(); 
  })

  return (
    <div>Test</div>
  )
}

export default Test

考虑上述代码，在特定的运行时一定会出错。

即 someInstance?.destory() destory 没有被执行。

1. 视图可能异常。如果 someInstance 和视图存在一些关联。
2. 内存可能异常，instance 没有被回收，会一直占用空间。

设计方案

在包裹了 StrictMode 后，onMount 和 onUnMount 执行次数分别为：onMount onUnMount onMount

通过这种方式，当代码中存在可能的运行时视图异常时，可以更早的发现此类问题。