React项目应该从一开始就引入strict mode

作者

React 从一开始就引入 strict mode 是一个很好的实践，它可以帮助开发者在开发过程中尽早发现潜在的问题并进行调试。Strict mode 是 React 16 中引入的一个开发工具，它可以在组件树中的任何位置启用，以帮助开发者识别一些不安全的做法、过时的 API 使用、副作用产生的警告等。

Strict mode 在开发环境下对组件进行额外的检查，并在控制台中输出相关的警告信息。它可以帮助开发者发现一些潜在的问题，例如不安全的生命周期方法使用、过时的 API 使用、意外的副作用等。Strict mode 不会在生产环境中产生任何影响，它仅用于开发和调试阶段。

使用 strict mode 可以带来以下好处：

  1. 组件会额外重新渲染一次，以帮助发现由于不纯的渲染引起的 bug。
  2. Effect 会额外运行一次，以帮助发现由于缺少 Effect 清理而引起的 bug。
  3. 组件会被检查是否使用了过时的 API。

在整个应用中启用 strict mode 的方法如下：

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

如果只想在应用的一部分启用 strict mode，可以将其包裹在相应的组件中：

import { StrictMode } from 'react';

function App() {
  return (
    <>
      <Header />
      <StrictMode>
        <main>
          <Sidebar />
          <Content />
        </main>
      </StrictMode>
      <Footer />
    </>
  );
}

通过在开发过程中使用 strict mode，可以帮助开发者尽早发现并修复潜在的问题，提高应用的质量和稳定性。

Learn more:

  1. – React
  2. React18 严格模式（Strict Mode） | 全栈小册
  3. Strict Mode – React

发表评论