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

当我的"useState“常量更新时React重新渲染

当useState常量更新时,React会重新渲染组件。

useState是React提供的一个钩子函数,用于在函数组件中添加状态。它接受一个初始值作为参数,并返回一个包含当前状态值和更新状态值的数组。当我们调用更新状态值的函数时,React会重新渲染组件,并将新的状态值应用到组件中。

React的重新渲染是基于虚拟DOM的,它会比较前后两次渲染的虚拟DOM树的差异,并只更新需要更新的部分。这样可以提高性能,避免不必要的DOM操作。

在重新渲染过程中,React会执行组件的render方法,生成新的虚拟DOM树。然后,React会将新的虚拟DOM树与旧的虚拟DOM树进行比较,找出差异,并将差异应用到实际的DOM上,完成更新。

由于React的重新渲染是基于虚拟DOM的,所以即使useState的值没有发生变化,React也可能会重新渲染组件。这是因为React无法知道useState的值是否真的发生了变化,所以它会默认认为useState的值发生了变化,从而重新渲染组件。

总结起来,当useState常量更新时,React会重新渲染组件,并将新的状态值应用到组件中。这样可以保证组件的显示与状态的同步更新。

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

相关·内容

细说ReactuseRef

当我点击+之后,页面重新渲染为1。 此时当我点击获得Like值按钮,因为定时器原因并不会立即进行alert,此时我在点击+修改like。...react重新渲染组件,每一次渲染都可以拿到独立like状态,这个状态值是独立于每次渲染函数中一个常量,它作用仅仅只是渲染输出,插入jsx中数字而已。...你可以会疑惑每次调用函数like值是哪里来,新like值是由react提供,当我们调用setLike修改它时候。react会带着新值去重新运行函数进行再次渲染,保证渲染和输出一致。...当然需要额外注意是,修改useRef返回值并不会引起react进行重新渲染执行函数,demo中页面渲染不是因为修改Ref值,而是因为我们在修改likeRef.current同时修改了state...useRef值改变并不会造成页面重新渲染,这一点可以做很多事情。比如可以配合useEffect查询页面是首次渲染还是更新。 总结来说,useRef返回值改变并不会造成页面更新

1.8K20

