首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在值保持不变的情况下,为什么setState要重新呈现组件

在React中,setState是用于更新组件状态的方法。当调用setState时,React会重新渲染组件,并将新的状态应用到组件上。

在值保持不变的情况下,为什么setState要重新呈现组件的原因如下:

  1. React的设计理念:React采用了虚拟DOM的机制,通过比较前后两次渲染的虚拟DOM树的差异,只更新需要更新的部分,从而提高性能。而setState的调用会触发组件的重新渲染,使得React能够检测到状态的变化并更新相应的部分。
  2. 组件的生命周期:组件的重新渲染是React生命周期的一部分。当组件的状态发生变化时,React会调用组件的render方法重新生成虚拟DOM,并将其与之前的虚拟DOM进行比较,从而更新实际的DOM。
  3. 数据驱动的UI更新:React采用了数据驱动的UI更新方式,即通过更新组件的状态来触发UI的更新。当调用setState时,React会将新的状态应用到组件上,并重新渲染组件,从而更新UI。
  4. 组件间的通信:在React中,组件之间的通信通常通过props和状态来实现。当一个组件的状态发生变化时,可能会影响到其他组件的显示或行为。通过重新渲染组件,React能够确保所有相关的组件都能够及时更新。

总结起来,即使值保持不变,调用setState也会重新呈现组件,这是为了保证React能够检测到状态的变化并更新UI,同时也符合React的设计理念和数据驱动的UI更新方式。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

优化 React APP 10 种方法

参见,ReactCompo中。cheapableFuncJSX中呈现,对于每次重新呈现,都会调用该函数,并将返回呈现在DOM上。...如果连续按下按钮,则状态始终保持不变,但是尽管传递给其道具状态相同,但My组件仍将重新渲染。如果App和My下有成千上万个组件,这将是一个巨大性能瓶颈。...如果我们输入文本框中输入一个并按下Click Me按钮,则将呈现输入中。...setState每次调用都会创建新状态对象,所以严格相等运算符将看到不同内存引用并触发组件重新呈现。...如果再次单击该按钮,我们将有另一个重新渲染,不是这样,因为前一个状态对象和下一个状态对象将具有相同data,但是由于setState新状态对象创建,React将看到差异状态对象引用和触发器重新呈现

33.8K20

React 深入系列3:Props 和 State

