My App

严格模式

严格模式

在 React 中,有许多微妙的陷阱,这些东西可能会给我们的用户带来重大问题,但对于我们作为开发者而言却不一定明显。

为了帮助我们发现和修复这些问题,React 团队引入了一种新的“严格模式”。

为了启用“严格模式”,我们将应用程序包装在一个 React.StrictMode 元素中:

import React from "react";
 
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

这个元素在 React 内部切换一个开关,增加了一系列旨在提高我们应用程序可靠性的限制和保护措施。

其中一个特别的调整颇具争议,并且导致了很多混乱。

让我们谈谈这个。

这是上面视频中的沙箱:

import React from 'react';

import MediaPlayer from './MediaPlayer'

const DEMO_SONG_SRC = 'https://storage.googleapis.com/joshwcomeau/bvrnout-take-it-easy-short.mp3';

function App() {
  const [
    showMediaPlayer,
    setShowMediaPlayer
  ] = React.useState(true);
  
  return (
    <>
      <button
        onClick={() => setShowMediaPlayer(!showMediaPlayer)}
      >
        Toggle media player
      </button>
      {showMediaPlayer && <MediaPlayer src={DEMO_SONG_SRC} />}
    </>
  );
}

export default App;

关于严格模式的更多信息

除了重新运行所有Effect,严格模式还改变了许多其他内容。我们可以将这些变化分为两类:

  • 旨在放大潜在问题的保障措施
  • 关于弃用 API 的警告

除非你在一个遗留代码库中工作(至少有 5 年历史),否则你不太可能遇到任何弃用警告。

但你可能会注意到一些保护措施,比如我们上面提到的关于重复Effect的那个。在撰写本文时,这些保护措施都遵循相同的模式:运行两次。

例如,在严格模式下,每次渲染会自动重新执行。如果我们再看看启用了严格模式的数字时钟示例,我们会注意到每次重新渲染都会发生两次:

import React from 'react';

import Clock from './Clock'

function App() {
  const [showClock, setShowClock] = React.useState(true);
  
  return (
    <>
      <button
        className="clock-toggle"
        onClick={() => setShowClock(!showClock)}
      >
        {showClock ? 'Clock ON' : 'Clock OFF'}
      </button>
      
      {showClock && <Clock />}
    </>
  );
}

export default App;

如果你有兴趣,可以通过阅读官方文档查看严格模式更改的完整列表。

新的默认值

虽然严格模式在技术上是可选的“自愿加入”模式,但它迅速成为使用 React 的标准方式。几乎每个样板和元框架默认都会使用严格模式!

我想确保你正在学习“真实世界”的 React,而大多数真实世界的项目都使用严格模式。因此,从现在开始,严格模式将在这个课程平台上默认启用。

我在沙箱中添加了一个小开关,它将显示严格模式是否启用,并允许你开启它:

(本文档暂时没有实现, 自己该index.js喏)

在这里亲自试一下!当启用严格模式时,您应该看到两个“Mount check!”的控制台日志,而当禁用时,只会看到一个:

import React from 'react';

function App() {
  React.useEffect(() => {
    console.log('Mount check!');
  }, []);
  
  return (
    <>
      Hello World!
    </>
  );
}

export default App;

一般来说,我建议将严格模式保持开启。该开关是为了故障排除而提供的。

模拟严格模式

在我开发这个课程时,我想到一个问题:是否可以通过卸载/重新安装组件来“模拟”这个严格模式的怪癖?

好吧,让我们探索一下:

这里是视频中的插图:

严格模式:

strict-mode-effect

严格模式(模拟):

strict-mode-effect-simulated

On this page