关于react.js:React-setStateuseState同步异步

React setState、useState 到底是同步的，还是异步的？

setState 语法

用法 1：

this.setState({//  数据更新})

用法 2：

this.setState((state, props) => {
  // 以后组件的 state
  // 父级的 state
}, () => {// 数据更新之后})

useState 语法

用法 1：

const [num, setNum] = useState(0);
...
setNum(1);

用法 2：

const [num, setNum] = useState(0);
...
setNum(() => {// 数据操作});

setState 是同步还是异步？

看一下上面的代码：

import React from 'react';
import {Button} from 'antd-mobile';

export default class App extends React.Component {constructor(props) {super(props);
    this.state = {count: 0}
  }

  onButtonClick() {setTimeout(() => {
      this.setState({count: 1})
      console.log('count00000', this.state.count);
    })

    console.log('count111111', this.state.count);
    setTimeout(() => {console.log('count222222', this.state.count);
    })
  }

  render() {
    return (
      <div>
        <Button onClick={this.onButtonClick.bind(this)}> 点击 </Button>
        <div>
          这个数字就是啊哈哈哈：{this.state.count}
        </div>
      </div>
    )
  }
}

打印后果：

setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。

合成事件：就是 react 在组件中的 onClick 等都是属于它自定义的合成事件。
原生事件：比方通过 addeventListener 增加的，dom 中的原生事件。

原生事件举例：

state = {count:0};
componentDidMount() {document.body.addEventListener('click', this.changeVal, false);
}
changeVal = () => {
    this.setState({number: 1})
    console.log(this.state.count)
}

useState 是同步还是异步？

看一下上面代码：

import React, {useState} from 'react';
import {Button} from 'antd-mobile';
import './index.scss';

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

  const onButtonClick = () => {setTimeout(() => {setCount(1);
      console.log('count0000', count)
    })

    console.log('count111', count)
    setTimeout(() => {console.log('count222', count)
    })
  }

  return (
    <div className="page-hospital-container">
      <Button onClick={onButtonClick}> 点击 </Button>
      <div> 这个数字就是：{count}</div>
    </div>
  );
};

export default HospitalInfo;

而后，咱们发现都没有获取到最新值，阐明 useState 是异步的！

那如何获取最新值呢？

const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  const onButtonClick = () => {setTimeout(() => {setCount(1);
      console.log('count0000', count)
    })

    console.log('count--Ref11', countRef)


    console.log('count111', count)
    setTimeout(() => {console.log('count222', count)
      console.log('count--Ref22', countRef)
    })
  }

看一下后果：

咱们发现在 Hooks 最近中如果想要获取到最新值，须要在异步 +Ref 的形式能力获取到！

个人见解，有什么不对的中央，欢送大神评论区留言😄