8-1、setState

已于 2023-02-08 14:39:59 修改
阅读量72 收藏
点赞数
分类专栏： react的学习之路 文章标签： 前端 javascript react.js
于 2023-02-06 17:44:00 首次发布
https://github.com/JasonJust
本文链接：https://blog.csdn.net/weixin_46558787/article/details/128905091
版权

为什么使用setState？

开发中并不能直接通过修改state的值让界面发生更新变化：

  1. 修改state之后希望react根据最新的state来渲染页面，但是这种方式的修改react并不知道
    数据发生了变化
  2. react并没有实现类似于Vue2中的Object.definePropertry或者Vue3中的Proxy的方式来监听数据的变化
  3. 必须通过setState来告知react数据已经发生变化
  4. setState是异步更新的（并不能在执行完setState之后立马拿到最新的state的结果）

为什么setState设置为异步？

  1. 可以显著提升性能
    • 每次调用setState都进行一次更新，意味着render函数会被频繁的调用，页面重新渲染，效率会很低下
    • 最好的办法应该是获取到多个更新之后进行批量更新
  2. 如果同步更新state,但是还没执行render函数，那么state和props不能保持同步
    • state和props如果不能保持一致性，会在开发中产生很多问题

setState一定是异步吗？（no）

分为两种情况：（不同情况不同反应）

  1. 在组件生命周期中或react合成事件中,setState是异步的
  2. 在setTimeout或者原生dom事件中，setState是同步的

Payload有效载荷：

Payload.call反复调用使其达到累加效果（this.setState(函数)）
在这里插入图片描述

