react-setState学习笔记

最新推荐文章于 2024-10-26 22:45:45 发布
最新推荐文章于 2024-10-26 22:45:45 发布
阅读量374 收藏 1
点赞数
分类专栏： 前端 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39289876/article/details/122196636
版权
本文探讨了React中setState的异步特性，解释了为何首次调用可能仅保留最后一个key，同时介绍了如何通过回调函数实现同步更新以减少DOM diff。优化策略涉及减少DOM操作和使用条件更新来提高性能。
摘要由CSDN通过智能技术生成

文章目录

基础

上图中输出的值是0，0，2，3
在这里插入图片描述
普通setState在这里插入图片描述
settimeout是宏任务
在这里插入图片描述

setState是异步的吗？

是异步的
是批量更新模式
在这里插入图片描述
因为setState会出发dom diff，计算量比较大，所以会有合并更新
6)
在这里插入图片描述react合成事件都会生成一个batchupdate
在这里插入图片描述
setTimeout就是异步操作宏任务，原生事件和异步操作是不加入队列的在这里插入图片描述
在这里插入图片描述
为什么前两次是0，是加入合成事件队列中去了，只保留最后一个key（count），后面一个是settimeout异步处理，执行队列中的操作一个个处理。

如何同步更新state

在这里插入图片描述
强依赖：这一次结果依赖于上一次结果

回调

在这里插入图片描述

函数

对象只保留最后一个，函数每个都执行
在这里插入图片描述

优化

在这里插入图片描述
减少diffdom运算次数
在这里插入图片描述
缓存不用频繁取值
在这里插入图片描述
等于10就让它更新
在这里插入图片描述

雨浅听风吟
关注
专栏目录
ReactNative学习笔记
weixin_68658847的博客
10-04 1084
ReactNative学习笔记
React学习笔记四(redux和react-redux和Redux Toolkit)
kianagrow的博客
12-18 907
React学习笔记四(redux和react-redux和Redux Toolkit)
redux与react-redux学习笔记
yezi__6的博客
03-18 2263
少年驰骋，仗剑天涯 愿你眼眸有星辰，心中有大海 从此，以梦为马，不负韶华 redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理。 React-redux是为方便react使用，在redux上封装的库。在实际的项目中我们可以使用redux也可以直接使用react-redux。 1.redux 1.redux的概念 redux和react之间是没有关系的，Redux支持React、angular、jQuery甚至Javascript redux 是一个应用数据流框架，主要是解.
React-Native学习笔记
码农甲乙丙
09-03 222
笔记内容是结合下面定义的组件中结合说明： import React, {Component} from 'react'; import {StyleSheet, Text, View, TabBarIOS} from 'react-native'; class LWMain extends Component{ constructor(props) { super(pro...
React-Router 学习笔记
小书包大梦想的博客
06-01 345
React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 不使用react-router时的路由跳转方案： import React from 'react'; // 引入页面 import Index from './pages/Index'; // 首页 import Article from './pages/Article'; // 文章页 import About from './pages/Abou..
React-Hook学习笔记
qq_54074936的博客
10-25 865
react-hook学习笔记整理
react-router-dom学习笔记
前端入门
06-17 213
react-router-dom学习笔记一、安装调用二、使用Link跳转三、导航栏跳转1、路由组件和普通组件2、history3、window.location.href 一、安装调用 https://www.npmjs.com/package/react-router-dom npm install --save react-router-dom import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 二、使用L
【React学习笔记】React—redux
m0_64348349的博客
06-02 866
（1）容器组件和UI组件整合一个文件（2）无需自己给容器组件传递store，给包裹（3）使用react-redux后也不用自己检测redux中状态的改变，容器组件可以自动完成这个工作（4）mapDispatchToProps可以写成对象（4）组件与redux交互的步骤},接着在UI组件中，通过this.props.XX读取和操作状态。
React-学习笔记
happy_planet_L的博客
10-13 326
分享日常学习记录的 react 笔记
react学习笔记，ReactDOM，react-router-dom
longshao_520的博客
10-22 712
react学习笔记，ReactDOM，react-router-dom
react-source-code:react原始码学习笔记
03-24
React源代码的学习可以帮助开发者深入理解其工作原理，提高开发效率，并为自定义优化和扩展提供基础。以下是对React源代码的一些核心知识点的详细解析： 1. **虚拟DOM（Virtual DOM）** 虚拟DOM是React的核心特性...
react-source-learning:react 源码学习笔记
05-15
这个"react-source-learning"项目显然是一个关于深入理解React源码的学习笔记。通过研究React的源码，开发者可以更深入地理解其工作原理，从而提高在实际开发中的应用能力。 React的核心概念包括虚拟DOM（Virtual ...
React-Notes:这是我从零开始学习React时的笔记
04-22
以下是我从零开始学习React时的笔记，涵盖了React的基础知识、核心概念和常见用法。 1. **React基本概念** - **虚拟DOM**：React使用虚拟DOM来提高性能，它是一个轻量级的内存中的表示，允许快速计算UI变化，减少...
react学习笔记之state以及setState的使用
11-27
在React开发中，状态（state）和setState()方法是核心概念，它们对于构建动态和响应式的用户界面至关重要。本文将深入探讨这两个概念及其在React组件中的应用。 首先，让我们了解什么是状态（state）。在React中，...
【React系列三】—React学习历程的分享
m0_60623820的博客
10-23 899
react学习历程~
React 探秘(三)： 时间切片
qq_44983621的博客
10-22 959
react使用时间切片提升渲染性能，在熟知原理后，同样我们在业务中也有很多优化场景可以使用到。例如：高频埋点批量切片上传，大量 dom 节点操作等等。
尚硅谷-react教程-求和案例-@redux-devtools/extension 开发者工具使用-笔记
最新发布
呵呵哒!的博客
10-26 299
安装和使用 Redux DevTools 插件-CSDN博客。
同标签实现监听LocalStorage
qq_46344419的博客
10-25 286
同标签实现监听LocalStorage
React中在map遍历中，给虚拟标签(＜＞＜/＞)加key
tdl081071tdy的博客
10-24 331
有时我们可能会需要在遍历时使用虚拟标签包裹内容，而不使用实际标签 ，这种时候会有一个问题，就是虚拟标签无法加key，这样控制台会一直有警告。我们可以将虚拟标签换成这种形势，就能正常加key了。
React学习笔记：状态提升、受控/非受控组件与组件通信
本篇JS-React个人学习笔记旨在分享作者对React框架的理解和实践经验，主要包括以下几个关键知识点： 1. **状态提升（State Management）** 子组件与父组件之间的状态传递有两种方式： - 子传父：在子组件中定义一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值