当前位置：首页 > React

react如何重绘

2026-02-26 09:29:54React

React 重绘机制

React 使用虚拟 DOM（Virtual DOM）和协调（Reconciliation）机制来优化重绘性能。当组件的状态或属性发生变化时，React 会自动触发重绘流程。

触发重绘的方法

状态更新 通过 useState 或 useReducer Hook 更新状态会触发组件重绘。状态变化后，React 会比较新旧虚拟 DOM，仅更新实际变化的部分。

const [count, setCount] = useState(0);
setCount(count + 1); // 触发重绘

属性变化 父组件传递的属性（props）变化时，子组件会重新渲染。可以通过 React.memo 对组件进行记忆化处理，避免不必要的重绘。

const MemoizedComponent = React.memo(MyComponent);

强制重绘 在极少数情况下需要强制重绘，可以通过改变组件的 key 属性实现。改变 key 会使 React 销毁并重新创建组件实例。

react如何重绘

<MyComponent key={someKey} />

性能优化策略

使用 useMemo 和 useCallback 缓存计算结果和函数引用，避免不必要的重绘。

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

避免内联对象和函数 内联对象和函数会导致每次渲染都创建新的引用，可能触发子组件不必要的重绘。

react如何重绘

// 不推荐
<ChildComponent style={{ color: 'red' }} onClick={() => {}} />

// 推荐
const styles = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => {}, []);
<ChildComponent style={styles} onClick={handleClick} />

使用 React.memo 优化组件 对于纯函数组件，使用 React.memo 可以避免在 props 未变化时重绘。

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

调试重绘问题

使用 React DevTools React Developer Tools 可以高亮显示组件重绘情况，帮助识别性能问题。

使用 useWhyDidYouUpdate Hook 自定义 Hook 可以检测组件重绘的原因。

function useWhyDidYouUpdate(name, props) {
  const previousProps = useRef();
  useEffect(() => {
    if (previousProps.current) {
      const allKeys = Object.keys({ ...previousProps.current, ...props });
      const changesObj = {};
      allKeys.forEach(key => {
        if (previousProps.current[key] !== props[key]) {
          changesObj[key] = {
            from: previousProps.current[key],
            to: props[key]
          };
        }
      });
      if (Object.keys(changesObj).length) {
        console.log('[why-did-you-update]', name, changesObj);
      }
    }
    previousProps.current = props;
  });
}

标签: react