React 中严格模式的目的

1. React 中的严格模式
2. React Strict 模式的优点
3. React 严格模式的最佳用途

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 包装的组件的方法被有目的地调用两次。

检测过时的做法

像 findDOMNode 这样的特性曾经在 ReactJS 中被允许使用，但它们现在已被弃用。context API 也是如此，它在过去被广泛使用，但即将被删除。StrictMode 可以成为一个有用的工具，用于对过时的方法或 React 特定的功能发出警报。

React 严格模式的最佳用途

如果你使用的代码库不是你编写的，那么 StrictMode 可以成为确保正确组织代码的有用工具，尤其是在没有经验的开发人员编写 React 应用程序的情况下。

在 JavaScript（带有 React）代码中查找错误可能非常困难。但是用 StrictMode 包装代码可能会给你一些关于可能出错的想法。

总的来说，StrictMode 是 React 中最有用的工具之一。新手开发人员可以使用它来养成编写遵循 React 推荐实践的代码的习惯。使用严格模式的次数越多，使用起来就越舒服。