12、React开发工作流与认证授权：从基础到实践

React开发工作流与认证授权：从基础到实践

1. React工作流基础

React组件本质上是将状态转换为用户界面的函数。它接收props作为参数，可被视为负责组件行为的可更新数据结构，其输出是JSX元素。React Hooks是功能性构造，能让开发者深入组件的生命周期并改变其状态。其中， useState 和 useEffect 是理解React最基础的两个Hooks，在即将到来的React 19版本中仍会保留，而 useMemo 、 useCallback 等则会逐渐被弃用。

1.1 使用 useState 创建有状态变量

useState Hook允许在组件中维护特定状态。例如，在单页应用（SPA）中，可根据用户指定的预算筛选出价格合适的汽车。以下是具体操作步骤：
1. 替换 App.jsx 文件内容 ：

import { useState } from "react";
import Card from "./components/Card";
export default function App() {
    const data = [
        { id: 1, name: "Fiat", year: 2023, model: "Panda", price: 12000 },
        { id: 2, name: