理解渲染触发

理解渲染触发

React 的页面是状态的结果。状态变化后组件会重新执行，生成新的 UI。

适用场景

• 计数器
• 条件渲染
• 列表更新
• 接口数据更新

技术点总览

分批介绍

state 变化触发渲染

setState 后组件会根据新状态重新计算界面。

1function Counter() {
2  const [count, setCount] = useState(0)
3  return <button onClick={() => setCount(count + 1)}>{count}</button>
4}

函数式更新

新状态依赖旧状态时，推荐使用函数式更新。

1setCount((prevCount) => prevCount + 1)

key 影响列表复用

稳定的 key 能帮助 React 正确复用列表项。

1{list.map((item) => (
2  <ArticleCard key={item.id} article={item} />
3))}

使用建议

• 先把数据来源、状态归属和交互入口写清楚，再考虑抽象。
• 示例代码只保留核心写法，真实业务里还要补充 loading、error、empty 等状态。
• 如果一种写法让代码更绕，优先回到更直观、更容易维护的实现方式。

小结

理解渲染触发 的重点不是记住某个 API，而是理解它解决的问题、适合的场景以及和其它技术点之间的关系。把每个小知识点拆开看，再组合到真实业务里，代码会更有规律，也更容易维护。