React.js单个按钮批量递增多个计数器状态的最优实现方案咨询

你要实现点击按钮同时递增两个计数器的需求，不需要额外引入复杂逻辑，React本身的批量更新机制已经做了性能优化，下面是两种常用实现方案：

方案1：同一回调中依次调用两个状态setter（最推荐，适配绝大多数场景） #

React 默认自带批量更新能力：

• React 18及以上版本：所有场景下的多个setState调用都会自动合并为一次组件重渲染，不管是在合成事件、定时器、Promise回调还是其他异步逻辑中
• React 17及更早版本：合成事件、生命周期函数内的多个setState调用会自动批量更新，仅触发一次重渲染

你只需要新增按钮，在它的onClick回调里依次执行两个setter即可，这里推荐用函数式更新写法避免闭包导致的状态陈旧问题：

function Lifecicle() {
  // 注意：你原代码里的setter命名有拼写错误，setConter1应为setCounter1，此处统一修正
  const [counter1, setCounter1] = useState(0);
  const [counter2, setCounter2] = useState(0);

  useEffect(() => {
    console.log("counter 1")
    return () => {

    }
  }, [counter1])
  useEffect(() => {
    console.log("counter 2")
    return () => {

    }
  }, [counter2])
  useEffect(() => {
    console.log("[]")
    return () => {
    }
  }, [])

  return (
    <div>
      <h1>Clicks c1: {counter1}</h1>
      <h1>Clicks c2: {counter2}</h1>
      <button onClick={() => setCounter1(prev => prev + 1)}>
        increment c1
      </button>
      <button onClick={() => setCounter2(prev => prev + 1)}>
        increment c2
      </button>
      {/* 新增同时更新的按钮 */}
      <button onClick={() => {
        setCounter1(prev => prev + 1)
        setCounter2(prev => prev + 1)
      }}>
        同时递增两个计数器
      </button>
    </div>
  )
}
export default Lifecicle;

方案2：合并为单一对象状态（适合关联度极高的状态场景） #

如果两个计数器的业务逻辑关联性极强，几乎都是同时更新，也可以把它们合并成一个状态对象，仅调用一次setter完成更新：

// 声明合并状态
const [counter, setCounter] = useState({ c1: 0, c2: 0 })

// 更新逻辑
<button onClick={() => {
  setCounter(prev => ({
    ...prev,
    c1: prev.c1 + 1,
    c2: prev.c2 + 1
  }))
}}>
  同时递增两个计数器
</button>

这种方案在所有React版本中都只会触发一次组件重渲染，缺点是如果两个状态后续需要独立更新的场景多，每次都要手动做对象合并，不如分开声明灵活。

注意事项 #

不需要手动调用unstable_batchedUpdates包裹更新逻辑，这个API是React18之前用于在异步回调中开启批量更新的，React18之后所有场景默认自动批量更新，已经完全不需要该API。

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