React：先看懂一个会变化的页面

LEVEL 02 · REACT

这一章不要求你从空白开始写 React。我们只做一件更有用的事：沿着一个“发布留言”功能，读懂 AI 生成的页面为什么会变化，以及出错时该去哪里找。

先看最终功能

用户在输入框写下“今天学会了 Network”，点击发布后，新留言出现在列表顶部。

这一个功能里正好有 React 最常见的五件事：

1. MessageForm 和 MessageList 是组件，也就是页面积木。
2. 父组件用 props 把留言交给列表。
3. useState 记住输入内容、留言列表和加载状态。
4. useEffect 在页面第一次打开时读取旧留言。
5. 条件渲染决定现在显示“加载中”、报错，还是留言列表。

App
├── MessageForm    输入并发布留言
└── MessageList    显示留言列表
    └── MessageCard  一条留言

你不需要先背语法。先知道数据放在哪里、谁把它交给谁、谁能改变它。

01组件怎样从页面找到负责它的文件。02props数据怎样从父组件流到子组件。03useState输入框和列表为什么能够变化。04useEffect页面何时读取后端数据，以及为什么会重复请求。05条件和列表渲染加载、报错、空页面和数据列表怎样切换。

这一章学完以后

当 AI 给你一个很长的 .tsx 文件时，你不再从第一行硬读到最后一行。你会先找：

页面由哪些组件组成？
数据来自 props 还是 state？
点击按钮调用哪个函数？
函数有没有发 fetch 请求？
页面现在为什么显示这个分支？

看到 React 页面没有更新，第一反应应该是重写整个组件吗？

答案：不是。先找页面显示依赖哪个 state，再确认对应的更新函数有没有被执行。