setState()的说明笔记

最新推荐文章于 2024-05-18 09:00:51 发布

常威在打来福~

最新推荐文章于 2024-05-18 09:00:51 发布

阅读量259

点赞数 1

CC 4.0 BY-SA版权

分类专栏：暴走的react

本文链接：https://blog.csdn.net/weixin_41166682/article/details/108784881

暴走的react 专栏收录该内容

22 篇文章

订阅专栏

本文详细解析了React组件中setState方法的工作原理，包括其异步更新的特点和推荐的使用方式。强调了避免在setState之间产生依赖，并介绍了如何在状态更新后执行回调函数确保操作的正确顺序。此外，还探讨了如何通过传递回调函数来确保在页面重新渲染后执行特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// setState()的说明
  // 1.1更新数据
    // setState()是异步的
    // 注意：使用该语法时，后面的setState()不要依赖于前面的setState()
    // 可以多次调用setState(),只会触发一次重新渲染
  // 1.2推荐语法（如果有两个setState()方法，返回的结果还是一样的，互不干扰，
        // 用了这个语法后第一个setState()里面的会影响到第二个setState()）
    // 推荐：使用setState((state, props) => {})
    // 参数state:表示最新的state
    // 参数props: 表示最新的props
    // 注意：这种语法也是异步更新state的
    // this.setState((state, prios) => {
    //   return {
    //     count: state.count + 1
    //   }
    // })
  // 1.3第二个参数
    // 场景：在状态更新（页面完成重新渲染）后立即执行某个操作
    // 语法：setState(updater[, callback])
      // this.setState(
      //   (state, props) => {},
      //   () => {console.log('这个回调函数会在状态更新后立即执行')
      //        console.log('这里可以打印更改this.state的值')}
      // )