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

相关文章
|
缓存 JavaScript UED
深入了解 keep-alive:作用、使用步骤、适用场景及示例代码
keep-alive 是 Vue.js 中的一个内置组件,`用于缓存不活动的组件实例,避免重复渲染 DOM,从而提高性能和用户体验`。
|
弹性计算 安全 API
阿里云实名认证接口怎么使用的
1.阿里云实名认证接口怎么使用的,1、登录阿里云控制台 2、单击您的会员名(在页面右上角),进入账号管理页面 3、在左侧导航栏中,单击 实名认证 4、在 实名认证 页面,选择认证类型为 个人,再单击 确定 5、单击 个人支付宝认证 栏中 立即认证 按钮。
阿里云实名认证接口怎么使用的
|
开发者
Uniapp开发鸿蒙应用教程之自定义导航栏
本文介绍了在Uniapp跨平台开发鸿蒙应用时,如何实现自定义导航栏。通过修改pages.json文件可调整默认导航栏样式,但若需添加组件(如搜索框、按钮等),则需手动创建自定义导航栏组件,以适配鸿蒙系统。文中给出了详细的配置代码与实现步骤,帮助开发者灵活控制界面布局。#鸿蒙 #Uniapp #跨平台开发
|
缓存 API 计算机视觉
OpenCV-实现天空变换(图像分割)
OpenCV-实现天空变换(图像分割)
619 0
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
661 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
前端开发 JavaScript
React的事件与原生事件的执行顺序?
React的事件与原生事件的执行顺序?
|
监控 前端开发 安全
谈谈我做 Electron 应用的这一两年
本文首发于微信公众号“前端徐徐”,作者徐徐分享了过去一两年间开发Electron桌面应用的经验与心得。文章详细介绍了从项目启动、技术选型到具体实施的过程,并探讨了桌面端开发面临的挑战及解决方案,如软件更新、任务队列设计、性能优化等。此外,还列举了一些特殊需求的实现方法,如静默安装、进程禁用等。作者认为,尽管桌面端开发有其独特性,但通过不断探索与实践,仍能显著提升用户体验和技术水平。
887 0
谈谈我做 Electron 应用的这一两年
|
算法 JavaScript
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
454 0
JS 【详解】树的遍历(含深度优先遍历和广度优先遍历的算法实现)
|
XML 前端开发 JavaScript
什么是react
什么是react
443 4