React 中的useState 和 setState 的执行机制

简介: React 中的useState 和 setState 的执行机制

React 中的useState 和 setState 的执行机制

useStatesetStateReact开发过程中 使用很频繁,但很多人都停留在简单的使用阶段,并没有正在了解它们的执行机制,例如:「它们是同步的还是异步的?」 正因为没有理解它们,才致使开发过程中会碰到一些出乎意料的bug。本文将带大家了解它们的特性。

「它们是同步的还是异步的?」

setStateuseState 只在「合成事件」onClick等和「钩子函数」包括componentDidMountuseEffect等中是“异步”的,在原生事件和 setTimeoutPromise.resolve().then 中都是同步的。

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

「批量更新优化」也是建立在“异步”(合成事件、钩子函数)之上的,在原生事件和setTimeoutPromise.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次。

setStatesetCount方法除了传入值外还可以传入一个返回值的函数,用这种方法我们就可以实现正常的情况了:

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 方法 —— useRefuseRef 是一个对象,它拥有一个 current 属性,并且不管函数组件执行多少次,而 useRef 返回的对象永远都是原来那一个。

「参考」

  • React useState和setState到底是同步还是异步呢?- 掘金 (juejin.cn)


相关文章
|
3天前
|
存储 前端开发 安全
|
10天前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
17 1
|
10天前
|
前端开发
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
11 0
|
10天前
|
前端开发 JavaScript 算法
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
react【框架原理详解】JSX 的本质、SyntheticEvent 合成事件机制、组件渲染过程、组件更新过程
14 0
|
10天前
react18【系列实用教程】useReducer —— 升级版的 useState (2024最新版)
react18【系列实用教程】useReducer —— 升级版的 useState (2024最新版)
9 0
|
10天前
|
前端开发
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
react18【系列实用教程】useContext —— Context 机制实现越层组件传值 (2024最新版)
14 0
|
10天前
|
前端开发 JavaScript
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
react18【系列实用教程】useState —— 声明响应式变量(2024最新版)含useState 的异步更新机制,更新的合并,函数传参获取更新值,不同版本异步更新差异,更新对象和数组
14 0
|
1月前
|
前端开发
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
前端React篇之React setState 调用的原理、React setState 调用之后发生了什么?是同步还是异步?
|
1月前
|
人工智能 监控 前端开发
基于ReAct机制的AI Agent
当前,在各个大厂纷纷卷LLM的情况下,各自都借助自己的LLM推出了自己的AI Agent,比如字节的Coze,百度的千帆等,还有开源的Dify。你是否想知道其中的原理?是否想过自己如何实现一套AI Agent?当然,借助LangChain就可以。
|
2月前
|
前端开发 调度 开发者
React的事件处理机制
【5月更文挑战第29天】React的事件处理机制
27 2