React 中严格模式的目的

React 1年前 70

JavaScript 是一种用于开发全栈应用程序的优秀编程语言。新手开发人员经常难以编写干净、有组织的 JavaScript 代码。幸运的是，有一些 JavaScript 框架为编写 Web 应用程序提供了一些结构。React 是编写高效 Web 应用程序的最流行框架之一，即使不是最流行的框架。它提供了一个名为 StrictMode 的辅助组件来突出显示与 React 标准实践不同的代码片段。

React 中的严格模式

React StrictMode 突出了应用程序中的潜在问题。通过这样做，它可以帮助你编写更具可读性和安全性的应用程序。此功能包含在 React 包中，因此你不必单独导入它。如果你有任何可疑代码，请将其包装在 StrictMode 帮助程序组件中，仅此而已。这里如何在函数式 React 组件中使用它：

import React, { Component } from 'react';
function SuspiciousComponent() {
  return (
    <div>Let's say this is suspicious</div>
  )
}
function App() {
  return (
    <div>
    	<React.StrictMode>
    	<SuspiciousComponent></SuspiciousComponent>
    	</React.StrictMode>
    </div>
  )
}

在这种情况下，我们只是用我们的辅助组件包装了 <SuspiciousComponent>。如果我们将子组件的代码更改为违反 React 推荐做法的内容，StrictMode 会发出警报。这是必要的，因为一些不良做法可能不会使应用程序崩溃。仅仅因为该应用程序有效并不意味着它没有问题。如果你对一段代码感到怀疑，请使用 <React.StrictMode> 辅助组件将其包装起来，以确保它没有任何问题。你可以包装单个组件、多个组件或整个树。

如果你想在整个组件树中查找潜在错误，请查看父组件的 return 语句并包装包含所有其他组件的 <div>（或其他一些元素）。如果你构建了一个复杂的应用程序，StrictMode 将不可避免地检测到一些错误并将它们报告给控制台。

就像 Fragment 辅助组件一样，StrictMode 不呈现任何实际的 UI。它也不会影响你的应用程序的样式。

React Strict Mode 用于在开发模式下检测错误。一旦你清除了所有错误并且应用程序已准备好用于生产，你就可以将其删除。

React Strict 模式的优点

除了在 React 中使用 StrictMode 的明显好处外，它还可以成为学习编写更好质量代码的有用工具。

防止副作用

一些生命周期方法在渲染阶段可能会被多次调用，所以 React 建议它们不应该包含任何副作用。此建议经常被忽视，导致不正确的状态和内存泄漏，从而使你的应用程序暴露于外部攻击。幸运的是，StrictMode 辅助组件可以帮助你找到有害的副作用并修复它们。为了实现这一点，使用 StrictMode 包装的组件的方法被有目的地调用两次。