向应用程序添加状态

React 通过几种方法来管理状态。我们将重点讨论其中的一种主要方法，即“React 挂钩”。

挂钩是一种可以让你了解 React 内部工作原理的机制。当 React 中发生更改时，可使用挂钩来运行代码。也可用其在 React 中注册某些内容，如状态。例如，使用 useState 挂钩创建状态时，我们将获取状态对象和用于更新挂钩值的更新函数。

场景

许多食谱使用的一种常见技术是"就地不当"，这来自法语"就位"。食谱确保所有项在开始制作之前已准备就绪。

在我们的食谱应用程序中，我们希望让用户可以点击原料，将其标记为“已准备就绪”。首先，我们将创建状态并将显示信息传递给组件。接下来，我们将探讨如何处理事件。

任何 JavaScript 对象或数据类型都可以在 React 中注册为有状态。用于注册对象的函数为 useState。 useState 函数可指定初始值。它将返回新创建的有状态对象，以及可用于更新值的另一个函数。

注意

在 React 中，状态是不可变的，这意味着不能对其进行更改。若要修改有状态对象的值，请将其替换为包含相应值的新实例。 useState 返回的函数将管理此过程。

在 VS Code Explorer 中，展开 src 文件夹，然后打开 App.jsx 文件。注意现有的 initialRecipe 对象。我们会将此对象用作有状态 recipe 的默认值。
通过 useState 创建 recipe 状态对象和 setRecipe 函数。为此，请将以下代码添加到显示 TODO: Create recipe state 的行之后。
```
const [ recipe, setRecipe ] = useState(initialRecipe);
```
在此代码中，recipe 是有状态对象。 setRecipe 函数将用于将 recipe 替换为任何新版本。
我们可以使用 recipe 将属性传递到组件。在下面的代码中，RecipeTitle 组件将用于显示标题和反馈。在显示 TODO: Pass recipe metadata to RecipeTitle 的注释之后添加以下代码，从而将 title 和 feedback 值传递到 RecipeTitle 中。
```
<RecipeTitle title={recipe.title} feedback={recipe.feedback} />
```
打开 RecipeTitle.jsx 文件。请注意显示 title 和 feedback 属性的现有组件。