当我学python遇见问题汇总(持续更新

1.pycharmpygame安装 PS:一开始我在cmd里面安装过pygame,但是我用IDLE运行时还是出错,于是只能自己去网上下载来安装 第一步.下载对应版本(我一般都是安装最新.whl...win_amd64.whl“ OK 2.pycharm安装requests库失败 直接用cmd安装requests成功,可是用pycharm导入requests时报错 第一步.于是我在pycharm给报错地址下...,后面那个网址是豆瓣国内源) 在用chorm无法复制user-agent地址 因为没有下载谷歌插件enable_copy 但是如果直接在谷歌浏览器访问他应用商城是会被屏蔽进不去 所以我去...http://www.cnplugins.com/ 下载了enable_copy插件 下面是enable_copy 1.21版本 链接:https://pan.baidu.com/s/1erzeE2wXFxDVjkP1A7LXFQ...提取码:xqjq 拖动这个插件安装在谷歌浏览器扩展插件处 经检测还是无法复制network中user_agent…

54940
  • React 进阶:Hooks 该怎么用

    // useState 返回 state 是个常量// 每次组件重新渲染之后,当前 state 和之前 state 都不相同// 即使这个 state 是个对象const [count, setCount...当我们每次更新计数,都会先打印 clean 这行 log 现在我们需求再次升级了,需要我们在计数器更新以后延时两秒打印出计数。...这是因为虽然你传入了依赖,但是每次组件更新时候 fetch 都会重新创建,因此 useEffect 认为依赖已经更新了,所以再次执行回调。...useState:传入我们所需初始状态,返回一个常量状态以及改变状态函数useEffect:第一个参数接受一个 callback,每次组件更新都会执行这个 callback,并且 callback...:如果你需要一个不会随着组件更新重新创建 callback

    1.1K20

    React Hooks踩坑分享

    我们组件第一次渲染时候,从useState()拿到num初始值为0,当我们调用setNum(1),React会再次渲染组件,这一次num是1。...setTimeout(() => { alert(num); }, 3000); // ... } 在我们更新状态之后,React重新渲染组件。...每一次渲染都能拿到独立num状态,这个状态值是函数中一个常量。 所以在num为3,我们点击了展示现在值按钮,就相当于: function Demo() { // ......只有当依赖数组中依赖发生变化,它才会被重新创建,得到最新props、state。所以在用这类API我们要特别注意,在依赖数组内一定要填入依赖props、state等值。...唯有在依赖数组中传入了num,React才会知道你依赖了num,在num值改变,需要更新函数。

    2.9K30

    React Hook实践总结

    任意一次渲染count常量都不会随着时间改变。...—— Dan Abramov 在React组件中,通过改变状态来触发组件重新 render,每次渲染都可以理解为一帧。在每一帧中,状态只是一个普通变量,render时候,它都是独立不变。...更新 state 在react中,state或者props改变,都会触发重新渲染。函数式组件以参数形式接受props,props变化,整个组件都会重新渲染。...,当我们执行完 setCount 之后,并不会立即拿到最新 count 值: const [count, setCount] = useState(0); setCount(count + 1);...setCount(count => count + 1); }, []) 在React官方文档中,还提到了两种需要避免重复渲染情况及处理方式: 当依赖项中传入一个函数,通过使用 useCallback

    1.1K20

    React 函数式组件怎样进行优化

    ,主要是减少父组件更新而子组件也更新情况,虽然也可以在 state 更新时候阻止当前组件渲染,如果要这么做的话,证明你这个属性不适合作为 state,而应该作为静态属性或者放在 class 外面作为一个简单变量...然后当我点击改副标题这个 button 之后,副标题会变为「副标题改变了」,并且控制台会再次打印出桃桃,这就证明了子组件又重新渲染了,但是子组件没有任何变化,那么这次 Child 组件重新渲染就是多余...那么就是第三种情况了,当父组件重新渲染时候,传递给子组件 props 发生了改变,再看传递给 Child 组件就两个属性,一个是 name,一个是 onClick ,name 是传递常量,不会变...首先我们把 expensiveFn 函数当做一个计算量很大函数(比如你可以把 i 换成 10000000),然后当我们每次点击 +1 按钮时候,都会重新渲染组件,而且都会调用 expensiveFn...不过另外提醒两点一、如果没有提供依赖项数组,useMemo 在每次渲染都会计算新值;二、计算量如果很小计算函数,也可以选择不使用 useMemo,因为这点优化并不会作为性能瓶颈要点,反而可能使用错误还会引起一些性能问题

    97100

    使用 React Hooks 要避免6个错误

    问题概览: 不要改变 hooks 调用顺序; 不要使用旧状态; 不要创建旧闭包; 不要忘记清理副作用; 不要在不需要重新渲染使用useState; 不要缺少useEffect依赖。 1....实际上,React hooks内部工作方式要求组件在渲染,总是以相同顺序来调用hook。 ​...不要在不需要重新渲染使用useStateReact hooks 中,我们可以使用useState hook来进行状态管理。虽然使用起来比较简单,但是如果使用不恰当,就可能会出现意想不到问题。...可以看到,状态变量counter并没有在渲染阶段使用。所以,每次点击第一个按钮,都会有不需要重新渲染。 ​...不要缺少useEffect依赖 useEffect是React Hooks中最常用Hook之一。默认情况下,它总是在每次重新渲染时运行。但这样就可能会导致不必要渲染

    2.3K00

    React 函数式组件性能优化指南

    ,主要是减少父组件更新而子组件也更新情况,虽然也可以在 state 更新时候阻止当前组件渲染,如果要这么做的话,证明你这个属性不适合作为 state,而应该作为静态属性或者放在 class 外面作为一个简单变量...然后当我点击改副标题这个 button 之后,副标题会变为「副标题改变了」,并且控制台会再次打印出桃桃,这就证明了子组件又重新渲染了,但是子组件没有任何变化,那么这次 Child 组件重新渲染就是多余...时候情况,父组件重新渲染了,父组件传递给子组件 props 没有改变,但是子组件重新渲染了,我们这个时候用 React.memo 来解决了这个问题,所以这种情况也排除。...那么就是第三种情况了,当父组件重新渲染时候,传递给子组件 props 发生了改变,再看传递给 Child 组件就两个属性,一个是 name,一个是 onClick ,name 是传递常量,不会变...首先我们把 expensiveFn 函数当做一个计算量很大函数(比如你可以把 i 换成 10000000),然后当我们每次点击 +1 按钮时候,都会重新渲染组件,而且都会调用 expensiveFn

    2.3K10

    React 函数式组件性能优化指南

    ,主要是减少父组件更新而子组件也更新情况,虽然也可以在 state 更新时候阻止当前组件渲染,如果要这么做的话,证明你这个属性不适合作为 state,而应该作为静态属性或者放在 class 外面作为一个简单变量...然后当我点击改副标题这个 button 之后,副标题会变为「副标题改变了」,并且控制台会再次打印出桃桃,这就证明了子组件又重新渲染了,但是子组件没有任何变化,那么这次 Child 组件重新渲染就是多余...时候情况,父组件重新渲染了,父组件传递给子组件 props 没有改变,但是子组件重新渲染了,我们这个时候用 React.memo 来解决了这个问题,所以这种情况也排除。...那么就是第三种情况了,当父组件重新渲染时候,传递给子组件 props 发生了改变,再看传递给 Child 组件就两个属性,一个是 name,一个是 onClick ,name 是传递常量,不会变...首先我们把 expensiveFn 函数当做一个计算量很大函数(比如你可以把 i 换成 10000000),然后当我们每次点击 +1 按钮时候,都会重新渲染组件,而且都会调用 expensiveFn

    83320

    怎样对react,hooks进行性能优化?

    但同时函数组件使用也带来了一些额外问题:由于函数式组件内部状态更新,会重新执行一遍函数,那么就有可能造成以下两点性能问题:造成子组件非必要重新渲染造成组件内部某些代码(计算)重复执行好在 React...当我点击 button 按钮,调用 setIsUpdate 触发 App 组件重新渲染(re-render)。...由此可见,在没有任何优化情况下,React 中某一组件重新渲染,会导致其全部子组件重新渲染。即通过 React.memo 包裹,在其父组件重新渲染,可以避免这个组件非必要重新渲染。...场景 1:useCallback 主要是为了避免当组件重新渲染,函数引用变动所导致其它 Hooks 重新执行,更为甚者可能造成组件无限渲染:import React, { useEffect, useState...通过 useMemo,可以避免组件更新所引发重复计算。通过 useCallback,可以避免由于函数引用变动所导致组件重复渲染

    2.1K51

    React 为什么重新渲染

    更新重新渲染)是 React 重要特性 —— 当用户与应用交互时候,React 需要重新渲染更新 UI,以响应用户输入。但是,React 为什么会重新渲染呢?...如果不知道 React 为什么会重新渲染,我们如何才能避免额外重新渲染呢? TL; DR 状态改变是 React 树内部发生更新唯二原因之一。 这句话是 React 更新公理,不存在任何例外。...为了避免有人抬杠,这句话引入了一些限制定语和关键词: 名词解释 「更新」和「重新渲染」 在 React 中,「更新」和「重新渲染」是关系紧密,但是含义完全不同两个词。...本文接下来部分中,「重新渲染」一律指代 React 组件在「更新渲染」阶段,而「更新」则一律指代(重新渲染、Reconcilation 和 Commit 整个过程。...如果说,当一个组件由于状态改变而更新,其所有子组件都要随之更新。那么当我们通过 Context 传递状态发生改变,订阅了这个 Context 所有子组件都要更新也是毫不意外了。

    1.7K30

    2020-5-21-理解React渲染更新

    今天来和大家聊React渲染更新过程。 ---- React是JavaScript代码 在聊渲染更新之前,我们不能忽视一个概念是——React是JavaScript代码。...我们可以看到React整个渲染更新过程,只有在一个虚拟DOM树上进行更新。...当我们在对节点B进行diff算法时候,我们并不知道,节点B子节点渲染结果一定是一致。 所以React必须对每一个组件调用render方法,再进行对比。...(注意:React.PureComponent还是有一些使用前提,这里暂时不展开,大家可以去看官网文档) 小结 这次我们探索了React渲染更新机制,发现了以下几点: React通过js控制渲染...通过启发式diff算法,减少时间复杂度 通过单独虚拟DOM减少空间复杂度 发现render和DOM更新属于不同过程 正是这些算法一步步优化,实现了React高性能渲染更新方案。

    83050

    React】946- 一文吃透 React Hooks 原理

    原因很简单,在class状态中,通过一个实例化class,去维护组件中各种状态;但是在function组件中,没有一个状态去保存这些信息,每一次函数上下文执行,所有变量,常量重新声明,执行完毕,再被垃圾机制回收...我们从引入 hooks开始,以useState为例子,当我们从项目中这么写: import { useState } from 'react' 于是乎我们去找useState,看看它到底是哪路神仙?...如果两次state不相等,那么调用scheduleUpdateOnFiber调度渲染当前fiber,scheduleUpdateOnFiber是react渲染更新主要函数。...当我们调用useEffect时候,在组件第一次渲染时候会调用mountEffect方法,这个方法到底做了些什么?...答案:这种情况,一般会发生在,当我们调用setNumber时候,调用scheduleUpdateOnFiber渲染当前组件,又产生了一次新更新,所以把最终执行reducer更新state任务交给下一次更新

    2.5K40

    深入浅出 React Hooks

    ,通过 useState 得到状态 count,在 Counter 组件中表现为一个常量,每一次通过 setCount 进行修改后,又重新通过 useState 获取到一个新常量。...; shouldComponentUpdate 通常我们优化组件性能,会优先采用纯组件方式来减少单个组件渲染次数。...class Button extends React.PureComponent {} React Hooks 中可以采用 useMemo 代替,可以实现仅在某些数据变化时重新渲染组件,等同于自带了 shallowEqual...强制渲染 forceUpdate 由于默认情况下,每一次修改状态都会造成重新渲染,可以通过一个不使用 set 函数来当成 forceUpdate。...:函数式 React 组件中、自定义 Hook 函数里; Hook 必须写在函数最外层,每一次 useState 都会改变其下标 (cursor),React 根据其顺序来更新状态; 尽管每一次渲染都会执行

    2.5K40

    10分钟教你手写8个常用自定义hooks

    我们在使用hooks和函数组件编写我们组件,第一个要考虑就是渲染性能,我们知道如果在不做任何处理,我们在函数组件中使用setState都会导致组件内部重新渲染,一个比较典型场景: ?...当我们在容器组件手动更新了任何state,容器内部各个子组件都会重新渲染,为了避免这种情况出现,我们一般都会使用memo将函数组件包裹,来达到class组件pureComponent效果: import...B用memo包裹后,状态a更新将不会导致B组件重新渲染。...实现自定义useState,支持类似class组件setState方法 熟悉react朋友都知道,我们使用class组件更新状态,setState会支持两个参数,一个是更新state或者回调式更新...实现自定义useUpdate 我们都知道如果想让组件重新渲染,我们不得不更新state,但是有时候业务需要state是没必要更新,我们不能仅仅为了让组件会重新渲染而强制让一个state做无意义更新

    3.1K20

    接着上篇讲 react hook

    复制代码 默认情况下,它在第一次渲染之后和每次更新之后都会执行,而且 effect 清除阶段在每次重新渲染都会执行,这个能就会导致性能问题 ,所以他又称是副作用。...意味着该 hook 只在组件挂载时运行一次,并非重新渲染,(需要注意是[]是一个引用类型值,在某些情况下自定义 hooks,他作为第二个参数也会导致页面重新渲染,因为引用地址变了,所以在自定义 hooks...这种优化有助于避免在每次渲染都进行高开销计算。...这意味着在这种情况下,React 将跳过渲染组件操作并直接复用最近一次渲染结果。(如果没有用 React.memo 包裹,每一次 count 变化,子组件都会重新渲染) 仅检查 props 变更。...如果函数组件被 React.memo 包裹,且其实现中拥有 useState 或 useContext Hook,当 context 发生变化时,它仍会重新渲染.默认情况下其只会对复杂对象做浅层对比

    2.6K40

    手写ReactHook核心原理,再也不怕面试官问我ReactHook原理

    调用useState会返回一个state变量,以及更新state变量方法。useState参数是state变量初始值,初始值仅在初次渲染时有效。...下面是一个简单例子, 会在页面上渲染count值,点击setCount按钮会更新count值。...} ReactDOM.render( , document.getElementById('root') ); 如代码所示,我们自己创建了一个useState方法 当我们使用这个方法...是固定值,当父组件数据更改时,子组件也被重新渲染了,我们是希望当传给子组件props改变,才重新渲染子组件。...所以引入了React.memo。 看看介绍 React.memo() 和 PureComponent 很相似,它帮助我们控制何时重新渲染组件。 组件仅在它 props 发生改变时候进行重新渲染

    4.4K30
    领券