setState的两种写法

简介: setState的两种写法

1、对象式的setState

1、语法:setState(stateChange, [callback])
(1)stateChange为状态改变对象(该对象可以体现出状态的更改)
(2)callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用
2、注意点
setState是一个同步的方法,但是setState引起React后续更新状态的动作是异步的

state = {count:0}
this.setState({count:count + 1})
console.log(this.state.count);

如下:页面为1,但是拿到的状态还是0
在这里插入图片描述
如果想在更新完状态后拿到该状态,应该在回调中执行

this.setState({count:count + 1},() => {
  console.log(this.state.count);
})

如下:页面为1,拿到的状态也是1
在这里插入图片描述
我们在实际开发中一般是没有这个需求的,所以一般不写回调,但如果有这个需求的时候就可以用。

2、函数式的setState

1、语法:setState(updater, [callback])
(1)updater为返回stateChange对象的函数。
(2)updater可以接收到state和props。
(3)callback是可选的回调函数, 它在状态更新、界面也更新后(render调用后)才被调用。

<Demo name="tom"/> // 从外部传数据进去
this.setState((state,props) => {
  console.log(state,props);
  return {count:state.count + 1}
})

在这里插入图片描述
同理,回调也是可选参数

3、总结

1、对象式的setState是函数式的setState的简写方式(语法糖)
2、一般使用原则:
(1)如果新状态不依赖于原状态 ===> 使用对象方式
(2)如果新状态依赖于原状态 ===> 使用函数方式
(3)如果需要在setState()执行后获取最新的状态数据,
要在第二个callback函数中读取
3、这个是没有绝对的,开发中可以任意选择

相关文章
|
4天前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
16 2
|
4天前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
17 0
|
4天前
|
前端开发
说说React中setState和replaceState的区别?
在 React 中,setState()和 replaceState()是用于更新组件状态的两个方法。它们之间有一些区别
21 0
|
4天前
|
前端开发
react onChange怎么赋值
在 React 中,可以通过使用 onChange 事件来监听表单元素的变化,并进行赋值操作。
|
4天前
props和state相同点和不同点?render方法在哪些情况下会执行?
props和state相同点和不同点?render方法在哪些情况下会执行?
20 0
|
6月前
|
JavaScript 前端开发
setState总结
setState总结
30 1
|
9月前
|
前端开发
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
react中使用shouldComponentUpdate生命周期函数调用setState引起的无限循环的错误
84 0
|
9月前
|
前端开发 算法
调用setState后发生了什么?
调用setState后发生了什么?
130 0
|
9月前
|
存储 缓存 前端开发
React.memo() 和 useMemo() 的用法是什么,有哪些区别?
React.memo() 和 useMemo() 的用法是什么,有哪些区别?
101 0
|
10月前
|
前端开发
react为什么调用setState而不是直接改变state
react为什么调用setState而不是直接改变state
64 0