react调用setstate之后发生的什么？

已于 2022-04-19 21:28:39 修改
阅读量464 收藏
点赞数
文章标签： 经验分享
于 2022-04-19 21:24:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59539177/article/details/124284006
版权

React 会将传入的参数对象与该组件已有的state 进行合并，并触发所谓的调和过程，调和之后，react 会以相对高效的方式根据新的状态生成虚拟dom,然后新老dom 进行比对，找不同，根据diff 算法，react 能够准确的知道哪里不一样，发生了什么从而实现按需更新，而不是重新渲染！

风味儿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React篇(001)-当你调用 setState 的时候，发生了什么事？
手掌日月摘星辰
01-04 603
答案：将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。
深入掌握 react的 setState的工作机制
08-29
深入掌握 React 的 setState 工作机制 setState 是 React 框架中最常用的方法之一，它允许开发者更新组件的状态。但是，setState 的工作机制却是 React 中最容易被误解的地方。今天，我们将深入探讨 setState 的...
react----react setState后会发生什么？关于setState需要知道的基础知识
Seeyoucm
04-16 2928
关于setState需要知道的基础知识
在调用setState之后发生了什么
weixin_30727835的博客
10-30 704
　　在代码中调用setState函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。 在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。 在差异计算算法中，...
setState之后发生了什么
u012031958的博客
04-08 2787
categories: [前端,React] thumbnail: /images/fe/state.jpg toc: true 流程图 partialState：setState传入的第一个参数，对象或函数 _pendingStateQueue：当前组件等待执行更新的state队列 isBatchingUpdates：react用于标识当前是否处于批量更新状态，所有组件公用 dirtyCo...
调用 setState 之后发生了什么？
微光·火炬
03-31 1218
调用 setState 之后发生了什么？ React 会为当前节点创建一个 updateQueue 的更新列队。 然后会触发reconciliation 过程，在这个过程中，会使用名为 Fiber 的调度算法，开始生成新的 Fiber 树， Fiber 算法的最大特点是可以做到异步可中断的执行。 然后 React Scheduler 会根据优先级高低，先执行优先级高的节点，具体是执行 doWork 方法。 在 doWork 方法中，React 会执行一遍 updateQueue 中的方法，以获得新的节点
详解React中setState回调函数
08-27
"详解React中setState回调函数" React中setState回调函数是React框架中的一种重要机制，用于更新组件的状态。setState函数是异步的，因此在使用时需要特别注意。下面将详细介绍setState回调函数的使用方法和注意...
浅谈使用React.setState需要注意的三点
08-28
在使用 setState 时，绝对不要直接改变 this.state，因为之后调用 setState() 可能会替换掉你做的改变。把 this.state 当做是不可变的。例如，在上面的例子中，不应该直接改变 this.state.selection，而应该使用 ...
深入研究React中setState
11-27
在React框架中，`setState`方法是核心功能之一，它负责更新组件的状态（state），进而触发视图（View）的重绘。通过深入研究源码，我们可以了解`setState`背后的工作原理。 首先，当我们创建一个React组件时，例如`...
调用setState后发生了什么
weixin_47552598的博客
10-19 1639
（1）代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。 （2）经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面； （3）在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染； （4）在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，
React中的setState到底发生了什么？
weixin_30745641的博客
11-22 245
https://yq.aliyun.com/ziliao/301671 https://segmentfault.com/a/1190000014498196 https://blog.csdn.net/u011272795/article/details/80882567 import React, { Component } from 'react'; export...
React 常见的面试题（在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用）...
weixin_33800593的博客
04-09 1732
React 常见的面试题 （在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用） 根据记录，问这些问题可能不是深入了解他们在使用 React 方面的经验的最佳方式。之所以标题是《 React 常见的面试题》，其实只是想起一个比《在 React 里面，你可以知道也可以不知道的事, 但是你会发现他们确实很有用》要...
react中的setState是同步还是异步，以及setState之后都发生了什么
包磊磊的博客
02-14 1084
setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。 合成事件：就是react 在组件中的onClick等都是属于它自定义的合成事件 原生事件：比如通过addeventListener添加的，dom中的原生事件 setState的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数的调用顺序在...
React中的setState都做了什么，同步还是异步?
shadowfall的博客
03-11 820
setState能做什么? 首先setState的出现是因为，React并不会绑定视图和state，需要手动去更新视图，所以setState就出现了，它帮助我们更改数据的同时并且通知视图进行渲染。 第二个能力是性能优化，可以认为setState是异步的，React在setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。如果这一系列过程立刻发生在每一个setState之后，就可能会有性能问题。在短时间内频繁setState。React会将state的改
深入Preact源码分析（四）setState发生了什么
flytam的博客
04-17 1118
setState发生了什么 setState(state, callback) { let s = this.state; if (!this.prevState) this.prevState = extend({}, s); extend(s, typeof state==='function' ? state(s, this.props) : state);//...
React | setState，你到底想怎么样？！
qq_35536883的博客
03-31 292
使用过React的小伙伴们，面试中经常会被问到SetState。 各种角度来探测你对setState的理解，认知！有时候可能面试紧张到不知所云，有时候可能压根儿不知道面试官想考你什么，总体来说，还是对setState没有驾轻就熟、玩转自如的程度（本着从自身出发找问题的原则才会进步，毕竟。。。面试机会错过就很难补救了） 结合面试问题，对setState做一个阐述～ 1.setState()之后发生了...
React的setState机制
创战记
05-07 505
React中最常用，控制状态的API，要属setState但是，有些时候，setState有时会产生意料之外的结果，让人摸不到头脑。这不得不说setState的一些秘密。为什么要有setState首先，this.state.demo = 1，也是可以修改state的，但是，为什么要用setState呢？这和生命周期有关，也就是说，setState会重新触发render渲染，直接赋值则不会。也就是，...
React 生命周期中 对setState的调用
YH_ang_eng的博客
08-09 3849
React 组件的生命周期函数是 react 的基础知识，如果有不熟悉的可以看官方文档 或我的另一篇博客 挂载或卸载过程涉及到三个函数： componentWillMount - 组件即将挂载、 componentDidMount - 组件挂载完成、 componentWillUnmount - 组件即将卸载。 这些函数都只会在组件初始化或者卸载时运行一次。 组件更新时涉及到四个函数： ...
React Native常见问题解答(一）
王康的博客
04-20 950
调用setState之后发生了什么？在代码中调用setState函数之后， 1. React会将传入的参数对象与组件当前的状态合并，然后触发所谓 的调和过程（Reconciliation）。 2. 经过调和过程，React会以相对高效的方式根据新的状态构建React。 3. 元素树并且着手重新渲染整个UI界面。 4. 在React得到元素树之后，React会自动计算出新的树与老树的节点差异
react中，state是什么？
最新发布
08-07
### 回答1： 在React中，state指的是组件内部维护的一个状态，它可以存储组件的数据，控制组件的行为和渲染。state是一个对象，可以通过this.state来访问它，通过this.setState来更新它。当组件的state发生改变时，React会自动重新渲染组件，以反映出最新的状态。通过使用state，我们可以构建出可交互的、动态的React组件。 ### 回答2： 在React中，State是一种用于存储组件内部数据的机制。它是一个JavaScript对象，用于记录和控制组件的状态。State可以存储任何类型的数据，如字符串、数字、数组、对象等。 State在React中非常重要，它使得组件能够根据内部数据的变化来更新和重新渲染UI。当State发生变化时，React会自动调用组件的render方法，并根据新的State值重新渲染组件和子组件。 通过使用State，我们可以控制组件的动态行为和显示效果。当我们需要在组件内部跟踪和管理数据时，State提供了一种便捷的方式。我们可以通过setState()方法来更新State的值，以响应用户的交互或其他事件。 使用State时要注意，State是组件私有的，只能在组件内部访问和修改。在组件中定义State时，应该考虑到它的使用范围，并尽量避免直接修改State值，而应该使用setState()方法来更新State，以保证React能正确地处理State的变化。此外，由于State的更新可能是异步的，应该谨慎处理State的值，以避免出现意外的结果。 总而言之，State是React中一种用于存储和管理组件内部数据的机制，它能使组件能够根据数据变化来更新和重新渲染UI，提供了一种便捷的方式来处理动态行为和显示效果。 ### 回答3： 在React中，state是一个用于存储和管理组件内部数据的对象。 State用于存储组件内部的数据，并在异步事件触发后，可以更新组件的显示内容。在React中，当state的值发生变化时，React会自动重新渲染组件，确保页面显示的内容与最新的state值保持一致。 State是私有的，每个组件都有自己的state，并且只能在组件内部进行访问和修改，无法从组件外部直接访问或修改state。这种封装性有助于提高组件的可维护性和可重用性。 State的初始化通常在组件的构造函数中完成，可以通过setState()方法更新state的值。setState()方法接受一个新的state对象作为参数，并将其合并到当前的state中。 State的更新可能是异步的，React会将多个setState()调用合并成一个单一的更新，以提高性能。因此，在更新state时，应该使用函数形式的setState()，而不是直接修改this.state的方式，以确保对state的修改被正确合并。 总之，state是React中用于管理组件内部数据的对象，它的特点包括封装性、异步更新和自动重渲染。通过合理使用state，可以实现动态的页面内容和交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值