React中的setState执行机制

我这里今天下雨了,温度一下从昨天的22度降到今天的6度,家里和学校已经下了几天雪了,还是想去玩一下的,哈哈,只能在图片里看到了。

一. setState是什么

它是React组件中用于更新状态的方法。它是类组件中的方法,用于更新组件的状态并重新渲染组件。
setState 方法接受一个对象或一个函数作为参数。当传递一个对象时,它会将该对象合并到当前的状态对象中,并触发组件的重新渲染。当传递一个函数时,该函数会接收先前的状态作为参数,并返回一个新的状态对象,然后 setState 方法会将返回的状态对象合并到当前的状态中。
简单例子

javascript 复制代码
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.incrementCount()}>Increment</button>
      </div>
    );
  }
}

这里有个count属性。当用户点击按钮时,调用incrementCount方法,该方法使用setState更新count属性的值,触发组件的重新渲染,并在页面上显示更新后的计数值。

二、更新类型

在使用setState更新数据的时候,setState的更新类型分成:

  • 异步更新
  • 同步更新

异步更新

当调用setState方法时,React会将更新请求放入队列中,并在合适的时候进行批处理,然后批量更新组件的状态。这意味着在调用setState后,不会立即改变组件的状态值,而是在稍后的时间点进行更新。

异步更新的好处是可以提高性能,避免不必要的重复渲染。当多次调用setState时,React会将这些更新合并为一个更新,只触发一次重新渲染。

javascript 复制代码
changeAge() {
  this.setState({
    age: 22
  })
  console.log(this.state.age); // 不会是22,是之前的一个值
}

这并不能看到最新的state的结果

javascript 复制代码
changeText() {
  this.setState({
    age: 22
  }, () => {
    console.log(this.state.age); // 22
  });
}

同步更新

在某些情况下,需要立即获取最新的状态值,而不是等待异步更新。为了实现同步更新,可以使用回调函数形式的setState

回调函数形式的setState接收一个函数作为参数,该函数可以接受先前的状态和属性作为参数,并返回一个新的状态对象。React会立即执行该函数,并使用返回的状态对象进行更新。

javascript 复制代码
componentDidMount() {
  const btn = document.getElementById("btn");
  btn.addEventListener('click', () => {
    this.setState({
      mes: "你好啊,白鲸"
    });
    console.log(this.state.mes); // 你好啊,白鲸
  })
}

小结

  • 在组件生命周期或React合成事件 中,setState异步
  • setTimeout或者原生dom事件 中,setState同步

State的赋值

三种情况

1.通常情况下的赋值

使用的类型有:数字,字符串,布尔值,null,undefined

javascript 复制代码
this.setState({
  count: 1,
  title: 'setState',
  success: true
})

2.数组类型的赋值

增加一个值的方法

javascript 复制代码
// 方法一:将state先赋值给另外的变量,然后使用concat创建新数组
var hobaies= this.state.hobaies; 
this.setState({
  hobaies: hobaies.concat(['篮球']);
})
// 方法二:使用preState、concat创建新数组
this.setState(preState => ({
  hobaies: preState.hobaies.concat(['篮球']);
}))
// 方法三:ES6数组扩展 
this.setState(preState => ({
  hobaies: [...preState.hobaies, '篮球'];
}))

3.对象类型的赋值

javascript 复制代码
// 方法一:使用Object.assign
let ages= this.state.ages;
this.setState({
  owner: Object.assign({}, ages, {age: 22});
})
// 方法二:使用preState、Object.assign创建新对象
this.setState(preState => ({
  owner: Object.assign({}, preState.ages, {age: 22});
}))

今天就学到这,以后有深入理解还会更新的。

终究是无法去玩了,憾尔!

相关推荐
王解1 小时前
webpack loader全解析,从入门到精通(10)
前端·webpack·node.js
老码沉思录1 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
老码沉思录1 小时前
React Native 全栈开发实战班 - 第四部分:用户界面进阶之动画效果实现
react native·react.js·ui
我不当帕鲁谁当帕鲁1 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂1 小时前
工程化实战内功修炼测试题
前端·javascript
放逐者-保持本心,方可放逐2 小时前
微信小程序=》基础=》常见问题=》性能总结
前端·微信小程序·小程序·前端框架
毋若成4 小时前
前端三大组件之CSS,三大选择器,游戏网页仿写
前端·css
红中马喽4 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习
Black蜡笔小新5 小时前
网页直播/点播播放器EasyPlayer.js播放器OffscreenCanvas这个特性是否需要特殊的环境和硬件支持
前端·javascript·html
秦jh_6 小时前
【Linux】多线程(概念,控制)
linux·运维·前端