React状态更新时如何阻止组件重复渲染？

首先要明确：React中状态更新触发组件重渲染是正常机制，你的Counter组件本身逻辑简单，这种重渲染对性能几乎没有影响。但如果是复杂组件或需要进一步优化，可通过以下方法减少不必要的重渲染：

1. 用useCallback缓存回调函数 #

每次组件重渲染时，你定义的handleIncrement、handleDecrement等函数都会被重新创建。如果这些函数需要传递给子组件，会导致子组件无意义重渲染。使用useCallback可以缓存函数，只有当依赖项变化时才重新生成函数。

修改后的代码：

import React, { useState, useCallback } from "react";

const Counter = () => {
  const [count, setCount] = useState(0);

  // 用useCallback缓存函数，依赖为空（函数式更新不依赖外部count）
  const handleIncrement = useCallback(() => {
    setCount(prev => prev + 1); // 改用函数式更新，避免闭包问题
  }, []);

  const handleDecrement = useCallback(() => {
    setCount(prev => prev - 1);
  }, []);

  const handleReset = useCallback(() => {
    setCount(0);
  }, []);

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
      <button onClick={handleReset}>Reset</button>
    </div>
  );
};

export default Counter;

2. 用React.memo优化组件（适用于子组件场景） #

如果这个Counter组件是作为其他组件的子组件使用，父组件重渲染时，即使Counter的props没有变化，它也会跟着重渲染。此时用React.memo包裹组件，React会对props做浅比较，只有props变化时才重渲染：

import React, { useState, useCallback } from "react";

// 用React.memo包裹组件
const Counter = React.memo(() => {
  // ... 组件内部逻辑不变
});

export default Counter;

3. 优先使用函数式状态更新 #

你原来的setCount(count + 1)依赖当前的count变量，在某些异步场景下可能会因为闭包问题导致状态更新错误。改用函数式更新setCount(prev => prev + 1)，直接基于上一次的状态值计算新状态，既避免闭包问题，也是React的最佳实践。

内容的提问来源于stack exchange，提问作者Jasmine Ariel