setState 的同步和异步执行

最新推荐文章于 2024-04-13 08:23:30 发布

ALKEN ABBY

最新推荐文章于 2024-04-13 08:23:30 发布

阅读量320

点赞数 1

分类专栏： react 开发中的实用方法和函数 javascript 文章标签： javascript react.js

本文链接：https://blog.csdn.net/qq_45803050/article/details/124695355

版权

javascript 同时被 3 个专栏收录

66 篇文章 0 订阅

订阅专栏

开发中的实用方法和函数

55 篇文章 0 订阅

订阅专栏

react

24 篇文章 1 订阅

订阅专栏

本文探讨了React中setState的同步和异步执行情况。在同步逻辑中，setState会导致异步更新状态和DOM；而在异步逻辑（如setTimeout内）中，setState则同步更新状态并同步更新DOM。通过示例代码展示了两种情况的使用区别。

摘要由CSDN通过智能技术生成

setState 的同步和异步执行

规则：

setState 处在同步的逻辑中，异步更新状态，异步更新真实 DOM

setState 处在异步的逻辑中，同步更新状态，同步更新真实DOM

什么叫处在异步逻辑中？比如说 setState 函数被包裹在 setTimeout 函数里面执行，这就是其中一种情况

代码实现：

import React, {Component} from 'react';
import BetterScroll from 'better-scroll'


class BetterScrollTest extends Component {
  state = {
    list: []
  }

  render() {
    return (
        <div>
          <button onClick={() => this.getData()}>click</button>
          <div className="wrapper" style={{height: '200px', backgroundColor: 'yellow', overflow: "hidden"}}>
            <ul className="content">
              {
                this.state.list.map((item, index) => {
                  return <li key={item}>{item}</li>
                })
              }
            </ul>
          </div>
        </div>
    );
  }


  getData = () => {
    let list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 21, 24];

    // 方法1：这是在同步状态下的 setState
    // this.setState({
    //   list: list
    // }, () => {
    //   new BetterScroll(".wrapper")
    // })


    // 方法2：这是在异步状态下的 setState
    setTimeout(()=>{
      this.setState({
        list:list
      })
      new BetterScroll(".wrapper")
    },0)

    

  }
}

export default BetterScrollTest;