react的setState做了什么

news/2024/7/15 17:49:19 标签: react.js, 前端, javascript

1、为什么需要setState

setState的作用是帮助我们更改数据的同时并且通知视图进行渲染。因为React并不会绑定视图和state,需要我们手动去更新视图。

2、setState什么时候是同步的,什么时候是异步的

setState这个方法在调用的时候是同步的,但是引起React的状态更新是异步的。在React中,如果是由React引发的事件处理(比如是通过onClick引发的事件处理,以及生命周期函数调用setState),调用setState不会同步更新this.state,除此之外的setState调用会同步执行this.state。
所谓"除此之外",指的是绕过React通过addEventListener直接添加的事件处理函数,还有通过setTimeout/setInterval产生的异步调用。

原因:

在 React 的 setState 函数实现中,会根据一个变量 isBatchingUpdates 判断是直接更新 this.state 还是放到队列中回头再说,而 isBatchingUpdates 默认是 false,也就表示 setState 会同步更新 this.state,但是,有一个函数 batchedUpdates,这个函数会把 isBatchingUpdates 修改为 true,而当 React 在调用事件处理函数以及生命周期函数之前就会调用这个 batchedUpdates,造成的后果,就是由 React 控制的事件处理过程 setState 不会同步更新 this.state。

React 的 batchUpdate 机制会在每一个方法执行之前设置一个 isBatchingUpdate 为 true,在方法执行结束之后设置 isBatchingUpdate 为 false 。那么当在执行 setState 这句代码的时候,如果 isBatchingUpdate 是 true,就命中了 batchUpdate 机制,会进行 “异步更新”;反之则是 “同步更新”。

3、setState的参数

setState(updater, [callback]),setState 可以接受两个参数,第一个参数可以是一个对象或者是一个函数,都是用来更新 state。如果需要对state数据更改监听,就可以使用第二个参数,它是用来监听state里面数据的更改,当数据更改完成,调用回调函数,用于可以实时的获取到更新之后的数据。


http://www.niftyadmin.cn/n/5112635.html

相关文章

Spring扩展 BeanDefinitionRegistryPostProcessor详解

1、简介 发 2、概念 2.1 基本介绍 2.1.1 BeanDefinitionRegistryPostProcessor 它是Spring框架的一个扩展点,用于对Bean定义的注册过程进行干预和定制。 2.1.2 BeanDefinitionRegistryPostProcessor 它继承BeanFactoryPostProcessor接口,并在其基…

STM32不使用 cubeMX实现外部中断

这篇文章将介绍如何不使用 cubeMX完成外部中断的配置和实现。 文章目录 前言一、文件加入工程二、代码解析exti.cexti.hmain.c 注意:总结 前言 实验开发板:STM32F103C8T6。所需软件:keil5 , cubeMX 。实验目的:如何不…

线程是如何进行创建的

对于任何一个进程来讲,即便我们没有主动去创建线程,进程也是默认有一个主线程的。线程是负责执行二进制指令的,它会根据项目执行计划书,一行一行执行下去。进程要比线程管的宽多了,除了执行指令之外,内存、…

双势阱模型

双势阱模型 原子钟 传统的原子钟利用氨分子 由于隧道效应,上顶点的氮原子可以贯穿三个氢原子形成的势垒,到达下顶点对体系注入微波能量后,氮原子在上下定点之间振荡,体系的能量在两个稳定态之间交替变换,其振荡频率决…

Node-Express框架的用法

题记 node.js中的express框架的用法。 Express 是简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性,可以创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速搭建一个完整功能的网站。 express框架的特点: 可以设置中间件…

散列表:为什么散列表和链表经常会一起使用?

文章来源于极客时间前google工程师−王争专栏。 链表那一节,我们用链表来实现LRU缓存淘汰算法,但是链表实现的LRU时间复杂度是O(n),可以通过散列表将时间复杂度降低为O(1) 跳表那一节,Redis的有序集合是使用跳表来实现的&#xf…

LeetCode讲解篇之113. 路径总和 II

文章目录 题目描述题解思路题解代码 题目描述 题解思路 深度优先遍历二叉树,遍历的同时记录路径,直到遍历到叶节点,若路径和为targetSum则添加到结果集中 题解代码 func pathSum(root *TreeNode, targetSum int) [][]int {var res make([…

PAM从入门到精通(十九)

接前一篇文章:PAM从入门到精通(十八) 本文参考: 《The Linux-PAM Application Developers Guide》 PAM 的应用开发和内部实现源码分析 先再来重温一下PAM系统架构: 更加形象的形式: 六、整体流程示例 2.…