函数法

this.setState(state => ({roles: [...state.roles,role]
}))

能保证每次接收到的state最新，支持同一个函数多次setState同一个变量

对象法

this.setState({roles: [...this.state.roles,role]
})

多次setState同一个变量，不会产生多次效果，（只能产生一次效果）

总结：一般来说，当我们更新的变量与原变量无关时，使用对象法，否则使用函数法

setState是同步还是异步

在react控制的回调函数中是异步的，例如
生命周期钩子/react监听事件

//生命周期钩子
componentDidMount() {}
//react监听事件
getList = () => {}

在非react控制的回调函数中是同步的，例如
定时器回调/ 原生事件监听/promise回调

//定时器回调
setTimeout(() => {},1000)
// 原生事件监听
btn.onclick = function() {}
//promise回调
new Promise((resolve,reject) => {})

解决setState的异步问题

//可以通过setState的第二个参数（回调函数），拿到最新的值
getList = () => {this.setState({role}, () => {console.log('最新的role',role);
})
}

setState的render问题

如果setState传递的是一个引用类型，只改变对象（数组）中的某个值，不会render

//只改变对象中的某个属性，不能够更新成功
const m1 = this.state.m1;
m1.count = 2;
this.setState({m1})

正确做法

this.setState(state => ({m1:{count:state.m1.count+1}  或者 const m1 = this.state.m1;m1.count = 2;m1: {...m1}
}))

关于setState的面试题

 <div id="example"></div>class StateTest extends React.Component {state = {count: 0,}componentDidMount() {this.setState({ count: this.state.count + 1 })this.setState({ count: this.state.count + 1 })console.log(this.state.count) // 2 ==> 0this.setState(state => ({ count: state.count + 1 }))this.setState(state => ({ count: state.count + 1 }))console.log(this.state.count) // 3 ==> 0setTimeout(() => {this.setState({ count: this.state.count + 1 })console.log('timeout', this.state.count) // 10 ==> 6this.setState({ count: this.state.count + 1 })console.log('timeout', this.state.count) // 12 ==> 7}, 0)Promise.resolve().then(value => {this.setState({ count: this.state.count + 1 })console.log('promise', this.state.count)  // 6 ==>4this.setState({ count: this.state.count + 1 })console.log('promise', this.state.count) // 8 ==> 5})}render() {const count = this.state.countconsole.log('render', count)  // 1 ==> 0   4 ==>3   5 ==>4  7 ==>5  9 ==>6  11 ==>7return (<div><p>{count}</p></div>)}}

前一个数字代表顺序，后一个数字代表打印的结果

1 ==> 0 程序第一次进来，首先render，读取state的值为0
2 ==> 0 由于在钩子函数中，setState是异步函数，（promise和setTimeout回调函数中是同步的）所以先打印，结果还是0
3 ==> 0 原因与2相同
4 ==>3 由于setState和promise是微任务，setTimeout是宏任务，先执行宏任务，在执行微任务，所以先执行setState =》promise（按顺序）=》setTimeout
经过4次setState,但是this.setState({ count: this.state.count + 1 })这种方式，更新变量效果会合并，相当于只执行一次（异步setState，执行完所有的setState，才会render，而同步的setState,每次都会触发render）
5 ==> 4 执行promise中的setState导致render，

6==>4 promise中打印count

7==> 5 因为是同步的所以结果不会合并
8==>5 之后但原因都和之前的相同，这里就不雷同了

7.19 深度剖析react中setState相关推荐

[react] react中setState的第二个参数作用是什么呢？
[react] react中setState的第二个参数作用是什么呢? 第二个参数是一个callback函数,用于setState设置state的属性值成功之后的回调,此时调用this.state.p ...
go test 如何输出到控制台_深度剖析 Go 中的 Go 协程 (goroutines) -- Go 的并发
Go 协程 (goroutine) 是指在后台中运行的轻量级执行线程,go 协程是 Go 中实现并发的关键组成部分. 在上次的课程中,我们学习了 Go 的并发模型.由于 Go 协程相对于传统操作系统中 ...
关于react中setState的深入理解
在react中,通常通过state或props,来控制整个组件的状态.一旦state或props发生改变,整个组件会被重新渲染.在setState的理解上,可能会存在一些误区. setState的基本 ...
React中setState修改深层对象
在React中经常会使用到setState,因为在react生态中,state就是一切.在开发过程中,时长会在state中遇到一些比较复杂的数据结构,类似下面这样的: state = {list: { ...
React中setState方法详解
一.为什么要使用 setState 方法,如何用? 在 React 中,组件分为有状态组件和无状态组件,有状态组件就是能够定义 state 的组件,比如类组件,无状态组件反之,比如函数组件.st ...
深度剖析React懒加载原理
目录代码分割 React的懒加载 import() 原理 React.lazy 原理 Suspense 原理参考 1.代码分割 (1)为什么要进行代码分割? 现在前端项目基本都采用打包技术,比如 ...
react中setState有三种用法
(1)对象 this.setState({}) (2)函数,一般是用于在setState之前做一些操作 this.setState(() => {// TODOconsole.log('')re ...
string类有可以调换方向的函数吗_深度剖析C++中的inline函数
点蓝色字关注"CurryCoder" 微信公众号:CurryCoder的程序人生怕什么真理无穷,进一寸有一寸的欢喜 1.inline函数的爱恨两难内联函数比宏优点好很多,详细原 ...
react中setState第二个参数
初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群):757345416 该函数会在setState函数调用完成并且组件开始重渲染的时候被调用,我们可以用该函数来监听渲染是否完成,demo ...

7.19 深度剖析react中setState

setState

函数法

对象法

setState是同步还是异步

解决setState的异步问题

setState的render问题

关于setState的面试题

7.19 深度剖析react中setState相关推荐

最新文章

热门文章