React 19 的组件、状态与 Actions
理解 React 的声明式组件模型，以及表单提交、异步更新和 Actions 带来的新工作流。
先用白话理解
它到底是什么？
React 让你用 JavaScript 函数描述界面。状态发生变化时，React 会重新计算应该显示什么，再更新真正需要变化的 DOM。
学习判断
现在适不适合学？
满足左侧情况可以开始；如果更符合右侧情况，先补基础通常更省时间。
- 目标岗位或项目明确使用 React 生态
- 想理解函数组件、Hooks 和声明式 UI
- 需要学习 Next.js 或 React Native 的前置基础
- JavaScript 函数、闭包和数组方法还不熟练
- 当前主线是 Vue 且没有 React 项目需求
- 容易把框架语法和 JavaScript 语言本身混在一起
学习前提
开始之前先会这些
- 熟悉 JavaScript 函数、数组方法和解构
- 理解 HTML 表单和事件
- 了解不可变数据和模块化
核心概念
先抓住这三个重点
组件与 JSX
组件是返回界面描述的函数，JSX 让 HTML 风格结构与 JavaScript 表达式组合。
State 与 Hook
useState 保存组件状态，Hook 必须在组件顶层以固定顺序调用。
Actions
用于处理异步数据变更和表单提交，让 pending、错误和乐观状态更容易组织。
最小示例
最小 React 状态示例
不要直接修改 state；使用 setCount 告诉 React 状态需要更新。
React 19可以复制运行
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return <button onClick={() => setCount(count + 1)}>{count}</button>
}动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成，说明你已经开始掌握这项技术。
- 01
实现带搜索和筛选的产品列表
- 02
完成一个包含加载、错误和空状态的请求页面
- 03
使用表单 Action 或常规事件完成一次提交反馈流程
初学者常见误区
- 在条件语句中调用 Hook。
- 把可以直接计算的值重复存进 state。
- 依赖 useEffect 修补所有数据流，而不是先理清组件边界。
学完后的检查清单
- 能解释 props 与 state 的区别
- 会用 useState 处理基础交互
- 理解列表 key 和不可变更新
官方资料