React中的useState和setState的执行机制详解

更新时间：2024年03月13日 09:26:29 作者：夏安

这篇文章主要介绍了React中的useState和setState的执行机制,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

useState和setState的执行机制

useState 和 setState 在React开发过程中使用很频繁，但很多人都停留在简单的使用阶段，并没有正在了解它们的执行机制

例如：**它们是同步的还是异步的？**正因为没有理解它们，才致使开发过程中会碰到一些出乎意料的bug。

本文将带大家了解它们的特性。

它们是同步的还是异步的？

setState和 useState 只在合成事件如onClick等和钩子函数包括componentDidMount、useEffect等中是“异步”的，在原生事件和 setTimeout、Promise.resolve().then 中都是同步的。

这里的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立马拿到更新后的值，形式了所谓的“异步”。

批量更新优化

也是建立在“异步”（合成事件、钩子函数）之上的，在原生事件和setTimeout、Promise.resolve().then 中不会批量更新，在“异步”中如果对同一个值进行多次修改，批量更新策略会对其进行覆盖，取最后一次的执行,类似于Object.assin的机制，如果是同时修改多个不同的变量的值，比如改变了a的值又改变了b的值，在更新时会对其进行合并批量更新，结果只会产生一次render。

假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，当前组件就要被渲染n次，这对性能来说是很大的浪费。所以，React 为了性能原因，对调用多次setState方法合并为一个来执行。当执行setState的时候，state中的数据并不会马上更新。

光怎么说肯定不容易理解，我们来通过几个案例来说明吧。

同步和异步情况下，连续执行两个 useState 示例

function Component() {
  const [a, setA] = useState(1)
  const [b, setB] = useState('b')
  console.log('render')

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA((a) => a + 1)
      setB('bb')
    })
  }

  function handleClickWithoutPromise() {
    setA((a) => a + 1)
    setB('bb')
  }

  return (
    <Fragment>
      <button onClick={handleClickWithPromise}>
        {a}-{b} 异步执行
      </button>
      <button onClick={handleClickWithoutPromise}>
        {a}-{b} 同步执行
      </button>
    </Fragment>
  )
}

同步和异步情况下，连续执行两个 useState 示例

function Component() {
  const [a, setA] = useState(1)
  const [b, setB] = useState('b')
  console.log('render')

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA((a) => a + 1)
      setB('bb')
    })
  }

  function handleClickWithoutPromise() {
    setA((a) => a + 1)
    setB('bb')
  }

  return (
    <Fragment>
      <button onClick={handleClickWithPromise}>
        {a}-{b} 异步执行
      </button>
      <button onClick={handleClickWithoutPromise}>
        {a}-{b} 同步执行
      </button>
    </Fragment>
  )
}

当点击同步执行按钮时，只重新 render 了一次
当点击异步执行按钮时，render 了两次

同步和异步情况下，连续执行两次同一个 useState 示例

function Component() {
  const [a, setA] = useState(1)
  console.log('a', a)

  function handleClickWithPromise() {
    Promise.resolve().then(() => {
      setA((a) => a + 1)
      setA((a) => a + 1)
    })
  }

  function handleClickWithoutPromise() {
    setA((a) => a + 1)
    setA((a) => a + 1)
  }

  return (
    <Fragment>
      <button onClick={handleClickWithPromise}>{a} 异步执行</button>
      <button onClick={handleClickWithoutPromise}>{a} 同步执行</button>
    </Fragment>
  )
}

当点击同步执行按钮时，两次 setA 都执行，但合并 render 了一次，打印 3
当点击异步执行按钮时，两次 setA 各自 render 一次，分别打印 2，3

同步和异步情况下，连续执行两个 setState 示例

class Component extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
      b: 'b',
    }
  }

  handleClickWithPromise = () => {
    Promise.resolve().then(() => {
      this.setState({...this.state, a: 'aa'})
      this.setState({...this.state, b: 'bb'})
    })
  }

  handleClickWithoutPromise = () => {
    this.setState({...this.state, a: 'aa'})
    this.setState({...this.state, b: 'bb'})
  }

  render() {
    console.log('render')
    return (
      <Fragment>
        <button onClick={this.handleClickWithPromise}>异步执行</button>
        <button onClick={this.handleClickWithoutPromise}>同步执行</button>
      </Fragment>
    )
  }
}

当点击同步执行按钮时，只重新 render 了一次
当点击异步执行按钮时，render 了两次

同步和异步情况下，连续执行两次同一个 setState 示例

class Component extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: 1,
    }
  }

  handleClickWithPromise = () => {
    Promise.resolve().then(() => {
      this.setState({a: this.state.a + 1})
      this.setState({a: this.state.a + 1})
    })
  }

  handleClickWithoutPromise = () => {
    this.setState({a: this.state.a + 1})
    this.setState({a: this.state.a + 1})
  }

  render() {
    console.log('a', this.state.a)
    return (
      <Fragment>
        <button onClick={this.handleClickWithPromise}>异步执行</button>
        <button onClick={this.handleClickWithoutPromise}>同步执行</button>
      </Fragment>
    )
  }
}