state必须能代表一个组件UI呈现完整状态集,即组件对应UI任何改变,都可以从state变化中反映出来;同时,state还必须是代表一个组件UI呈现最小状态集,即state中所有状态都是用于反映组件...这个变量是否组件整个生命周期中都保持不变?如果是,那么它不是一个状态。 这个变量是否可以通过state 或props 中已有数据计算得到?如果是,那么它不是一个状态。...调用setState组件state并不会立即改变,setState只是把修改状态放入一个队列中,React会优化真正执行时机,并且React会出于性能原因,可能会将多次setState状态修改合并成一次状态修改...+ 1}),React合并多次修改为一次情况下,相当于等价执行了如下代码: Object.assign( previousState, {quantity: this.state.quantity...状态类型是不可变类型(数字,字符串,布尔,null, undefined) 这种情况最简单,因为状态是不可变类型,直接给修改状态赋一个新即可。

2.8K60

React三大属性之一 state一些简单理解

state来自内部状态,是组件对象最重要属性,其是对象,可以包含多个数据 可以通过更新组件state来更新对应页面显示(重新进行组件渲染),不必操作DOM 当页面发生变化时,用state来记录页面变化...这个变量如果在组件整个生命周期中都保持不变就不应该作为组件State。 通过其他状态(State)或者属性(Props)计算得到变量不应该作为组件State。...没有组件render方法中使用变量不用于UI渲染,那么这个变量不应该作为组件State 。这种情况下,这个变量更适合定义为组件一个普通属性。...区别在于 传入一个更新函数,就可以访问当前状态setState调用是 批量处理,因此可以让更新建立彼此之上,避免冲突。那为什么第一种方式就不可以呢?...setState为什么不会同步更新组件? 首先我们要知道 setState 不会立刻改变React组件中state. setState 通过触发一次组件更新来引发重绘.

51910

深入理解React组件状态

定义State是创建组件第一步,定义State必须能代表一个组件UI呈现完整状态集,即组件任何UI改变,都可以从State变化中反映出来;同时,State还必须是代表一个组件UI呈现最小状态集...组件中定义变量是不是应该作为组件State,可以通过下面的4条依据进行判断: 这个变量是否是通过Props从父组件中获取?如果是,那么它不是一个状态。 这个变量是否组件整个生命周期中都保持不变?...State 更新是异步 调用setState组件state并不会立即改变,setState只是把修改状态放入一个队列中,React会优化真正执行时机,并且React会出于性能原因,可能会将多次...+ 1}),React合并多次修改为一次情况下,相当于等价执行了如下代码: Object.assign( previousState, {quantity: this.state.quantity...状态类型是不可变类型(数字,字符串,布尔,null, undefined) 这种情况最简单,因为状态是不可变类型,直接给修改状态赋一个新即可。

2.3K30

React三大属性之一 state一些简单理解

state来自内部状态,是组件对象最重要属性,其是对象,可以包含多个数据 可以通过更新组件state来更新对应页面显示(重新进行组件渲染),不必操作DOM 当页面发生变化时,用state来记录页面变化...这个变量如果在组件整个生命周期中都保持不变就不应该作为组件State。 通过其他状态(State)或者属性(Props)计算得到变量不应该作为组件State。...没有组件render方法中使用变量不用于UI渲染,那么这个变量不应该作为组件State 。这种情况下,这个变量更适合定义为组件一个普通属性。...区别在于 传入一个更新函数,就可以访问当前状态setState调用是 批量处理,因此可以让更新建立彼此之上,避免冲突。那为什么第一种方式就不可以呢?...setState为什么不会同步更新组件? 首先我们要知道 setState 不会立刻改变React组件中state. setState 通过触发一次组件更新来引发重绘.

1.3K30

setState 聊到 React 性能优化

其实可以分成两种情况 组件生命周期或React合成事件中, setState是异步 setTimeou或原生DOM事件中, setState是同步 验证一: setTimeout中更新 —>...如果是同类型组件元素: 组件保持不变,React会更新该组件props,并且调用componentWillReceiveProps() 和 componentWillUpdate() 方法 下一步...React会对每一个子元素产生一个mutation,而不是保持 星际穿越 和 盗梦空间不变 这种低效比较方式会带来一定性能问题 React 性能优化 1.key...方式一:最后位置插入数据 这种情况,有无key意义并不大 方式二:在前面插入数据 这种做法,没有 key 情况下,所有的都需要进行修改 在下面案例: 当子元素 (这里li元素) 拥有 key...属性: JSX中并没有依赖这个message, 那么它改变不应该引起重新渲染 但是通过setState修改 state 中, 所以最后 render 方法还是被重新调用了 // 决定当前类组件对象是否调用

1.2K20

setState同步异步场景

采用批量更新,简单来说就是为了提升性能,因为不采用批量更新,每次更新数据都会对组件进行重新渲染,举个例子,让我们一个方法内重复更新一个。...也就是说,相比较于React,为什么不能在同样做批处理情况下,立即将setState更新写入this.state而不等待协调结束。...保证内部数据统一 即使state是同步更新,但props是不会重新渲染父组件之前,无法知道props,如果同步执行此操作,批处理就会消失。...某些情况下这可能会带来不便,特别是对于来自更多OO背景的人来说,他们只想多次改变状态,而不是考虑如何在一个地方表示完整状态更新,我可以理解这一点,尽管我确实认为从调试角度来看,保持状态更新集中更加清晰...由于所有的DOM重排,这既视觉上令人不快,又使您应用程序在实践中变慢。如果当您执行一个简单setState()来呈现不同视图时,我们可以开始在后台呈现更新后视图。

2.4K10

阿里前端二面常考react面试题(必备)_2023-02-28

(3)父组件传递方法绑定父组件作用域。 总之, EMAScript6语法规范中,组件方法作用域是可以改变。 描述事件 React中处理方式。...一旦有插入动作,会导致插入位置之后列表全部重新渲染 这也是为什么渲染列表时为什么要使用唯一 key。...(1)props props是一个从外部传进组件参数,主要作为就是从父组件向子组件传递数据,它具有可读性和不变性,只能通过外部组件主动传入新props来重新渲染子组件,否则子组件props以及展现形式不会改变...一般情况下组件render函数返回元素会被挂载父级组件上: import DemoComponent from '....它们是只读组件,必须保持纯,即不可变。它们总是整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流,通常用于呈现动态生成数据。

2.8K30

React面试八股文(第一期)

Redux中使用 Action时候, Action文件里尽量保持 Action文件纯净,传入什么数据就返回什么数据,最妤把请求数据和 Action方法分离开,以保持 Action纯净。...组件状态改变可以因为props改变,或者直接通过setState方法改变。组件获得新状态,然后React决定是否应该重新渲染组件。只要组件state发生变化,React就会对组件进行重新渲染。...受控组件更新state流程:可以通过初始state中设置表单默认每当表单发生变化时,调用onChange事件处理器事件处理器通过事件对象e拿到改变后状态,并更新组件state一旦通过setState...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素都是由React组件进行管理,当有多个输入框,或者多个这种组件时,如果想同时获取到全部就必须每个都要编写事件处理函数...当调用setState()时,render会被再次调用,因为默认情况下shouldComponentUpdate总是返回true,所以默认情况下 React 是没有优化

3K30

React系列-轻松学会Hooks

,根本原因在于细粒度代码复用不应该与组件复用捆绑在一起 也就是我们前面所说这些模式是既有(组件机制)游戏规则下探索出来上层模式 ❗️❗️HOC、Render Props 等基于组件组合方案,相当于先把复用逻辑包装成组件...(initialValue),另外ref对象引用在整个生命周期保持不变 为什么使用 useRef可以用于访问DOM节点或React组件实例和作为容器保存可变变量。...分析: 组件和函数组件中,我们都有两种方法re-render(重新渲染)之间保持数据: 组件组件状态中:每次状态更改时,都会重新渲染组件。...实例变量中:该变量引用将在组件整个生命周期内保持不变。实例变量更改不会产生重新渲染。...场景,这就是保持引用不变场景,显然这次收益成本大于优化付出成本,子组件可以避免不必要渲染 最后 ?

4.3K20

作为一个菜鸟前端开发,面了20+公司之后整理面试题

调用 setState 时,组件 state 并不会立即改变, setState 只是把修改 state 放入一个队列, React 会优化真正执行时机,并出于性能原因,会将 React 事件处理程序中多次...为什么要用 Virtual DOM:(1)保证性能下限,不进行手动优化情况下,提供过得去性能下面对比一下修改DOM时真实DOM操作和Virtual DOM过程,来看一下它们重排重绘性能消耗∶真实...尤雨溪社区论坛中说道∶ 框架给你保证是,你不需要手动优化情况下,我依然可以给你提供过得去性能。...如果是异步,则可以把一个同步代码中多个setState合并成一次组件更新。所以默认是异步,但是一些情况下是同步setState 并不是单纯同步/异步,它表现会因调用场景不同而不同。...为什么加?

1.2K30

面试官最喜欢问几个react相关问题

setState(updater, callback),回调中即可获取最新 原生事件 和 setTimeout 中,setState是同步,可以马上获取更新后;原因: 原生事件是浏览器本身实现...,会导致插入位置之后列表全部重新渲染这也是为什么渲染列表时为什么要使用唯一 key。...如下所示, username没有存储DOM元素内,而是存储组件状态中。每次要更新 username时,就要调用 setState更新状态;每次要获取 username,就要获取组件状态。...表单如何呈现由表单元素自身决定。如下所示,表单并没有存储组件状态中,而是存储表单元素中,当修改表单数据时,直接输入表单即可。有时也可以获取元素,再手动修改它。...当获取表单数据时,首先获取表单元素,然后通过表单元素获取元素。注意:为了方便在组件中获取表单元素,通常为元素设置ref属性,组件内部通过refs属性获取对应DOM元素。

4K20

React App 性能优化总结

React 构建并在内部维护呈现UI(Virtual DOM)。当组件 props 或者 state 发生改变时,React 会将新返回元素与先前呈现元素进行比较。...或 es6 {…params} 向代码库引入不变性时,这两种方法有很长路要走。...这意味着,setState() 方法会创建一个带转换 state, 而不是立即修改 this.state。如果在调用setState() 方法之后去访问 this.state ,则可能会返回现有。...如果在没有刷新组件情况下,props 中被修改了,props 中,将永远不会分配给 state 中 applyCoupon。这是因为构造函数仅在EditPanel 组件首次创建时被调用。...我认为没有测量优化几乎都是为时过早,这就是为什么我建议首先对性能进行基准测试和测量。您可以考虑使用 Chrome 时间线分析和可视化组件

7.7K20

「不容错过」手摸手带你实现 React Hooks

class 情况下使用 state 以及其他 React 特性 凡是 use 开头 React API 都是 Hooks Hook 是什么 Hook 是一个特殊函数,它可以让你“钩入” React...例如,useState 是允许你 React 函数组件中添加 state Hook。...为什么使用 Hooks 引用官网描述 组件之间复用状态逻辑很难 可能要用到 render props (渲染属性)或者 HOC(高阶组件),但无论是渲染属性,还是高阶组件,都会在原先组件外包裹一层父容器...hookStates[hookIndex++] = [newMemo, dependencies]; return newMemo; } } useCallback 允许你重新渲染之间保持对相同回调引用以使得...对象,其 current 属性被初始化为传入参数 useRef 返回 ref 对象组件整个生命周期内保持不变,也就是说每次重新渲染函数组件时,返回 ref 对象都是同一个(注意使用 React.createRef

1.2K10

一文掌握React 渲染原理及性能优化

_mountIndex < lastIndex,进行移动,此时 lastIndex不变,为 3, C _mountIndex 更新为 nextIndex = 3. 5 ?...正常进入update流程有三种方式: 1.setState setState机制正常运行时,由于批更新策略,已经降低了update过程触发次数。...奇怪事情发生了,为什么我只改了标题, 为什么不相关 ListItem 组件也会重新渲染呢? 我们可以回到组件生命周期看看为什么。 ?...如果对比一致就不更新,如果对比不同,则根据最小粒度改变去更新DOM; 如果SCU不需要更新,则直接保持不变,同时其子元素也保持不变。 相似的APi还有React.memo: ?...回到组件 再次回到我们组件中, 这次点击按钮, 把第二条数据换掉: ? 奇怪事情发生了,为什么我只改了第二个 listItem, 还是全部 10 个都重新渲染了呢?

4.3K30

【React】393 深入了解React 渲染原理及性能优化

_mountIndex < lastIndex,进行移动,此时 lastIndex不变,为 3, C _mountIndex 更新为 nextIndex = 3. 5 ?...正常进入update流程有三种方式: 1.setState setState机制正常运行时,由于批更新策略,已经降低了update过程触发次数。...奇怪事情发生了,为什么我只改了标题, 为什么不相关 ListItem 组件也会重新渲染呢? 我们可以回到组件生命周期看看为什么。 ?...如果对比一致就不更新,如果对比不同,则根据最小粒度改变去更新DOM; 如果SCU不需要更新,则直接保持不变,同时其子元素也保持不变。 相似的APi还有React.memo: ?...回到组件 再次回到我们组件中, 这次点击按钮, 把第二条数据换掉: ? 奇怪事情发生了,为什么我只改了第二个 listItem, 还是全部 10 个都重新渲染了呢?

1.2K10

【19】进大厂必须掌握面试题-50个React面试

道具是React中Properties简写。它们是只读组件,必须保持纯净即不变整个应用程序中,它们始终从父组件传递到子组件。子组件永远无法将道具发送回父组件。...shouldComponentUpdate ()\ – 根据某些条件返回true或false。如果更新组件,则返回true,否则返回false。默认情况下,它返回false。...受控组件 不受控制组件 1.他们不保持自己状态 1.他们保持自己状态 2.数据由上级组件控制 2.数据由DOM控制 3.他们通过道具获取当前,然后通过回调通知更改 3.引用用于获取其当前 30...它保持标准化结构和行为,并用于开发单页Web应用程序。React Router有一个简单API。 47.为什么 React Router v4中使用switch关键字?...找到第一个匹配项后,它将呈现指定路线。从而绕过其余 路线。 48.为什么我们React中需要一个Router?

11.1K30

React-Hook最佳实践

(initialValue)useRef 返回 ref 对象组件整个生命周期内保持不变,也就是说每次重新渲染函数组件时,返回 ref 对象都是同一个useRef 可以类比成类组件实例化后 this...state,所以调用 setState 时候,拿到最新同时,记得把 setState ,设置成和当前同一个,如果没有返回,那调用 setState 之后, state 会变成 undefinedsetState...但是可维护性太差了,如果你代码被接手,别人就会疑惑这里为什么这么写,无注释和变量命名太糟糕情况下,代码可以维护性基本为 0设置一个同样 state,虽然不会导致子组件重新渲染,但是本组件还是有可能重新渲染...执行回调函数时候,需要获取到最新 state,能不能用一个不变缓存 state ? 等等?? 不变???...父组件每次渲染,子函数组件如果不加 memo 的话,就算是子组件无任何依赖,属性都不变情况下,子组件也会重新渲染如果在父组件单独加为子组件回调函数添加 useCallback,这样可以避免回调函数重新定义

3.9K30

今年前端面试太难了,记录一下自己面试题

情况下,减少用户对网络延 迟感知)(Code Splitting • Data Fetching)比如react.lazy(组件懒加载) suspense(分包在网络上,用时候获取)Virtual...一般可以用哪些作为key最好使用每一条数据中唯一标识作为key,比如:手机号,id,身份证号,学号等也可以用数据索引(可能会出现一些问题)前端react面试题详细解答为什么 useState...也正因为组件是 React 最小编码单位,所以无论是函数组件还是类组件使用方式和最终呈现效果上都是完全一致。...纯函数输入输出确定性 o useMemo 纯一个记忆函数 o useRef 返回一个可变ref对象,其Current 属性被初始化为传递参数,返回 ref 对象组件整个生命周期内保持不变。...什么是 PropsProps 是 React 中属性简写。它们是只读组件,必须保持纯,即不可变。它们总是整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件

3.7K30
领券