React 获取setState更新后的值

React setState默认是异步，但有时候是同步

如果setState是同步的，意味着每执行一次setState时，都重新vnodediff + dom修改，这对性能来说是极为不好的 如果setState是异步，则可以把一个同步代码中的多个setState合并成一次进行批量更新。

由React控制内的事件处理函数(onChange、onClick等合成事件)，以及生命周期函数调用setState时表现为异步 。

在setTimeout或者原生事件中，setState是同步的

一般情况:

import React, { useState } from 'react';
import { Button, Space } from 'antd';

export default () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    console.log(`更新后的值:`, count);
  };
  return (
    <Space>
      <span style={{ fontSize: 30, color: 'red' }}>{count}</span>
      <Button
        type="primary"
        onClick={() => {
          handleClick();
        }}
      >
        加1
      </Button>
    </Space>
  );
};

正确演示:

import React, { useState } from 'react';
import { Button, Space } from 'antd';

export default () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount((count) => {
      // 使用箭头函数 并将count 返回
      count++;
      console.log(`更新后的值:`, count);
      return count;
    });
  };
  return (
    <Space>
      <span style={{ fontSize: 30, color: 'red' }}>{count}</span>
      <Button
        type="primary"
        onClick={() => {
          handleClick();
        }}
      >
        加1
      </Button>
    </Space>
  );
};