ReactJS - 狀態管理

狀態管理是任何動態應用程式的重要且不可避免的功能之一。React 提供了一個簡單靈活的 API 來支援 React 元件中的狀態管理。在本章中，讓我們瞭解如何在 React 應用程式中維護狀態。

什麼是狀態？

狀態表示 React 元件在給定例項時的動態屬性的值。React 為每個元件提供了一個動態資料儲存。內部資料表示 React 元件的狀態，可以使用元件的 this.state 成員變數訪問。每當元件的狀態發生變化時，元件都會透過呼叫 render() 方法以及新狀態來重新渲染自身。

一個簡單的示例來更好地理解狀態管理是分析一個即時時鐘元件。時鐘元件的主要工作是在給定例項時顯示某個位置的日期和時間。由於當前時間每秒都會變化，因此時鐘元件應在其狀態中維護當前日期和時間。由於時鐘元件的狀態每秒都會發生變化，因此時鐘的 render() 方法將每秒被呼叫一次，並且 render() 方法將使用其當前狀態顯示當前時間。

狀態的簡單表示如下所示：

{ 
   date: '2020-10-10 10:10:10' 
}

讓我們在無狀態元件章節中建立一個新的 Clock 元件。

定義狀態

React 中的狀態可以與函式和類元件一起使用。要在元件中使用狀態，必須存在一個起點，即初始狀態。元件的這個初始狀態必須在元件類的建構函式中定義。以下是定義任何類的狀態的語法：

state = {attribute: "value"};

讓我們看一個帶有初始狀態的類元件的示例程式碼：

Class SampleClass extends React.Component
{
    constructor(props)
    {
        super(props);
        this.state = { name : "John Doe" };
    }
}

建立狀態物件

React 元件具有內建的狀態物件。狀態物件用於儲存屬於定義此狀態的元件的所有屬性值。當狀態物件發生變化時，元件會重新渲染。

讓我們看一個示例程式碼來演示如何在 React 中建立狀態物件。

Class BookClass extends React.Component
{
   constructor(props)
   {
      super(props);
      this.state = { name : "John Doe" };
   }
   render() {
      return (
      <div>
         <h1>Name of the Author</h1>
      </div>
      );
   }
}

要更好地理解狀態管理，請檢視以下章節。

列印頁面