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 小时前
[有趣的JavaScript] 为什么typeof null返回 object
开发语言·前端·javascript
nothing_more_than5 小时前
draggable的el-dialog实现对话框标题可以选择
javascript·vue.js·element-plus
小镇程序员6 小时前
vue2 src自定义事件
前端·javascript·vue.js
炒毛豆6 小时前
vue3+echarts+ant design vue实现进度环形图
javascript·vue.js·echarts
AlgorithmAce8 小时前
Live2D嵌入前端页面
前端
nameofworld8 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter9 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝9 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun9 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式
GISer_Jing9 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架