11、构建 React 工作流：状态管理与 API 交互

构建 React 工作流：状态管理与 API 交互

1. 理解 React 中的状态

状态可以被看作是在任何给定时刻代表用户界面（UI）的一组数据。在汽车销售应用场景中，状态可以是一组选定的汽车，用户可能想要对这些汽车进行咨询，并通过标记星星或关注图标来保存它们以备后续查看。表单的状态会根据输入类型的不同而有所变化，例如文本框可以为空（等待填充）或已填充，复选框可以被选中或未选中，下拉菜单可以被选择或未选择。

在 React 中，状态是一个非常重要的主题，甚至有专门的书籍和会议来探讨它。在早期，创建 React 组件需要扩展 JavaScript 类，并通过一系列 this 调用来管理状态，这使得状态管理变得冗长和繁琐。而 React Hooks 的引入，为我们提供了从简单到复杂的多种处理状态的机制。

2. 使用 useState 创建有状态变量

useState 是最基本的 Hook 之一，它允许我们在组件中维护特定的状态。下面通过一个设置预算限制的示例来详细说明：

import Header from "./components/Header";
import Card from "./components/Card";
import {useState} from 'react';

function App() {
    let data = [];
    let [budget, setBudget] = useState(4000);

    const onChangeHandler =