iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 8
1
Modern Web

I Want To Know React系列 第 8

I Want To Know React - 初探 State

在上兩個章節:初探 Component & PropsComponent 內部原理 & 使用技巧中,我們已經介紹了 React component 與 props 了。React component 代表自定義元件的藍圖,而 props 則代表由上層 component 傳下來的參數。另外,React component 必須把 props 當作是 read-only 來對待,以減少 React component 的 side effect。

但資料不總是都是從上層傳下來的。有時 component 會需要記錄與管理自己的狀態(例如:時鐘的時間、Menu 開合與否...etc)。那在 React 中是否有方法可以讓 component 擁有自己的狀態呢?有的,這個方法就是 React component state。

React component state

State 代表 React component 的狀態,會是一個任意內容的 JavaScript object,常用於存放 component 自己需要的資料。

State 完全由創建的 component 維護 / 控制,且不會受其他的 component 改動,也因此,state 可視為被 component 封裝起來的資料。

何時需要使用 state

當一個 component 需要擁有私有資料 / 狀態時就是使用 state 的好時機了。需要擁有私有資料 這句話可以分解為三個概念:

  • Component 需要使用某些資料 / 狀態,且根據這些資料,畫面會有顯示不同的結果
  • 資料 / 狀態不會被上層的 component 所需要
  • 資料 / 狀態不需要由上層的 component 提供

也就是說同時符合以上三個條件的情境就應考慮使用 state。

另外,因為 state 不需要被上層 component 需要,所以使用時也能獲得封裝 component 運作細節的好處。

以下舉一些常見的範例作為使用 state 的情境說明:

  • 如果畫面上需要顯示一個小時鐘,且這個時間不需要被上層 component 所使用。則我們就可以將時間當作時鐘 component 的一個 state。
  • 如果畫面上有個 menu,這個 menu 可以依據使用者的點擊開啟 / 關閉,且這個開合不需要被上層 component 所使用/控制。則我們就可以將 menu 的開合狀態設為 component 的一個 State。
  • 如果畫面上需要根據後端 API 回應的結果顯示對應的資料在畫面上,且這個資料不需要被上層 component 所使用。則我們就可以將此 API 的結果設為 state。

State vs. Props

讀者可能很容易混淆 state 與 props ,但其實判別方法很簡單:

  • State 是 component 自己創建的資料,擁有 state 的 component 會自行管理 / 修改 state 的內容
  • Props 是上層 component 傳入的資料,接收 props 的 component 不可自行修改 props 的內容(Read-Only)

在使用情境上的區別是:

  • State 會用在 component 需要擁有私有資料 / 狀態,且該資料不被上層 component 需要的狀況下。常見的狀況像是時鐘的時間資料或是 menu 的開合狀態。
  • Props 是在需要上層提供資料時使用。常見的狀況像是通用性 UI 的資料,如按鈕的顏色、文字或是根據使用者權限不同,會顯示不同畫面的功能。

簡介 state 使用概念

在釐清了 state 的定義與用處之後就來理解 state 的如何使用吧!

操作 state 分為兩個階段:

  • 初始 state
  • 更新 state

首先是 state 需要先被初始化。Component 需要先定義好初始的狀態,才能知道一開始的畫面為何,以及後續的狀態要基於什麼基底資料去更新。

當 state 需要被改變時,則要去呼叫特定的 API(setState) 才可更改 state,不可直接修改 state 內容。

最後,當 state 被更新後,React 就會重新觸發 component 的 render,產出對應的 React element,最終將畫面更新。

Class component state vs. Function component state

在舊版的 React 中,只有 class component 可以使用 state。但在 React 較的新版中,function component 新增了 Hooks 以支援 state 相關的功能。在本段落中,我們將針對 class component state 的語法介紹。Hooks 的部分將在往後的章節中詳細說明。

小結

這次的章節中介紹了 State 的概念與用法。

State 代表 React component 的狀態,會是一個任意內容的 JavaScript object,常用於存放 component 自己需要的資料。此資料完全由創建的 component 維護 / 控制。

需要注意的,state 與 props 不同:

  • State 是 component 自己創建的資料,擁有 state 的 component 會自行管理 / 修改 state 的內容
  • Props 是上層 component 傳入的資料,接收 props 的 component 不可自行修改其內容

最後,我們還了解使用 state 會經過以下兩個階段:

  • 初始 state
  • 更新 state

下一個章節中,將實際進入 state 語法使用的部分。

參考資料


上一篇
I Want To Know React - Component 內部原理 & 使用技巧
下一篇
I Want To Know React - Class Component State 語法
系列文
I Want To Know React30

尚未有邦友留言

立即登入留言