[JavaScript知识库] setState 的同步和异步执行

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> setState 的同步和异步执行 -> 正文阅读

[JavaScript知识库]setState 的同步和异步执行

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;