当前位置：首页 > React

react组建是如何更新的

2026-01-25 08:04:29React

React 组件更新机制

React 组件的更新主要由状态（state）和属性（props）的变化触发。当这些数据发生变化时，React 会重新渲染组件以反映最新的数据状态。

触发更新的条件

State 变化：通过 setState 或 useState 更新状态时，组件会重新渲染。
Props 变化：父组件重新渲染导致传递给子组件的 props 发生变化。
Context 变化：组件订阅的 Context 值发生变化。
强制更新：使用 forceUpdate 方法（不推荐）。

更新过程

虚拟 DOM 对比（Reconciliation）
React 会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行对比（Diffing 算法），找出需要更新的部分。
渲染更新
仅对实际发生变化的 DOM 节点进行更新，而不是重新渲染整个组件树。

优化更新性能

shouldComponentUpdate
类组件中可以通过该方法控制是否进行更新，默认返回 true。
```
shouldComponentUpdate(nextProps, nextState) {
  return nextProps.value !== this.props.value;
}
```

React.memo
用于函数组件，避免不必要的渲染。

const MemoComponent = React.memo(function MyComponent(props) {
  return <div>{props.value}</div>;
});

useMemo 和 useCallback
缓存计算结果或函数，避免子组件因父组件渲染而重复执行。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

更新示例

State 触发更新

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Props 触发更新

react组建是如何更新的

function Parent() {
  const [value, setValue] = useState(0);
  return <Child value={value} />;
}

function Child({ value }) {
  return <div>{value}</div>;
}

React 的更新机制通过高效的 Diffing 算法和虚拟 DOM 技术，确保仅更新必要的部分，从而提升性能。

标签: react