关于React的setState

不可变值

state必须在构造函数中定义

在setState之前不能修改state的值,不要直接修改state,使用不可变值


可能是异步更新

  • 直接使用时异步的
javascript 复制代码
this.setState({
	count: this.state.count + 1
}, () => {
	console.log('count by callback', this.state.count) // 回调函数
})
console.log('count', this.state.count) // 异步的,拿不到最新值
  • 在setTimeout中setState是同步的
javascript 复制代码
setTimeout(() => {
	this.setState({
		count: this.state.count + 1
	})
	console.log('count', this.state.count) // 在settimeout中打印值正确
}, 0)
  • 自己定义的DOM事件,setState是同步的
javascript 复制代码
clickHandler = () => {
	this.setState({
		count: this.state.count + 1
	})
	console.log('count in body event', this.state.count);
}
componentDidMount() {
	document.body.addEventListener('click', this.clickHandler)
}

componentWillUnmount() {
	document.body.removeEventListener('click', this.clickHandler)
}

可能被合并

如下例子

  • 直接使用 - 传入对象会合并
javascript 复制代码
this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})

console.log(this.state.count) // 1
  • 传入函数 - 函数不能被合并
javascript 复制代码
this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
this.setState((prevState, props) => {
	return {
		count: prevState.count + 1
	}
})
console.log(this.state.count) // 3

React18

  • React组件事件:异步更新+合并state
  • DOM事件,setTimeout:异步更新+合并state
  • Automatic Batching 自动批处理

总结

  • React <= 17:只有React组件事件才批处理
  • React18: 所有事件都自动批处理 Automatic Batching
  • React18:操作一致,更加简单,降低了用户的心智负担
相关推荐
WEI_Gaot2 分钟前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
10年前端老司机2 分钟前
微信小程序模板语法和事件
前端·javascript·微信小程序
龙在天2 分钟前
Promise.withResolvers() vs 传统 Promise:谁更胜一筹?
前端
xinhong3 分钟前
Vue3 学习笔记
前端
Evenknow3 分钟前
将"修改源码"改为更专业的"二次开发",体现技术深度
前端·github
khalil4 分钟前
浅析TS枚举与位运算的结合
前端·typescript
yanglei4 分钟前
electron-updater 核心源码解析
前端
攻城狮的大师兄4 分钟前
红宝书(第四版)通读之查漏补缺
javascript
神仙别闹6 分钟前
基于Java+MySQL 实现(Web)日程管理系统
java·前端·mysql
布列瑟农的星空9 分钟前
webworker 实践:外部依赖引入和打包问题
前端·低代码