在應用程式中新增狀態

React 以數種方式管理狀態。我們會將焦點放在其中一種主要方式，也就是「React 勾點」。

「勾點」是一種機制，可讓您存取 React 的內部運作。當 React 中有某些變更時，您可以使用勾點來執行程式碼。或用來來註冊有回應的內容，例如狀態。例如，使用 useState 勾點來建立狀態時，我們會取得狀態物件和更新器函式來更新勾點值。

案例

一種許多廚師常用的技巧是使用 mise en place，也就是法文「各就各位」。廚師需確保所有材料都已備妥，然後才能開始烹飪。

在食譜應用程式中，我們想要允許使用者點選食材，以標示為備妥。我們將從建立狀態並將顯示資訊傳遞給元件開始。在下一個單元中，我們將探討如何處理事件。

任何 JavaScript 物件或資料類型都可在 React 中註冊為具狀態。用來註冊物件的函式是 useState。 useState 函式會指定初始值。這個函式會傳回新建立的具狀態物件，以及可用來更新該值的另一個函式。

注意

在 React 中，狀態是「不可變的」，表示無法變更。若要修改具狀態物件的值，請以包含適當值的新執行個體取代。由 useState 所傳回的函式會管理此流程。

在 VS Code [總管] 中，展開 [src] 資料夾，然後開啟 App.jsx 檔案。注意現有的 initialRecipe 物件。我們會使用此物件作為具狀態 recipe 的預設值。
從 useState 建立 recipe 狀態物件和 setRecipe 函式。若要這麼做，在讀取的行之下，新增下列程式碼：TODO: Create recipe state。
```
const [ recipe, setRecipe ] = useState(initialRecipe);
```
在此程式碼中，recipe 是具狀態物件。 setRecipe 函式會以任何新版本取代 recipe。
我們可以使用 recipe 將 props 傳遞至元件。在下列程式碼中，RecipeTitle 元件將用來顯示標題和意見反應。將 title 和 feedback 值傳遞至 RecipeTitle，方法是在讀取的註解下，新增下列程式碼 TODO: Pass recipe metadata to RecipeTitle。
```
<RecipeTitle title={recipe.title} feedback={recipe.feedback} />
```
開啟 RecipeTitle.jsx 檔案。請注意，顯示 title 和 feedback props 的現有元件。