JasonJust.
关注
专栏目录
REACT-1
03-26
8. **生命周期方法**：React组件有多种生命周期方法，例如componentDidMount、componentDidUpdate和componentWillUnmount等，分别对应组件的不同阶段，用于执行特定的任务。 9. **受控组件与非受控组件**：在React...
第8章 IO库1
08-03
1. `<iostream>`：这个头文件包含了基本的输入输出流类型，如`istream`（用于输入）、`ostream`（用于输出）和`iostream`（同时支持输入和输出）。 2. `<fstream>`：这个头文件提供了文件流类，如`ifstream`（用于...
react-svn.zip
01-13
1. **React基础**：React的核心理念是组件化，它通过创建可复用的UI组件来构建复杂的用户界面。React使用JSX语法，这是一种JavaScript的扩展，允许在JS中编写HTML样式的结构。了解React的基本组件、状态和props是...
SetState 0_0_0001
02-05
: F:\masm32\works\setstate\setstate.exe 属性 : A--- 获取文件版本信息大小失败! 创建时间 : 2004-5-6 18:36:10 修改时间 : 2004-5-16 21:2:30 访问时间 : 2008-2-5 11:45:13 大小 : 4096 字节 ...
swift-GTMRefresh用Swift重写的MJRefresh
08-15
1. **Swift语言特性**： - Swift作为苹果官方推荐的编程语言，其语法简洁、安全，使得代码更加可读和易于维护。GTMRefresh利用Swift的特性，如类型推断、泛型、枚举、协议等，使得代码结构清晰，提高了开发效率。 ...
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 267
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
-webkit-box-reflect属性与倒影效果的实现
读心悦
09-13 594
是一个非标准的 CSS 属性，主要用于在 WebKit 浏览器（如 Chrome 和 Safari）中创建元素的倒影效果。这个属性并不是 CSS 规范的一部分，但在实践中经常被用来实现简单而有趣的视觉效果。
​美​团​一​面​
qq_43858368的博客
09-14 1709
同步代码：按照代码的书写顺序立即执行。异步代码：通过关键字，异步操作会被放入微任务队列中等待执行。事件循环：在同步代码执行完毕后，事件循环会检查并执行微任务队列中的任务。async2script endasync1 end这个顺序反映了JavaScript中同步与异步代码的执行机制以及事件循环的工作原理。定义：HEAD请求是一种HTTP方法，它请求服务器返回与GET请求相同的响应头部，但不返回响应的主体部分。用途：主要用于获取资源的元信息，如文件大小、最后修改时间等，而无需下载整个资源。定义。
前端项目node版本问题导致依赖安装异常的处理办法
weixin_44703272的博客
09-14 442
解决前端项目中的Node版本问题通常涉及以下步骤：检查项目文档：查看项目是否有特定的Node版本要求，如果有，确保你的Node版本与之兼容。使用Node版本管理器：如nvm（Node Version Manager）或n。它们可以让你在同一台机器上安装和切换不同版本的Node。
word-break和word-wrap
最新发布
zai329979994639的博客
09-20 315
1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
Vue3中slot插槽的几种使用实践
小小默：进无止境
09-14 719
父组件子组件父组件中Category 组件标签内的东西将会呈现在子组件slot的位置（进行替换）。
JavaScript发送邮件：实现前端触发的教程？
danplus的博客
09-20 589
无论是使用后端服务、第三方API还是前端库，JavaScript发送邮件都能为用户提供更好的体验。AokSend，API与SMTP接口为JavaScript赋能，无需后端，轻松实现邮件发送，让自动化通信更便捷！
Blazor静态服务端呈现（静态SSR）身份认证
knownchen的专栏
09-17 607
SSR 是服务器侧呈现，HTML 是由服务器上的 ASP.NET Core 运行时生成，通过网络发送到客户端，供客户端的浏览器显示。静态 SSR：服务器生成静态 HTML，它不提供用户交互性或维护 Razor 组件状态，通过 HTTP 协议进行通信。交互式 SSR：Blazor 事件允许用户交互，并且 Razor 组件状态由 Blazor 框架维护，通过 SignalR 连接使用 WebSocket 协议进行通信。
在typescript浏览器端中调用C++编写的函数，WebAssembly传递指针类型的参数，以及处理指针类型的返回值。
Xeon_CC的博客
09-17 435
最后是返回一个C++结构体指针，在TypeScript中通过DataView来获取内存中的地址偏移量来取得结构体中的数据，因为em++编译器是以32位来编译.cpp文件的，所以指针占4个字节。DataResult结构体第一个属性dArr是一个指针，那么就是地址偏移量0，然后以32位无符号整型取得dArr指针，通过这个指针去读取wasm中memoryBuffer中的数据，就可以得到dArr属性对应的值了。同理，通过地址偏移量+4来得到propCount属性，以32位整数读取数据即可。
vue3 透传 Attributes
咸鱼滚滚
09-15 1080
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。 当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上。 最常见的例子就是 class、style 和 id。
前端vue-父传子
weixin_46969393的博客
09-19 657
父传子的话是在components中创建一个子组件MyTest.vue，并且在父组件中先导入(import MyTest from "./components/MyTest")，再注册（在expo二default中写上 compnents:{MyTest}），再使用标签（<MyTest>< / MyTest>）,子组件要接收，在子组件的export default中（props:['obj']）,在子组件中使用obj.goodsList数组中的字段就可以了（obj.id或者obj.name或者obj.pr
TypeScript 快速上⼿ （3：装饰器）
每天都要努力学习哦~~
09-15 919
装饰器本质是一种特殊的函数，它可以对：类、属性、方法、参数进行扩展，同时能让代码更简洁。装饰器自2015年在中被提出到现在，已将近10年。截止目前，装饰器依然是实验性特性 ，需要开发者手动调整配置，来开启装饰器支持。装饰器有 5 种：1⃣类装饰器2⃣属性装饰器3⃣方法装饰器4⃣访问器装饰器5⃣参数装饰器备注：虽然中可以直接使用**类装饰器**，但为了确保其他装饰器可用，现阶段使用时，仍建议使用配置来开启装饰器支持，而且不排除在来的版本中，官方会进一步调整装饰器的相关语法！
完整版订单超时自动取消功能
qq_49979552的博客
09-15 1559
前几天对实习还是继续学习技术产生了抉择，问了一个前辈，他抛给我一个问题，怎么做15分钟订单自动取消，我说然后到时间之后，自动执行这个订单关闭业务，比如把锁了的库存给解开等等操作，然后在数据库里肯定要有体现，比如抖音，查我的订单内一块，在前段应该显示已过期，把支付的按钮变灰或者取消，支付的时候不能直接对库存进行操作，应该是支付模块调用订单模块调用库存模块。然后把理论予以实现，发现需要考虑的点还是有一些的。
【2024】前端学习笔记6-容器标签div
皮皮的博客
09-15 460
div标签的基本用法
void MainWindow::on_actionStart_triggered() { if(start == 0) { start = 1; shape = nextShape; RangeNextShape(); QList<QPoint> list = shape.getIndexPoints(); for (int col=0;col<maxWidth;col++) { for (int row=0;row<maxHeight;row++) { gridTab[col][row]->setState(0); } } foreach(QPoint poi,list) { gridTab[poi.x()][poi.y()]->setState(1); } scores = 0; ui->score->setNum(scores); timerId = startTimer(100); timerCounts = 5; } }
07-12
这段代码是MainWindow类的一个槽函数，当触发了名为"action...8. 将计时器次数"timerCounts"设置为5。 通过以上操作，该槽函数实现了开始游戏的功能，包括设置当前形状、更新网格显示、重置得分和启动计时器等操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值