React StrictMode

React.StrictMode 是 React 提供的一个工具，用于帮助开发者编写更高质量的代码。它并不会对应用程序的逻辑产生影响，也不会改变组件的行为或渲染输出。相反，StrictMode 旨在通过启用额外的检查和警告来辅助开发过程，尤其是在检测潜在问题方面非常有用。它是专门为开发环境设计的，在生产环境中不会有任何效果。

使用 React.StrictMode

要使用 React.StrictMode，只需将其作为父级组件包裹在你想要检查的组件树周围即可：

import React from "react";
import MyComponent from "./MyComponent";

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

export default App;

React.StrictMode 的功能

1. 检测不安全的生命周期方法

React 16.3 引入了新的生命周期方法，并标记了一些旧的方法为“不安全”。StrictMode 可以帮助你识别并迁移到新的生命周期方法。它会在开发环境中模拟类组件的挂载和卸载，以捕获任何依赖于这些不安全生命周期方法的问题。

• 不安全的生命周期：
  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

当使用 StrictMode 时，React 会发出警告，提示你应该避免使用这些方法，并提供迁移指南。

2. 警告意外的副作用

StrictMode 会在开发模式下对函数组件进行两次调用（仅限于渲染阶段），以帮助发现可能存在的副作用。如果组件在第一次渲染时执行了某些副作用操作（如网络请求、订阅事件等），而在第二次渲染时不应该再次执行这些操作，则会暴露出潜在的问题。这有助于确保副作用只在正确的时间发生，例如在 useEffect 钩子中。

3. 禁止过时的字符串引用

React 16.3 引入了基于对象的 ref API，推荐使用 React.createRef() 或 useRef Hook 来替代旧的字符串 refs。StrictMode 会发出警告，提醒你更新代码以使用现代的引用方式。

4. 检测废弃的上下文 API

React 16.3 还引入了新的 Context API，取代了旧版本中的上下文实现。StrictMode 会警告你关于使用旧版上下文 API 的情况，鼓励你迁移到新版 API。

5. 自动绑定类方法

在 React 16.9 中，StrictMode 开始发出警告，指出自动绑定类方法可能会导致性能问题。它建议使用箭头函数或显式绑定方法，以避免不必要的内存分配。

6. 异步模式下的额外检查

虽然 React 的异步渲染特性已经被移除，但 StrictMode 仍然保留了一些与之相关的检查，以确保未来的兼容性。例如，它会检查是否正确实现了 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 等静态方法。

7. 其他未来改进

随着 React 的发展，StrictMode 可能会添加更多类型的检查和警告，以帮助开发者提前适应即将到来的变化。它是一个不断演进的工具，致力于提高代码质量。

注意事项

• 仅适用于开发环境：StrictMode 的所有检查和警告都只在开发环境中生效，不会影响生产构建。
• 不影响性能：由于这些检查只在开发过程中运行，因此不会对应用程序的实际性能造成负面影响。
• 不会修改组件行为：StrictMode 不会改变组件的渲染输出或行为，它的作用是暴露潜在问题以便修复。

示例

假设我们有一个简单的计数器应用，并且我们在开发环境中启用了 StrictMode：

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  // 模拟一个副作用：控制台日志记录
  console.log("Counter rendered");

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点我</button>
    </div>
  );
}

function App() {
  return (
    <React.StrictMode>
      <Counter />
    </React.StrictMode>
  );
}

export default App;

在这个例子中：

• 如果 Counter 组件内部存在未正确处理的副作用（比如在渲染期间发起网络请求），StrictMode 会通过重复渲染来帮助发现这些问题。
• 它还会检查是否有使用不安全的生命周期方法或其他过时的 API，并给出相应的警告。

总结

React.StrictMode 是一个强大的工具，可以帮助开发者识别和解决潜在的代码质量问题。通过启用额外的检查和警告，它可以促进更好的编码实践，确保应用程序在未来版本的 React 中保持良好的兼容性和性能。