后端开发教程 - Java、Spring Boot 实战 - msg200.com
React 中的严格模式是什么?
各位 React 开发者们，你们可能听说过严格模式。但它究竟是什么呢？简而言之，React.StrictMode它是一个用于突出显示应用程序中潜在问题的有用组件。它与严格模式类似<Fragment>，<StrictMode>不会渲染任何额外的 DOM 元素。在本文中，我们将深入探讨严格模式是什么、它的工作原理以及为什么应该在应用程序中使用它。
React 中的严格模式是什么?
严格模式是一套开发工具，可帮助您在代码中的潜在问题变成实际错误之前将其捕获。在 React 应用程序中启用严格模式时，实际上是在告诉 React 启用一系列额外的检查👀和警告，旨在帮助您编写更好的代码。这些检查和警告可以捕获以下内容：
- 具有副作用的组件
- 已弃用或不安全的生命周期方法
- 某些内置函数的不安全使用
- 列表中的重复键
启用严格模式
在 React 应用中启用严格模式其实非常简单。只需在主文件中添加一行代码即可index.js。我们来看看：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
为应用程序的一部分启用严格模式
您还可以为应用程序的任何部分启用严格模式：
import { StrictMode } from 'react';
function App() {
return (
<>
<Header />
<StrictMode>
<main>
<Sidebar />
<Content />
</main>
</StrictMode>
<Footer />
</>
);
}
在这种情况下，严格模式检查不会针对Header和Footer组件运行。但是，它们会在Sidebar和Content以及它们内部的所有组件上运行，无论组件的深度如何。
严格模式仅影响开发环境
需要注意的是，严格模式对 React 应用程序的生产版本没有影响。这意味着严格模式启用的任何检查或警告都不会出现在用户看到的最终应用程序版本中。正如我们所见，严格模式会启用额外的检查和警告，这可能会降低您的开发环境的速度。
严格模式可以帮助你捕捉细微的错误
有时，React 应用程序中的 Bug 可能难以追踪，尤其是由诸如竞争条件或对组件状态的错误假设等细微问题引起的 Bug。通过启用严格模式并利用其提供的额外检查和警告，您或许能够在这些 Bug 造成严重问题之前将其捕获。
严格模式可以帮助您掌握最佳实践
React 是一个快速发展的框架，最佳实践也会随着时间推移而变化。通过启用严格模式并留意它提供的警告和建议，你可以确保你的 React 代码保持最新并遵循当前的最佳实践。例如，key在渲染列表时使用 prop 或避免副作用render()……
尽早发现潜在问题
严格模式可以捕获代码中可能在未来引发问题的问题，防止它们发展成严重问题。比如，它可以检测并警告已弃用的生命周期方法以及不再推荐的findDOMNode()方法。
避免常见错误
通过启用严格模式，您可以避免一些可能不太明显的常见错误，例如直接修改状态而不是使用setState()或使用undeclared变量。
识别不安全的生命周期
React 严格模式可以帮助识别组件中不安全的生命周期方法。例如，它可以警告你使用componentWillUpdate和componentWillReceiveProps方法，这两个方法都被认为是不安全的，并将在未来的 React 版本中被移除。
假设您有一个组件，它componentWillReceiveProps()根据传入的 props 来更新其状态：
class BlackMamba extends React.Component {
constructor(props) {
super(props);
this.state = { venom: props.venom };
}
componentWillReceiveProps(nextProps) {
this.setState({ venom: nextProps.venom });
}
render() {
return <div>{this.state.venom}</div>;
}
}
在常规模式下，该组件将按预期工作，但在 中React.StrictMode，您会在控制台中看到一条警告：
警告：BlackMamba 使用
componentWillReceiveProps，这被认为是不安全的生命周期方法。请改用 staticgetDerivedStateFromProps。
关于旧版字符串 ref API 使用的警告
严格模式还会警告您使用旧版字符串refAPI，该 API 已被弃用。但是，您应该使用createRef更安全、更易于使用的 API。
假设您有一个使用如下字符串引用的组件：
import { Component } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
componentDidMount() {
this.refs.venom.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref="venom" />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(<BlackMamba />);
旧式字符串refAPI 已被弃用，但您仍然不会在控制台中看到任何错误。
当您React.StrictMode在应用中启用如下功能时：
import { StrictMode, Component } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
componentDidMount() {
this.refs.venom.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref="venom" />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<BlackMamba />
</StrictMode>
);
您会在控制台中看到如下警告：
警告：在严格模式树中发现了一个字符串引用“venom”。字符串引用是潜在错误的来源，应避免使用。我们建议使用 useRef() 或 createRef()。点击此处了解更多关于如何安全使用引用的信息：https://reactjs.org/link/strict-mode-string-ref
让我们用createRefAPI 来修复它：
import { StrictMode, Component, createRef } from "react";
import { createRoot } from "react-dom/client";
class BlackMamba extends Component {
constructor(props) {
super(props);
this.venom = createRef();
}
componentDidMount() {
this.venom.current.focus();
}
render() {
return (
<>
<h1>Black Mamba</h1>
<input ref={this.venom} />
</>
);
}
}
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<BlackMamba />
</StrictMode>
);
太棒了，问题已经解决了 :)
检测旧版 Context API
旧版Context API在 React 中已弃用，并已被新的 Context API 取代。React 严格模式可以帮助你检测任何旧版 Context API 的使用情况，并鼓励你切换到新 API。
如果您还没有使用严格模式，那么绝对值得考虑！！！
❤ 动机：
🍀支持
请考虑关注并支持我们，订阅我们的频道。非常感谢您的支持，这将帮助我们继续创作您喜爱的内容。提前感谢您的支持！
