当前位置：首页 > React

react如何区分组件原理

2026-01-25 13:29:02React

React 组件区分原理

React 区分组件的核心原理基于组件的类型（type）和键（key）。React 使用虚拟 DOM（Virtual DOM）的差异算法（Reconciliation）来高效更新 UI。

组件类型（Type）

React 通过组件的类型来区分不同的组件。类型可以是函数组件、类组件或原生 DOM 元素（如 div、span）。如果类型不同，React 会直接卸载旧组件并挂载新组件。

react如何区分组件原理

// 类型不同，React 会卸载旧组件并挂载新组件
<div>Hello</div>  // 类型是 'div'
<CustomComponent /> // 类型是 CustomComponent

键（Key）

键（key）是 React 用于标识同级元素的唯一标识符。当列表中的元素顺序可能变化时，键帮助 React 识别哪些元素需要更新、移动或删除。如果键不同，即使组件类型相同，React 也会视为不同的组件。

react如何区分组件原理

// 键不同，React 会重新创建组件
<ul>
  <li key="1">Item 1</li>
  <li key="2">Item 2</li>
</ul>

// 键变化后，React 会重新创建组件
<ul>
  <li key="3">Item 3</li>
  <li key="1">Item 1</li>
</ul>

虚拟 DOM 差异算法

React 通过虚拟 DOM 的差异算法（Diffing Algorithm）高效更新 UI。算法遵循以下规则：

同级比较：React 只会比较同一层级的节点，不会跨层级比较。
类型不同则替换：如果节点类型不同，React 会直接替换整个子树。
键的作用：在列表渲染中，键帮助 React 识别元素的唯一性，避免不必要的重新渲染。

// 示例：列表渲染时使用键
const items = [{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

函数组件与类组件的区分

React 通过组件的类型区分函数组件和类组件。函数组件是普通 JavaScript 函数，类组件是继承自 React.Component 的类。React 会检查组件的原型链或 $$typeof 属性来区分它们。

// 函数组件
function FunctionalComponent() {
  return <div>Functional</div>;
}

// 类组件
class ClassComponent extends React.Component {
  render() {
    return <div>Class</div>;
  }
}