当点击同步执行按钮时，两次 setState 合并，只执行了最后一次，打印 2
当点击异步执行按钮时，两次 setState 各自 render 一次，分别打印 2，3

至此，大家应该明白它们什么时候是同步，什么时候是异步了吧。

我们再来看下面这个栗子：

function App() {
  const [count, setCount] = useState(0);
  console.log('1：', count);
  return (
    <div>
      <p>App:You clicked {count} times</p>
      <button onClick={() => {
        setCount(count + 1);
        console.log('2：', count);
      }}>
        Click me
      </button>
    </div>
  )
}

点击一次按钮输出的是

1： 1

2： 0

那么问题来了，为什么在setCount之后输出的是2： 0而不是2： 1

因为function state 保存的是快照，class state 保存的是最新值。这么说可能还会不太理解，我们看看下面这栗子：

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0
    }
  }
  
  render() {
    const { count } = this.state;
    console.log(count);
    return (
      <div>
      <p>You clicked {count} times</p>
      <button onClick={() => {
        setTimeout(() => {
          this.setState({count: count + 1});
          console.log('this.state.count = ', this.state.count);
          console.log('count = ', count);
        }, 1000)
      }}>
        Click me
      </button>
    </div>
    )
  }
}

点击一次按钮输出的是

1

this.state.count = 1

count = 0

所以实际上this.state已经更新，只是因为setTimeout的闭包影响count保存的还是原先的值。

那么当我们快速的点击三次时又会发送什么呢？

你会发现输出结果是：

1
this.state.count = 1
count = 0
1
this.state.count = 1
count = 0
1
this.state.count = 1
count = 0

显示的是You clicked 1 times。同样也是因为setTimeout闭包的影响，三次this.setState({count: count + 1});

相当于三次this.setState({count: 0 + 1});，那么如果我们想按照正常情况加3该怎么办呢？

在class 组件里我们可以做如下修改：

this.setState({count: this.state.count + 1});

class 组件里面可以通过 this.state 引用到 count，所以每次 setTimeout 的时候都能通过引用拿到上一次的最新 count，所以点击多少次最后就加了多少。

在 function component 里面每次更新都是重新执行当前函数，也就是说 setTimeout 里面读取到的 count 是通过闭包获取的，而这个 count 实际上只是初始值，并不是上次执行完成后的最新值，所以最后只加了1次。

setState和setCount方法除了传入值外还可以传入一个返回值的函数，用这种方法我们就可以实现正常的情况了：

this.setState((preState) => ({
    ...preState, count: preState.count + 1
}));
// or
setCount((count) => count + 1);

或许你会想，如果模仿类组件里面的 this.state，我们用一个引用来保存 count 不就好了吗？

没错，这样是可以解决，只是这个引用该怎么写呢？

我在 state 里面设置一个对象好不好？就像下面这样：

const [state, setState] = useState({ count: 0 })

答案是不行，因为即使 state 是个对象，但每次更新的时候，要传一个新的引用进去，这样的引用依然是没有意义。

setState({ count: state.count + 1 })

想要解决这个问题，那就涉及到另一个新的 Hook 方法 —— useRef。

useRef 是一个对象，它拥有一个 current 属性，并且不管函数组件执行多少次，而 useRef 返回的对象永远都是原来那一个。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

React Native第三方平台分享的实例（Android，IOS双平台）
本篇文章主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
react?源码中位运算符的使用详解
这篇文章主要为大家详细介绍了react?位运算符，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
React中useEffect与生命周期钩子函数的对应关系说明
这篇文章主要介绍了React中useEffect与生命周期钩子函数的对应关系说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
react配置px转换rem的方法
这篇文章主要介绍了react配置px转换rem的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
ES6下React组件的写法示例代码
这篇文章主要给大家介绍了在ES6下React组件的写法，其中包括定义React组件、声明prop类型与默认prop、设置初始state、自动绑定，文中分别给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05
React如何利用Antd的Form组件实现表单功能详解
这篇文章主要给大家介绍了关于React如何利用Antd的Form组件实现表单功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-04-04
详解react-router4 异步加载路由两种方法
本篇文章主要介绍了详解react-router4 异步加载路由两种方法，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
无废话快速上手React路由开发
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧
2021-05-05
React Router V6更新内容详解
这篇文章主要为大家介绍了React Router V6更新内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
Router添加路由拦截方法讲解
在vue项目中使用vue-router做页面跳转时，路由的方式有两种，一种是静态路由，另一种是动态路由。而要实现对路由的控制需要使用vuex和router全局守卫进行判断拦截
2023-03-03