当前位置：首页 > news >正文

React中的setState执行机制

news 2025/7/11 16:44:51

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

在这里插入图片描述

一. setState是什么

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

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会将这些更新合并为一个更新，只触发一次重新渲染。

changeAge() {this.setState({age: 22})console.log(this.state.age); // 不会是22，是之前的一个值
}

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

changeText() {this.setState({age: 22}, () => {console.log(this.state.age); // 22});
}

同步更新

在某些情况下，需要立即获取最新的状态值，而不是等待异步更新。为了实现同步更新，可以使用回调函数形式的setState。
回调函数形式的setState接收一个函数作为参数，该函数可以接受先前的状态和属性作为参数，并返回一个新的状态对象。React会立即执行该函数，并使用返回的状态对象进行更新。

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

this.setState({count: 1,title: 'setState',success: true
})

2.数组类型的赋值

增加一个值的方法

// 方法一：将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.对象类型的赋值

// 方法一：使用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});
}))