我这里今天下雨了,温度一下从昨天的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});
}))
今天就学到这,以后有深入理解还会更新的。
终究是无法去玩了,憾尔!