React中如何正确判断useState声明的状态变量的相等性？

这是React函数组件典型的闭包陷阱问题：React的状态更新是异步批量生效的，调用setMyVar后不会立刻修改当前渲染周期内的myVar变量值，要等到组件触发下一次重渲染后才会拿到更新后的状态。你在runAnimation里修改状态后立刻调用someFunction，此时someFunction读取到的还是本次渲染的旧myVar值，所以判断逻辑不符合预期。

方案1：直接传递最新值作为参数 #

如果判断逻辑仅在runAnimation触发后执行，不需要跨场景共享，直接把计算后的新值作为参数传给后续函数即可，无需依赖组件状态做判断：

const runAnimation = async () => {
    const newMyVar = myVar + 1;
    setMyVar(newMyVar);
    someFunction(newMyVar);
}

const someFunction = async (currentMyVar) => {
    response = await controls.start();
    if (currentMyVar === 0) {
        doZero();
    } else if (currentMyVar === 1) {
        doOne();
    } else if (currentMyVar === 2) {
        setMyVar(currentMyVar - 1);
        doTwo();
    }
}

方案2：用useRef存储同步更新的状态副本 #

如果这个值需要在多个异步逻辑、多个渲染周期内读取，可以用useRef存储状态的同步副本，ref.current的修改是实时生效的，不受闭包限制：

const [myVar, setMyVar] = useState(0);
// 初始化ref和state值一致
const myVarRef = useRef(myVar);

useEffect(() => {
    // state每次更新后同步更新ref
    myVarRef.current = myVar;
    console.log(myVar);
}, [myVar])

const someFunction = async () => {
    response = await controls.start();
    // 直接读ref的current属性获取最新值
    if (myVarRef.current === 0) {
        doZero();
    } else if (myVarRef.current === 1) {
        doOne();
    } else if (myVarRef.current === 2) {
        setMyVar(prev => prev - 1);
        doTwo();
    }
}

方案3：把判断逻辑移入监听myVar的useEffect #

如果你的业务逻辑本身就是依赖myVar的最新值触发，可以直接把判断逻辑放到监听myVar变化的useEffect中，保证每次执行时取到的都是最新状态：

useEffect(() => {
    const runLogic = async () => {
        const response = await controls.start();
        if (myVar === 0) {
            doZero();
        } else if (myVar === 1) {
            doOne();
        } else if (myVar === 2) {
            setMyVar(prev => prev - 1);
            doTwo();
        }
    }
    runLogic();
}, [myVar])

修改状态时如果新值依赖旧值，建议使用函数式更新写法setMyVar(prev => prev + 1)，可以避免闭包读取到旧状态导致的计算错误。

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