ReactJS - 嚴格模式：初學者指南

Hello, 未來的 React 開發者們！今天，我們將深入探討 React 的一個重要但常被忽視的功能：嚴格模式（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>Hello, 我是一個舊组件！</div>;
}
}

如果你在嚴格模式中使用這個组件，你會在控制台看到一個關於使用不安全的 componentWillMount 生命週期方法的警告。

相反，你應該使用更安全的替代方法。這裡有一個不安全方法和它們的安全替代方法的對照表：

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

遗留 Ref API 使用

Refs 是什麼？

Refs 提供了一種方式來訪問在 render 方法中創建的 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 的嚴格模式領地，探索了它對不安全生命週期、遺留 ref 使用以及棄用的 findDOMNode 方法的警告。記住，嚴格模式是你友好鄰居的 React 開發者工具，總是在那裡幫助你寫出更好、更安全的代碼。

當我們結束時，我想到一個學生曾經告訴我，“React 就像一個嚴厲但關心的父母——它設定規則來保護我們，但也給我們創造驚奇事物的自由。”我完全同意！

持續練習，持續學習，最重要的是，持續編程。直到下一次，快樂 React-ing！

Credits: Image by storyset