React
你可能会说
老听人说做网页要用 React，它到底比直接写页面强在哪？
React 是把网页拆成可复用部分，并让画面跟随数据变化的工具。例如商品加入购物车后，右上角数量从 2 变成 3，React 会根据新数量更新这处画面。商品是否真的保存成功、刷新后还在不在，仍取决于保存数据的服务。
先知道
也常被叫作React.js
点加号后，为什么只更新这块？
Counter.jsx
1
const [count, setCount] = useState(0)2
<button onClick={() => setCount(count + 1)}>3
已加入 {count} 件4
</button>帆布包¥ 79
状态里的 count 现在是 0
按钮读着 count；count 改了，React 就把这块按钮文字换成新值。
状态变化怎样带来局部更新
组件是一小块可传参的界面：按钮、卡片都可以封装为独立组件。组件通过外部传入的参数（Props，如标题、价格）决定展示内容，从而能在不同页面复用同一套界面结构。
状态记住当前值：点击把计数从 0 改成 1；状态就是这块界面此刻要显示的值。
React 按新值计算界面：React 重新计算相关组件的输出，渲染器再按需更新实际 DOM，所以按钮文字变了。
你可以这样告诉 AI Agent
请让商品卡、顶部徽标和结算区从同一份购物车状态读取数量，不要逐个修改 DOM。更新后同步三个位置；另行说明持久化方案，并用刷新页面验证数据是否真正保存。
接下来学什么
延伸阅读 · 权威出处
快速练习