严格模式
严格模式
在 React 中,有许多微妙的陷阱,这些东西可能会给我们的用户带来重大问题,但对于我们作为开发者而言却不一定明显。
为了帮助我们发现和修复这些问题,React 团队引入了一种新的“严格模式”。
为了启用“严格模式”,我们将应用程序包装在一个 React.StrictMode 元素中:
这个元素在 React 内部切换一个开关,增加了一系列旨在提高我们应用程序可靠性的限制和保护措施。
其中一个特别的调整颇具争议,并且导致了很多混乱。
让我们谈谈这个。
这是上面视频中的沙箱:
关于严格模式的更多信息
除了重新运行所有Effect,严格模式还改变了许多其他内容。我们可以将这些变化分为两类:
- 旨在放大潜在问题的保障措施
- 关于弃用 API 的警告
除非你在一个遗留代码库中工作(至少有 5 年历史),否则你不太可能遇到任何弃用警告。
但你可能会注意到一些保护措施,比如我们上面提到的关于重复Effect的那个。在撰写本文时,这些保护措施都遵循相同的模式:运行两次。
例如,在严格模式下,每次渲染会自动重新执行。如果我们再看看启用了严格模式的数字时钟示例,我们会注意到每次重新渲染都会发生两次:
如果你有兴趣,可以通过阅读官方文档查看严格模式更改的完整列表。
新的默认值
虽然严格模式在技术上是可选的“自愿加入”模式,但它迅速成为使用 React 的标准方式。几乎每个样板和元框架默认都会使用严格模式!
我想确保你正在学习“真实世界”的 React,而大多数真实世界的项目都使用严格模式。因此,从现在开始,严格模式将在这个课程平台上默认启用。
我在沙箱中添加了一个小开关,它将显示严格模式是否启用,并允许你开启它:
(本文档暂时没有实现, 自己该index.js喏)
在这里亲自试一下!当启用严格模式时,您应该看到两个“Mount check!”的控制台日志,而当禁用时,只会看到一个:
一般来说,我建议将严格模式保持开启。该开关是为了故障排除而提供的。
模拟严格模式
在我开发这个课程时,我想到一个问题:是否可以通过卸载/重新安装组件来“模拟”这个严格模式的怪癖?
好吧,让我们探索一下:
这里是视频中的插图:
严格模式:
严格模式(模拟):