我今天学到的关于 React 渲染的内容

Source: Dev.to

React 的渲染过程（快速回顾）

每当 state 或 props 变化时，React 会重新渲染组件。这并 不 意味着浏览器的 DOM 会立即更新。相反，React 会：

• 重新执行组件函数
• 创建一个新的虚拟 DOM 树
• 将其与之前的树进行比较
• 只更新实际改变的真实 DOM 部分

这个比较步骤称为 diffing（差异比较）。

Diffing 的工作原理

React 使用调和算法（reconciliation algorithm）高效地比较旧的和新的虚拟 DOM 树。为了让这个过程保持快速，React 依循两个核心假设。

规则 1：不同的元素类型会产生不同的树

如果元素类型发生变化，React 会假设整个子树都已改变。
例如，如果一个 <div> 变成了 <span>，React 不会尝试比较它们的子节点；它会移除旧的子树并从头构建一个新树。此快捷方式避免了昂贵的深度比较。

规则 2：具有相同稳定 key 的元素在不同渲染之间是相同的

在渲染列表时，React 依赖 key 属性来标识元素。

items.map(item => (
  
))

稳定的 key 让 React 能够正确检测：

• 哪些项目发生了变化
• 哪些保持不变
• 哪些被添加或删除

如果缺少合适的 key，React 可能会按索引匹配元素，这会导致更新错误和状态丢失。

为什么 key 属性很重要

key 属性为 React 提供了一种可靠的方式来跨渲染跟踪元素。

• 相同的 key → 相同的组件实例
• 不同的 key → 新的组件实例

当 key 缺失或不稳定时，React 会发出警告，因为它们对正确的 diffing 和可预测的行为至关重要，尤其是在列表中。

结语

理解这些规则会让 React 的行为变得更加可预测。重新渲染并不是需要避免的——它是 React 高效工作的一部分。使用稳定的 key 并了解 diffing 原理，有助于编写行为正确且易于扩展的组件。