第一章：从 JSX 到稳定的组件身份

课程首页 / 学习路线

从一组商品数据开始，先用组件把数据变成 UI 描述，再让事件改变受控表单，最后带着已经学过的局部 state 和状态提升，观察列表重排与卸载。

具体前置

• 能解释 items.map(item => ...) 和 items.filter(item => ...) 的返回值；
• 能使用对象解构、函数参数和 export default；
• 知道原生表单的 input、button、submit 事件大致作用；
• 已创建 React 19 的 Vite 项目。本章所有 App.jsx 都可直接替换 src/App.jsx，不需要第三方包。

依赖顺序

1. JSX、组件与 props：先建立“组件是一次 UI 计算、props 是只读输入”的模型。
2. 事件与受控表单：首次使用 state，学习 Hook 调用位置，让共同父组件把同一份值传回输入和预览。
3. 列表、key 与状态身份：把有草稿的组件放进动态数组，观察重排时的身份与过滤后的状态所有者。

本章先建立“值由 React 保存，事件请求更新”的完整用法。快照、队列与批处理在第二章正式推导。练习答案沿用各篇链接中的编号，按正在阅读的文章进入对应答案即可。

可观察成果

• 改一份商品数据，卡片标题、库存提示与嵌套内容随 props 一起变化；
• 删除或倒序列表后，某行的编辑草稿仍跟随同一个商品 id，而不是跟随数组位置；
• 输入空名称时按钮被禁用；提交后记录使用刚才输入的值；刷新渲染不会把 DOM 值和 React state 分成两份真相。

答案页只在完成每篇练习后使用：第一章练习答案。