×
  • Web前端首页
  • React
  • React开发:一起探讨下关于React中setState同步或异步的基础知识点

React开发:一起探讨下关于React中setState同步或异步的基础知识点

作者:Terry2022.03.22来源:Web前端之家浏览:3395评论:1
关键词:React

React:关于React中setState同步或异步。

首先我们需要了解同步和异步的的含义,让我们往下看吧。

在 React 的类式组件中,我们可以使用setState方法更新state状态。但有些时候使用setState之后,得不到最新的数据。

其实 React 中setState本身执行的过程和代码是同步的,只是因为 React 框架本身的性能优化机制而导致的。

React 中合成事件和生命周期函数的调用顺序在更新之前,导致在合成事件和生命周期函数中无法立刻得到更新后的值,形成了异步的形式。

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

前面已经说到,在 React 的合成事件和生命周期函数中直接调用setState,会表现出异步的形式。

除此之外,如果越过 React 的性能优化机制,在原生事件、setTimeout中使用setState,就会表现出同步的形式。

表现为异步

React 合成事件

在 React 中直接使用的事件,如onChange、onClick等,都是由 React 封装后的事件,是合成事件,由 React 管理。那么由于性能优化的机制,在合成事件中直接调用setState,将表现出异步的形式。

如下代码,在合成事件onClick中,直接将state中的count加1,并在此之后打印count的值,结果第一次点击按钮时,会打印出0,而不是最新的1。

state = { count: 0 };
add = () => {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0
};
render() {
    return (
        <>
            <div>当前计数:{this.state.count}</div>
            <button onClick={this.add}>add</button>
        </>
    );
}

生命周期函数

生命周期函数也是由 React 所管理,在生命周期函数中直接调用setState,也会表现出异步的形式。

如下代码,在生命周期componentDidMount函数中,将state中的count加1,并在此之后打印count的值,结果打印出0,而不是最新的1。

state = { count: 0 };
componentDidMount() {
    this.setState({ count: this.state.count + 1 });
    console.log(this.state.count); // 0
}
render() {
    return (
        <>
            <div>当前计数:{this.state.count}</div>
            <button>add</button>
        </>
    );
}

表现为同步

原生事件

setState本身执行的过程是同步的,使用原生事件,绕过 React 的管理,将表现出同步的形式。

如下代码,通过id获取到 DOM 元素,用原生方法绑定点击事件。在点击事件中,将state中的count加1,并在此之后打印count的值,结果会打印最新的count值1。

state = { count: 0 };
componentDidMount() {
    const btn = document.getElementById('btn');
    btn.onclick = () => {
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count); // 1
    };
}
render() {
    return (
        <>
            <div>当前计数:{this.state.count}</div>
            <button id="btn">add</button>
        </>
    );
}

setTimeout

如下代码,在生命周期componentDidMount函数中写了一个定时器setTimeout,在setTimeout内部将state中的count加1,并在此之后打印count的值,结果会打印最新的count值1。

setState虽然也是写在生命周期componentDidMount函数中的,但并不是直接写在componentDidMount里,而是套了一层setTimeout。这样,setState就表现出同步的形式。

state = { count: 0 };
componentDidMount() {
    setTimeout(() => {
        this.setState({ count: this.state.count + 1 });
        console.log(this.state.count); // 1
    }, 0);
}
render() {
    return (
        <>
            <div>当前计数:{this.state.count}</div>
            <button>add</button>
        </>
    );
}

setState的第二个参数

无论setState的对象式写法,还是函数式写法,都有第二个参数,为可选的回调函数,这个回调函数在状态更新完毕、界面也更新后(render调用后)才被调用。

如下代码所示,setState虽然直接在componentDidMount中调用,但在setState的回调函数中打印count的值,得到了最新的值1,因为回调函数在状态更新完毕后才被调用,当然能得到最新的count了。

state = { count: 0 };
componentDidMount() {
    this.setState({ count: this.state.count + 1 }, () => {
        console.log(this.state.count); // 1
    });
}
render() {
    return (
        <>
            <div>当前计数:{this.state.count}</div>
            <button>add</button>
        </>
    );
}

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/react20220322a1.html

网友评论文明上网理性发言 已有1人参与

发表评论:

评论列表

  • bf2022 bf2022  发布于 2022-03-24 10:39:07   回复该评论
  • 关于react的知识,分析的很透彻,收藏了。