React useState与useEffect异常行为：为何输出2而非1？

这是React的状态批量更新和闭包特性共同作用的结果：

• React在同一事件循环内会批量处理状态更新，调用setFlag(true)后，flag变量不会立刻更新为true，当前执行上下文里的flag依然是初始的false。
• increment函数是组件初始渲染时创建的，它的闭包捕获了此时的flag值（false）。所以即使调用了setFlag(true)，第二次执行increment时，依然会使用闭包里的旧flag值，两次调用都会让count加1，最终得到2。

方案一：使用useRef存储实时的flag状态 #

useRef的.current属性是可变的，不会被闭包捕获固定值，能始终拿到最新的状态：

import { useEffect, useState, useRef } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);
  const flagRef = useRef(false);

  function increment() {
    setCount(prevState => {
      if (flagRef.current)
        return prevState;
      return prevState + 1;
    });
  }

  useEffect(function () {
    increment();
    setFlag(true);
    flagRef.current = true;
    increment();
  }, []);

  return (
    <div className="App">
      {count}
    </div>
  );
}

方案二：拆分useEffect逻辑，监听flag变化 #

通过拆分useEffect，让第二次increment在flag更新完成后执行：

import { useEffect, useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function increment() {
    setCount(prevState => {
      if (flag)
        return prevState;
      return prevState + 1;
    });
  }

  useEffect(function () {
    increment();
    setFlag(true);
  }, []);

  useEffect(function () {
    if (flag) {
      increment();
    }
  }, [flag]);

  return (
    <div className="App">
      {count}
    </div>
  );
}

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