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、这个是没有绝对的,开发中可以任意选择

相关文章
|
2月前
|
前端开发 JavaScript
学习react基础(3)_setState、state、jsx、使用ref的几种形式
本文探讨了React中this.setState和this.state的区别,以及React的核心概念,包括核心库的使用、JSX语法、类与函数组件的区别、事件处理和ref的使用。
60 3
学习react基础(3)_setState、state、jsx、使用ref的几种形式
|
3天前
|
前端开发
在 componentWillMount 中调用 setState 会发生什么
在 `componentWillMount` 生命周期方法中调用 `setState` 会导致组件在初始渲染前进行额外的状态更新和重新渲染,可能影响性能并引发潜在的逻辑问题。建议避免在这种情况下使用 `setState`。
|
4月前
|
前端开发
useEffect问题之为什么使用useEffect来在props改变时重置state是低效的
useEffect问题之为什么使用useEffect来在props改变时重置state是低效的
|
6月前
setState 和 replaceState 的区别
setState 和 replaceState 的区别
47 2
|
6月前
|
前端开发
setState和repalceState的区别
setState和repalceState的区别
48 0
|
6月前
|
前端开发
react onChange怎么赋值
在 React 中,可以通过使用 onChange 事件来监听表单元素的变化,并进行赋值操作。
|
JavaScript 前端开发
setState总结
setState总结
47 1
|
6月前
|
JavaScript 前端开发 开发者
使用pinia报错:setriderList()not a function
使用pinia报错:setriderList()not a function
96 0
|
前端开发 算法
调用setState后发生了什么?
调用setState后发生了什么?
190 0
|
前端开发
react为什么调用setState而不是直接改变state
react为什么调用setState而不是直接改变state
84 0