【React学习】React中的setState方法

1. setState概述

setState 是React框架中,用于更新组件状态的方法。
setState 方法由React组件继承自 React.Component 类的一部分。通过调用 setState,可以告诉 React要更新组件的状态,并触发组件的重新渲染。

javascript 复制代码
this.setState(newState, callback);

newState 是一个对象,它包含了需要更新的状态属性和值。它将合并到组件的当前状态中。
callback 是一个回调函数,它在 setState 更新状态完成之后被调用。

2. setState为何使用不可变值

  • 什么是 不可变值

React框架中的"不可变值"的概念,通常指的是在编写React组件时,尽量避免直接修改数据,而是创建新的数据副本。

  • setState为何使用不可变值?

在React中,组件的状态(state)应该保持不变。通过使用 setState 方法更新状态时,React会合并现有状态和新状态,而不是直接修改状态。 这确保 React 可以正确地追踪状态的变化并进行必要的更新。

同时,直接修改数据可能会引发意外的副作用,尤其是在多个组件之间共享数据时。通过使用不可变值,可以减少出现这种问题的可能性。

常用的处理不可变值的工具包括 Object.assign、数组的 concatslice 等方法。对数组或者对象使用slice()方法,可以生成该数组或对象的副本,类似于深拷贝。

javascript 复制代码
const list5Copy = this.state.list5.slice()
list5Copy.splice(2, 0, 'a') // 中间插入/删除

this.setState({
	list1: this.state.list1.concat(100), // 追加
	list2: [...this.state.list2, 100], // 追加
	list3: this.state.list3.slice(0, 3), // 截取
	list4: this.state.list4.filter(item => item > 100), // 筛选
	list5: list5Copy // 其他操作
})

3. setState可能是异步的

setState是一个异步方法。这意味着React可能会对多个 setState 调用进行批处理,然后一次性更新组件的状态,而不是每次调用都立即更新。

然而,setTimeout 函数中的 setState 是同步的。在自定义的DOM事件中,setState也是同步的。

state要在构造函数中定义

javascript 复制代码
constructor(props){
	this.state = {
		count: 0
	}
}

因为 setState 是异步的,因此在 setState 方法执行完后打印状态,是拿不到更新后的值,只能拿到当前状态的值。

javascript 复制代码
this.setState({
	count: this.state.count + 1; 
})
console.log(this.state.count) //打印结果为 0

如果想要拿到最新的状态,需要在setState中,写一个回调函数。此时count的结果为1

javascript 复制代码
this.setState(
	{count: this.state.count + 1},() => {console.log(this.state.count)}
)
  • setTimeout 中的 setState 是同步的。此时打印出来的count结果就是1
javascript 复制代码
setTimeout(()=>{
	this.setState({
		count: this.state.count + 1
	})
	console.log(this.state.count)  // 打印结果为1
}, 0)
  • 在自定义的DOM事件中,setState也是同步的。
javascript 复制代码
bodyClickHandler = () => {
	this.setState({
		count: this.state.count + 1
	})
	console.log(this.state.count)   // 打印结果为1
}

componentDidMount(){
	document.body.addEventListener('click', this.bodyClickHandler)
}

4. setState何时合并state

  • setState是异步更新的话,传入的参数是一个对象,那么多次更新同一个状态只会执行1次。
javascript 复制代码
constructor(props){
	this.state = {
		count: 0
	}
}

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

由于 setState 是异步的,React 会将这些更新一起批处理,然后应用它们。这意味着所有三个 setState 调用可能几乎同时执行,使用初始值 this.state.count,导致增加只有 1 而不是 3。

上述代码的思想类似于

javascript 复制代码
Object.assign({count: 1}, {count: 1}, {count: 1}) // 执行结果为 {count: 1}
  • 为了防止这种情况发生,可以在setState中传入更新函数(updater function),它接受先前的状态并返回更新后的状态。这能够确保使用的是最新的状态。
javascript 复制代码
constructor(props){
	this.state = {
		count: 0
	}
}

this.setState((prevState) => ({
  count: prevState.count + 1
}));
this.setState((prevState) => ({
  count: prevState.count + 1
}));
this.setState((prevState) => ({
  count: prevState.count + 1
}));

console.log(this.state.count) // 打印结果为 3

5. React18中的setState

  • 当React的版本小于等于17时,在组件中直接使用setState更新状态,是批处理的(即异步更新且合并相同状态)。在setTimeout方法和自定义DOM事件中,使用setState方法更新状态是同步的,不是批处理的。
  • 然而,在React18版本中,无论是在组件中直接更新状态还是在自定义DOM事件和setTiemout方法中更新,都是自动批处理(Automatic Batching)。
相关推荐
Alo3656 分钟前
antd 组件部分API使用方法
前端
BillKu9 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆30 分钟前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
这里有鱼汤38 分钟前
首个支持A股的AI多智能体金融系统,来了
前端·python
袁煦丞39 分钟前
5分钟搭建高颜值后台!SoybeanAdmin:cpolar内网穿透实验室第648个成功挑战
前端·程序员·远程工作
摸鱼仙人~39 分钟前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
前端进阶者41 分钟前
支持TypeScript并打包为ESM/CommonJS/UMD三种格式的脚手架项目
前端
星空下的曙光41 分钟前
pnpm vs npm区别对比
前端·npm·node.js
啃火龙果的兔子42 分钟前
React 图标库发布到 npm 仓库
前端·react.js·npm
江城开朗的豌豆43 分钟前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js