为什么我的React组件中的变量i未按照预期实现递增更新功能？

你代码里的变量i存在的核心问题是它是函数组件内部的普通局部变量，会在组件每次重新渲染时被重置为初始值0，具体逻辑如下：

• 组件首次渲染时，i被赋值为0，状态number初始值也为0，页面展示数值0
• 点击+号触发increment：i自增为1，调用setNumber(1)触发组件重新渲染
• 组件重新渲染时，整段Compteur函数代码重新执行，let i = 0 会再次运行，i被重置回0
• 后续每次点击触发状态更新后，i都会被重置为0，所以每次自增/自减后都只会得到1或-1，无法完成连续的数值累加/累减

而你改为setNumber(number + 1)后功能正常，是因为number是通过useState声明的响应式状态：React会在内部持久化存储这个状态值，不会随着组件重新渲染被重置，每次渲染时拿到的都是上一次更新后的最新值，所以可以正确完成连续计数。

如果你确实需要在组件内声明跨渲染保留值的变量，可以使用useRef Hook，示例如下：

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

const Compteur = () => {
  // useRef的current值会跨渲染持久化，不会被重置
  const i = useRef(0);
  const [number, setNumber] = useState(0);

  const increment = () => {
    i.current++;
    setNumber(i.current);
  };

  const decrement = () => {
    i.current--;
    setNumber(i.current);
  };

  return (
    <div>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={decrement}>
        -
      </button>
      <p>Number : {number}</p>
    </div>
  );
};

export default Compteur;

不过这个计数场景直接使用useState状态更新就足够，不需要额外定义变量存储计数。

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