ReactJS - 狀態管理 API

正如我們之前學到的，React 元件透過元件的 this.state 來維護和暴露其狀態。React 提供了一個單一的 API 來維護元件中的狀態。該 API 是 this.setState()。它接受一個 JavaScript 物件或一個返回 JavaScript 物件的函式。

setState() 用於更新元件的狀態物件。這是透過排程對該元件狀態物件的更新來完成的。因此，當狀態改變時，此元件會透過重新渲染來響應。

setState API 的簽名如下：

this.setState( { ... object ...} );

一個設定/更新名稱的簡單示例如下：

this.setState( { name: 'John' } )

使用函式的 setState()

使用函式的 setState API 的簽名如下：

this.setState( (state, props) => 
   ... function returning JavaScript object ... );

這裡：

• state 指的是 React 元件的當前狀態

• props 指的是 React 元件的當前屬性。

React 建議使用函式形式的 setState API，因為它在非同步環境中可以正確工作。除了 lambda 函式，也可以使用普通的 JavaScript 函式。

this.setState( function(state, props) { 
   return ... JavaScript object ... 
}

示例

一個使用函式更新金額的簡單示例如下：

this.setState( (state, props) => ({ 
   amount: this.state.amount + this.props.additionaAmount 
})

React 狀態不應透過 this.state 成員變數直接修改，透過成員變數更新狀態不會重新渲染元件。

React 狀態 API 的特殊特性

React 狀態 API 的一個特殊特性是，它將與現有狀態合併，而不是替換狀態。例如，我們可以一次更新一個狀態欄位，而不是更新整個物件。此特性使開發人員能夠輕鬆處理狀態資料。

例如，讓我們假設內部狀態包含學生記錄。

{ 
   name: 'John', age: 16 
}

我們可以僅使用 setState API 更新年齡，它會自動將新物件與現有的學生記錄物件合併。

this.setState( (state, props) => ({ 
   age: 18 
});