React:传入set函数中的函数参数会立刻执行吗？

Question

React:传入set函数中的函数参数会立刻执行吗？
下面这段代码中console.log会打印[1, 2, 3, 4, 5, 3]，也就说它打印的修改后的值。
但是在我理解中传入的这个函数参数应该不是立刻执行的吧。

• 这里的console.log会不会异步打印呢?
• 如果是的话，哪些情况下会异步打印，有没有官方说明?

function App() {
  const [nums, setNums] = useState({
    nums: [1, 2, 3, 4, 5],
  });
  function handleClick() {
    setNums((pre) => {
      pre.nums.push(3);
      return pre;
    });
    console.log('after setNums:', nums);
  }
  return <button onClick={handleClick}>1</button>;
}

stackblitiz

Answer 1

因为setNums状态更新是异步的，处理完打印出来是更新前的值，想看到更新后的用useEffect监听这个值的变化就行。

function App() {
  const [nums, setNums] = useState([1, 2, 3, 4, 5]);

  useEffect(() => {
    console.log('Nums updated:', nums);
  }, [nums]);

  function handleClick() {
    setNums(prevNums => {
      
      return [...prevNums, 3];
    });
  }

  return <button onClick={handleClick}>Add 3</button>;
}

Answer 2

你上面的代码相当于 class 中的 this.state.nums=xxx 这样赋值了，你可以在App内打印一下 console.log('nums:', nums); 可以看到根本没有重新打印

你把代码改成下面这样 ， 就会是你期待的异步效果了
function App() {
  const [nums, setNums] = useState({
    nums: [1, 2, 3, 4, 5],
  });
  const handleClick = useCallback(() => {
    setNums((pre) => {
      const temp = JSON.parse(JSON.stringify(pre));
      temp.nums.push(3);
      return temp;
    });
    console.log('after setNums:', nums);
  }, [nums]);

  console.log('nums:', nums);

  return <button onClick={handleClick}>1</button>;
}

export default App;