ReactJS - 狀態管理 API

你好，初露頭角的程式設計師們！今天，我們將踏上一段令人興奮的旅程，探索 ReactJS 狀態管理的世界。別擔心如果你是程式設計新手——我將成為你的友好導遊，我們會一步步前進。到了這個教學的結尾，你將對 React 如何管理狀態有堅實的掌握，這對於建立動態且互動的網頁應用程序至關重要。

React 中的狀態是什麼？

在我們深入細節之前，讓我們了解 React 中 "狀態" 的含義。想像你正在建立一個簡單的計數器應用程序。當前的計數就是我們所謂的 "應用程序狀態"。這就像是你應用程序的記憶——它知道目前顯示的是哪個數字。

這裡有一個計數器組件的簡單範例：

import React, { Component } from 'react';

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

render() {
return (
<div>
<p>計數: {this.state.count}</p>
</div>
);
}
}

在這個例子中，count 是我們的狀態。它在構造函數中初始化為 0。

更新狀態：setState() 方法

現在，讓我們學習如何更新我們的狀態。React 提供了一個特殊的方法 setState() 來達到此目的。這就像告訴 React："嘿，我想要改變應用程序記憶中的某些東西！"

這是我們如何使用 setState() 來增加我們計數器的範例：

class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}

incrementCount = () => {
this.setState({
count: this.state.count + 1
});
}

render() {
return (
<div>
<p>計數: {this.state.count}</p>
<button onClick={this.incrementCount}>增加</button>
</div>
);
}
}

在這個更新的例子中，我們添加了一個 incrementCount 方法，它使用 setState() 來增加計數器的數值。我們還添加了一個按鈕，當點擊時會調用這個方法。

使用函數的 setState()

現在，讓我們來看看有點意思的部分。有時候，你可能會根據前一個狀態來更新狀態。在這種情況下，使用物件形式的 setState()（如我們上面所做）可能不會總是按預期工作，這是因為 React 的異步性質。

這時，使用函數形式的 setState() 來救援！讓我們修改我們的 incrementCount 方法：

incrementCount = () => {
this.setState((prevState) => ({
count: prevState.count + 1
}));
}

在這個版本中，我們傳遞了一個函數給 setState()。這個函數接收前一個狀態作為參數，並返回一個表示新狀態的物件。這種方法確保我們始終在使用最新的狀態。

React 狀態管理 API 的特殊功能

React 的狀態管理 API 有一些特殊功能，使它強大且靈活。讓我們探索一些：

1. 部分更新

在更新時，你不需要包含所有的狀態屬性。React 將會將你提供的物件合並到當前狀態。

class UserProfile extends Component {
constructor(props) {
super(props);
this.state = {
name: 'John Doe',
age: 30,
location: 'New York'
};
}

updateAge = () => {
this.setState({
age: 31
});
// 這只會更新年齡，而姓名和位置保持不變
}

render() {
return (
<div>
<p>姓名: {this.state.name}</p>
<p>年齡: {this.state.age}</p>
<p>位置: {this.state.location}</p>
<button onClick={this.updateAge}>生日快樂！</button>
</div>
);
}
}

2. 狀態更新會被合並

當你調用 setState() 時，React 將合並你提供的物件到當前狀態。這意味著你可以在不同的地方多次調用 setState()，React 將會將所有的更改排隊並在單個更新中應用。

3. 狀態更新可能會是異步的

React 可能會為了性能原因將多個 setState() 調用批處理為單個更新。這意味著你不應該依賴 this.state 在調用 setState() 後立即反映新值。

以下是一個總結 React 狀態管理 API 的關鍵方法和功能的表格：

方法/功能	描述	範例
setState()	更新組件的狀態	this.setState({ count: 5 })
使用函數的 setState()	根據前一個狀態更新狀態	this.setState(prevState => ({ count: prevState.count + 1 }))
部分更新	只更新指定的屬性	this.setState({ age: 31 })
合並更新	多個 setState() 調用會被合並	this.setState({ name: 'Jane' }); this.setState({ age: 25 });
異步更新	狀態更新可能不會立即發生	使用回調或 componentDidUpdate() 來處理更新後的狀態

記住，掌握狀態管理就像學習擲骰子——它需要練習，但一旦你掌握了它，你就能做到令人驚奇的事情！持續嘗試這些概念，很快你就能輕鬆建立複雜的 React 應用程序。

祝你好運，未來的 React 大師們！??‍??‍?

Credits: Image by storyset