在上兩個章節：初探 Component & Props 與 Component 內部原理 & 使用技巧中，我們已經介紹了 React component 與 props 了。React component 代表自定義元件的藍圖，而 props 則代表由上層 component 傳下來的參數。另外，React component 必須把 props 當作是 read-only 來對待，以減少 React component 的 side effect。
但資料不總是都是從上層傳下來的。有時 component 會需要記錄與管理自己的狀態（例如：時鐘的時間、Menu 開合與否...etc）。那在 React 中是否有方法可以讓 component 擁有自己的狀態呢？有的，這個方法就是 React component state。
State 代表 React component 的狀態，會是一個任意內容的 JavaScript object，常用於存放 component 自己需要的資料。
State 完全由創建的 component 維護 / 控制，且不會受其他的 component 改動，也因此，state 可視為被 component 封裝起來的資料。
當一個 component 需要擁有私有資料 / 狀態時就是使用 state 的好時機了。需要擁有私有資料 這句話可以分解為三個概念：
也就是說同時符合以上三個條件的情境就應考慮使用 state。
另外，因為 state 不需要被上層 component 需要，所以使用時也能獲得封裝 component 運作細節的好處。
以下舉一些常見的範例作為使用 state 的情境說明：
讀者可能很容易混淆 state 與 props ，但其實判別方法很簡單：
在使用情境上的區別是：
在釐清了 state 的定義與用處之後就來理解 state 的如何使用吧！
操作 state 分為兩個階段：
首先是 state 需要先被初始化。Component 需要先定義好初始的狀態，才能知道一開始的畫面為何，以及後續的狀態要基於什麼基底資料去更新。
當 state 需要被改變時，則要去呼叫特定的 API（setState） 才可更改 state，不可直接修改 state 內容。
最後，當 state 被更新後，React 就會重新觸發 component 的 render，產出對應的 React element，最終將畫面更新。
在舊版的 React 中，只有 class component 可以使用 state。但在 React 較的新版中，function component 新增了 Hooks 以支援 state 相關的功能。在本段落中，我們將針對 class component state 的語法介紹。Hooks 的部分將在往後的章節中詳細說明。
這次的章節中介紹了 State 的概念與用法。
State 代表 React component 的狀態，會是一個任意內容的 JavaScript object，常用於存放 component 自己需要的資料。此資料完全由創建的 component 維護 / 控制。
需要注意的，state 與 props 不同：
最後，我們還了解使用 state 會經過以下兩個階段：
在下一個章節中，將實際進入 state 語法使用的部分。
iThome鐵人賽
看影片追技術