ReactJS - 严格模式：初学者指南

你好，未来的React开发者们！今天，我们将深入探讨React中一个重要但常被忽视的特性：严格模式。如果你是编程新手，不用担心——我会一步步引导你理解这个概念，就像我多年来教导无数学生一样。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们一起踏上这个学习冒险之旅！

ReactJS - Strict Mode

严格模式是什么？

在我们深入了解具体内容之前，先来理解一下React中的严格模式是什么。想象你正在学习开车。严格模式就像一个坐在你旁边非常严格的驾驶教练，指出你犯的每一个小错误。它不是为了责备你，而是帮助你成为一个更好的驾驶员——或者在我们的情况下，是一个更好的React开发者。

严格模式是一个用来突出显示你应用中潜在问题的工具。它为其子组件激活了额外的检查和警告。让我们看看如何使用它：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

在这个例子中，我们将整个App组件用React.StrictMode包裹起来。这意味着App中的所有组件都将接受这些额外的检查。

现在，让我们探索严格模式实际上检查了什么。

不安全生命周期使用

生命周期是什么？

在我们谈论不安全生命周期之前，先来理解一下生命周期是什么。在React中，组件会经历从诞生（挂载）到消亡（卸载）的一系列阶段。这些阶段被称为生命周期。

不安全生命周期

一些生命周期方法被认为是不安全的，因为它们可能导致异步渲染中的bug。严格模式可以帮助识别它们的用法。这里有一个例子：

class OldComponent extends React.Component {
componentWillMount() {
console.log("这个方法是不安全的！");
}

render() {
return <div>你好，我是一个旧组件！</div>;
}
}

如果你在严格模式中使用这个组件，你会在控制台看到一个关于使用不安全的componentWillMount生命周期方法的警告。

相反，你应该使用更安全的选择。以下是不安全方法和它们的安全替代方法表格：

不安全方法	安全替代
componentWillMount	componentDidMount
componentWillReceiveProps	static getDerivedStateFromProps
componentWillUpdate	getSnapshotBeforeUpdate

旧版Ref API使用

Refs是什么？

Refs提供了一种访问在渲染方法中创建的DOM节点或React元素的方式。它们就像是到UI特定部分的直接线路。

字符串Refs（旧版）

在过去，refs使用字符串来创建，像这样：

class OldButton extends React.Component {
componentDidMount() {
this.refs.myButton.focus();
}

render() {
return <button ref="myButton">点击我！</button>;
}
}

这种方法被认为是旧版的，并且可能会导致问题。严格模式会警告你如果你使用字符串refs。

现代Ref使用

相反，你应该使用createRef API或useRef钩子：

class ModernButton extends React.Component {
constructor(props) {
super(props);
this.myButton = React.createRef();
}

componentDidMount() {
this.myButton.current.focus();
}

render() {
return <button ref={this.myButton}>点击我！</button>;
}
}

在这个例子中，我们使用React.createRef()来创建一个ref，这更安全且更高效。

旧版findDOMNode使用

findDOMNode是什么？

findDOMNode是一个用来在DOM树中搜索特定React组件实例的方法。然而，由于它可能引起的问题，现在已经被弃用。

findDOMNode使用示例

class OldFinder extends React.Component {
componentDidMount() {
const node = ReactDOM.findDOMNode(this);
node.style.backgroundColor = 'red';
}

render() {
return <div>我即将变成红色！</div>;
}
}

这段代码会将div的背景颜色变为红色。然而，像这样使用findDOMNode是不推荐的，严格模式会警告你。

现代替代方法

相反，你应该使用refs：

class ModernFinder extends React.Component {
constructor(props) {
super(props);
this.myDiv = React.createRef();
}

componentDidMount() {
this.myDiv.current.style.backgroundColor = 'blue';
}

render() {
return <div ref={this.myDiv}>我即将变成蓝色！</div>;
}
}

这实现了同样的结果，但以一种更安全、更符合React的方式。

结论

好了，各位！我们一起穿越了React严格模式的领域，探索了它关于不安全生命周期、旧版refs使用和被弃用的findDOMNode方法的警告。记住，严格模式是你友好邻里的React开发者工具，总是在那里帮助你写出更好、更安全的代码。

在我们结束之前，我想起了一个学生曾经对我说过的话：“React就像一个严格但又关爱的父母——它设定规则来保护我们，同时也给我们创造惊人事物的自由。”我完全同意！

继续练习，继续学习，最重要的是，继续编码。下次见，快乐React编程！

Credits: Image by storyset