IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 关于react中的state整理 -> 正文阅读

[JavaScript知识库]关于react中的state整理

react怎么检测到数据的变化?

react状态变化只能通过setState(),调用setState()就会更新状态重新渲染dom


为什么不直接更新state?

  1. 如果试图直接更新state,则不会重新渲染组件
  2. 需要使用setState()方法去更新state,它调度对组件state对象的更新,组件通过重新渲染来响应

react中,在执行setState()方法后发生了什么?

咱们可以将“render”分为两个步骤:

  1. 虚拟DOM渲染:

当render方法被调用时,它会返回一个新的组件的虚拟DOM结构。当调用setState()时,render会被再次调用因为默认情况下shouldComponentUpdate总会返回true,所以默认情况下react是没有优化的。

? ? ?2. ?原生DOM渲染:

react只会在虚拟DOM中修改真实DOM节点,而且修改的次数非常少,优化了真实DOM的变化,使得react变得更快。


setState()是同步的还是异步的?

看setState具体的执行位置:

  1. 在react控制的回调函数中【异步】:生命周期钩子/react事件回调
  2. 非react控制的异步回调函数中【同步】:定时器回调/原生事件监听回调/promise回调

setState的“异步”并不是说内部由异步代码实现,其实本身执行的过程和代码都是同步的,只是合成事件和钩子函数的调用顺序在更新之前,导致在合成事件和钩子函数中没法立马拿到更新后的值,形成了所谓的“异步”,咱们也可以通过第二个参数setState(partialState,callback)中的callback拿到更新后的结果,该callback接收上一个state的值和当前的props,并返回一个新的状态。

setState的批量更新优化也是建立在“异步”(合成事件、钩子函数)的基础上。

在原生事件和setTimeout中不会批量更新,在“异步”中如果对同一个值进行多次setState,setState的批量更新政策会对其进行覆盖,取最后一次的执行,如果是同时setState多个不同的值,在更新时会对其进行合并批量更新。


setState为什么会进行异步操作?

  1. 保持内部一致性:props的更新是同步的,因为render父组件时,传入子组件的props才会发生变化,为了保持数据的一致性,state也不直接更新,都是flush时才更新。
  2. 将state的更新延缓到最后批量合并再去渲染对应用的性能优化是具有极大好处的,如果每次的状态改变都回去重新渲染真实的DOM,将会带来巨大的性能消耗。
  3. 立即更新回来视觉上的不适应,比如在页面打开的时候,多个请求发布导致频繁更改Loading,会导致Loading图标闪烁。

关于异步的setState()

  1. 多次调用,怎么处理?

setState({}):合并更新一次状态,只调用一次render()更新界面---状态更新和页面更新都合并了

setState(fn):更新多次状态,但只调用一次render()更新页面---状态更新没有合并,但界面更新合并了

? ? 2.?如何得到异步更新后的状态数据?

在setState()的callback回调函数中。


  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-22 18:27:19  更:2022-04-22 18:31:39 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 0:17:53-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码