严格模式

在 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;

Open Sandbox

关于严格模式的更多信息

除了重新运行所有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;

Open Sandbox

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

新的默认值

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

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

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

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

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

import React from 'react';

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

export default App;