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

ReactJS当我设置状态时,类渲染两次是正常的吗

在ReactJS中,当你设置状态时,类渲染两次是正常的。这是由于React的工作机制所导致的。

React使用了一种称为"虚拟DOM"的技术来提高性能。当你设置状态时,React会重新渲染组件,并比较新旧虚拟DOM树的差异,然后只更新需要更新的部分。这个过程称为"调和"。

在React中,组件的渲染是一个异步过程。当你调用setState方法来设置状态时,React会将状态更新放入一个队列中,并在适当的时机进行批量更新。这意味着在调用setState后,组件不会立即重新渲染。

由于React的调和过程,组件可能会被多次渲染。这是正常的行为,而且通常不会对性能产生明显的影响。React会尽力优化渲染过程,只更新需要更新的部分,以提高性能。

总结起来,当你设置状态时,类渲染两次是正常的。React使用虚拟DOM和调和机制来优化渲染过程,确保只更新需要更新的部分,提高性能。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 云数据库 MySQL 版(CMYSQL):https://cloud.tencent.com/product/cmysql
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 人工智能(AI):https://cloud.tencent.com/product/ai
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

开始学习React js

对于MVC开发模式来说,开发者将三者定义成不同,实现了表现,数据,控制分离。开发者更多从技术角度来对UI进行拆分,实现松耦合。...3)为元素添加cssclass,要用className。 4)组件style属性设置方式也值得注意,要写成style={{width: this.state.witdh}}。...2、组件状态 组件免不了要与用户互动,React 一大创新,就是将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。...上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件透明度,从而引发重新渲染。...3、为组件添加外部css样式名应该写成className而不是class;添加内部样式,应该是style={{opacity: this.state.opacity}}而不是style="opacity

7.2K60

一看就懂ReactJs入门教程(精华版)

对于MVC开发模式来说,开发者将三者定义成不同,实现了表现,数据,控制分离。开发者更多从技术角度来对UI进行拆分,实现松耦合。...3)为元素添加cssclass,要用className。 4)组件style属性设置方式也值得注意,要写成style={{width: this.state.witdh}}。...2、组件状态 组件免不了要与用户互动,React 一大创新,就是将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI 。...就重新设置组件透明度,从而引发重新渲染。...3、为组件添加外部css样式名应该写成className而不是class;添加内部样式,应该是style={{opacity: this.state.opacity}}而不是style="opacity

6.6K70
  • 把 React 作为 UI 运行时来使用

    “ React 会查看 reactElement.type (在我们例子中 button )然后告诉 React DOM 渲染器创建对应宿主实例并设置正确属性: ?...不过,局部突变绝对允许: ? 当我们在函数组件内部创建 items 不管怎样改变它都行,只要这些突变发生在将其作为最后渲染结果之前。所以并不需要重写你代码来避免局部突变。...所有的状态都会丢失 — 对于渲染完全不同视图,通常来说这是一件好事。...我们想要在渲染更新概念上相同 UI 保留这些状态。我们也想可预测性地摧毁它们,当我们在概念上渲染完全不同东西(例如从 转换到 )。...当你调用 useState 时候,我们将指针移到下一项。当我们退出组件“调用树”帧,会缓存该结果列表直到下次渲染开始。 这篇文章简要介绍了 Hooks 内部如何工作

    2.5K40

    如何在已有的 Web 应用中使用 ReactJS

    当我们学习一项新技术,可能一个 JavaScript 框架,也可能一个 CSS 方法,我们将面对这样挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如何从头开始,但却很难运用到实际工作中。...无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery,你所做事情和开发者多年来所做事情一样渲染 HTML > 接收用户事件 > 重新渲染 HTML...如果代码量比较小,这是没有问题, 但是如果代码量庞大,就会很难知道哪些用于 CSS,哪些用于 JavaScript。...菜单和日历在不同容器中,但是它们状态共享。 我将用 jQuery 和 ReactJS 4 个例子解释共享/独立状态概念。...它是一个更可靠、可维护、可重用功能部件。 这在处理大型应用时非常有用,因为组件 component 渲染和更新同步

    14.5K00

    如何在现有的 Web 应用中使用 ReactJS

    原文:How to Sprinkle ReactJS into an Existing Web Application 译者:nzbin 当我们学习一项新技术,可能一个 JavaScript 框架...无论你使用 Angular, Ember, Vue, React, 或者只是 jQuery,你所做事情和开发者多年来所做事情一样渲染 HTML > 接收用户事件 > 重新渲染 HTML...如果代码量比较小,这是没有问题, 但是如果代码量庞大,就会很难知道哪些用于 CSS,哪些用于 JavaScript。...菜单和日历在不同容器中,但是它们状态共享。 我将用 jQuery 和 ReactJS 4 个例子解释共享/独立状态概念。...它是一个更可靠、可维护、可重用功能部件。 这在处理大型应用时非常有用,因为组件 component 渲染和更新同步

    7.8K40

    你可能不知道 React Hooks

    本文译文,原文地址:https://medium.com/@sdolidze/the-iceberg-of-react-hooks-af0b588f43fb React Hooks 与组件不同,它提供了用于优化和组合应用程序简单方式...这段代码存在巨大内存泄漏并且实现不正确。 它很容易让浏览器标签崩溃。 由于 Level01 函数在每次渲染发生被调用,所以每次触发渲染这个组件都会创建新 interval。...这个例子效率很低,每次渲染发生都会创建新 setTimeout,React 有一个更好方式来解决问题。...useState 提供 API 来更新以前状态,而不用捕获当前值。 要做到这一点,我们需要做就是向 setState 提供 lambda(匿名函数)。 这段代码工作正常,效率更高。...防止在钩子上读写相同数值 不要在渲染函数中使用可变变量,而应该使用useRef 如果你保存在useRef 生命周期小于组件本身,在处理资源不要忘记取消设置值 谨慎使用无限递归导致资源衰竭 在需要时候使用

    4.7K20

    前端ReactJS技术介绍

    ReactJS介绍 简介 React (有时叫 React.js 或 ReactJS) 一个为数据提供渲染为 HTML 视图开源 JavaScript 库。...而且React能够批处理虚拟DOM刷新,在一个事件循环(Event Loop)内两次数据变化会被合并。...组件免不了要与用户互动,React将组件看成一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染UI。...这样当指定事件回调方法,this很有可能指定触发事件组件。可以用ES6里箭头函数来解决这个问题。...一起使用script标签引入 将用ReactJS书写代码保存在单独文件里 使用babel在前端实时将ES6ReactJS代码编译为ES5(这个导致页面初次渲染更慢了) 比如一个实际例子: test.jsp

    5.5K40

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

    接下来点击改名字这个 button,页面会变成: image-20191030222021717 title 已经改变了,而且控制台也打印出"桃桃",可以看到虽然我们改父组件状态,父组件重新渲染了...然后当我点击改副标题这个 button 之后,副标题会变为「副标题改变了」,并且控制台会再次打印出桃桃,这就证明了子组件又重新渲染了,但是子组件没有任何变化,那么这次 Child 组件重新渲染就是多余...咱们来分析,一个组件重新重新渲染,一般三种情况: 要么组件自己状态改变 要么父组件重新渲染,导致子组件重新渲染,但是父组件 props 没有改版 要么父组件重新渲染,导致子组件重新渲染,但是父组件传递...在文章开头就已经说过了,在函数式组件里每次重新渲染,函数组件都会重头开始重新执行,那么这两次创建 callback 函数肯定发生了改变,所以导致了子组件重新渲染。...不过另外提醒两点 一、如果没有提供依赖项数组,useMemo 在每次渲染都会计算新值; 二、计算量如果很小计算函数,也可以选择不使用 useMemo,因为这点优化并不会作为性能瓶颈要点,反而可能使用错误还会引起一些性能问题

    2.3K10

    深入理解React组件状态

    众所周知,React框架核心思想组件化,一个应用程序由多个组件搭建而成,组件最重要概念State(状态),State一个组件UI数据模型,组件渲染数据依据。...定义State 众所周知,State作为组件私有属性,主要用于对组件私有属性进行管理,通过对属性状态监听去渲染UI,从而完成用户数据和界面展示一致性。...举个例子,对于一个电商应用,在我们购物车中,当我们点击一次购买数量按钮,购买数量就会加1,如果我们连续点击了两次按钮,就会连续调用两次this.setState({quantity: this.state.quantity...状态类型数组 如有一个数组类型状态books,当向books中增加一本书,使用数组concat方法或ES6数组扩展语法(spread syntax)即可。...当我们使用React 提供PureComponent,更是要保证组件状态不可变对象,否则在组件shouldComponentUpdate方法中,状态比较就可能出现错误,因为PureComponent

    2.4K30

    用动画和实战打开 React Hooks(一):useState 和 useEffect

    在 Hooks 出现之前,组件和函数组件分工一般这样组件提供了完整状态管理和生命周期控制,通常用来承接复杂业务逻辑,被称为“聪明组件” 函数组件则是纯粹从数据到视图映射,对状态毫无感知...当我们第一次调用组件函数,触发初次渲染;然后随着 props 改变,便会重新调用该组件函数,触发重渲染。 你也许会纳闷,动画里面为啥要并排画三个一样组件呢?...结果 Alert 显示 3! 如果你觉得这个结果很正常,恭喜你已经理解了 Capture Value 思想!...深入 useState 本质 在上一节动画中,我们看到每一次渲染组件,我们都能通过一个神奇钩子把状态”钩“过来,不过这些钩子从何而来我们打了一个问号。现在,时候解开谜团了。...当我们逐个调用 useState 时候,useState 便返回了 Hook 链表中存储状态,以及修改状态 Setter。

    2.6K20

    React Concurrent Mode三连:是什么为什么怎么做

    我们日常使用App,浏览网页,有两场景会制约保持响应: 当遇到大计算量操作或者设备性能不足使页面掉帧,导致卡顿。 发送网络请求后,由于需要等待数据返回才能进一步操作导致不能快速响应。...我们知道,JS可以操作DOM,GUI渲染线程与JS线程互斥。所以JS脚本执行和浏览器布局、绘制不能同时执行。...底层架构 —— Fiber架构 从上文我们了解到,为了解决CPU、IO瓶颈,最关键一点:实现异步可中断更新。 基于这个前提,React花费2年间重构完成了Fiber架构。...当我们为上文讲到渲染3000个liDemo开启Concurrent Mode: // 通过使用ReactDOM.unstable_createRoot开启Concurrent Mode // ReactDOM.render...Suspense Suspense[7]可以在组件请求数据展示一个pending状态。请求成功后渲染数据。 本质上讲Suspense内组件子树比组件树其他部分拥有更低优先级。

    2.2K20

    40道ReactJS 面试问题及答案

    当我们进行更改或添加数据,React 会创建一个新 Virtual DOM 并将其与前一个进行比较。 这种比较通过 Diffing 算法完成。...这意味着纯组件仅在 props 或 state 发生更改时才会重新渲染。它在处理组件特别有用,并且可以通过避免不必要重新渲染来帮助提高性能。...仅当加载状态设置为 false ,才会呈现包装组件。 以下 HOC 常见用例列表: 条件渲染 验证 数据获取 造型 状态管理 缓存和记忆 国际化(i18n) 9....React Portal React JavaScript 库中一项功能,允许您在正常组件层次结构之外渲染组件。...避免直接状态变更:更新状态,始终使用 React 提供函数(例如,组件中 setState、功能组件中 useState hook)以避免直接变更状态

    36810

    React Concurrent Mode三连:是什么为什么怎么做

    我们日常使用App,浏览网页,有两场景会制约保持响应: 当遇到大计算量操作或者设备性能不足使页面掉帧,导致卡顿。 发送网络请求后,由于需要等待数据返回才能进一步操作导致不能快速响应。...我们知道,JS可以操作DOM,GUI渲染线程与JS线程互斥。所以JS脚本执行和浏览器布局、绘制不能同时执行。...底层架构 —— Fiber架构 从上文我们了解到,为了解决CPU、IO瓶颈,最关键一点:实现异步可中断更新。 基于这个前提,React花费2年间重构完成了Fiber架构。...当我们为上文讲到渲染3000个liDemo开启Concurrent Mode: // 通过使用ReactDOM.unstable_createRoot开启Concurrent Mode // ReactDOM.render...Suspense Suspense[7]可以在组件请求数据展示一个pending状态。请求成功后渲染数据。 本质上讲Suspense内组件子树比组件树其他部分拥有更低优先级。

    2.5K20

    ReactJS简介

    这样,在保证性能同时,开发者将不再需要关注某个数据变化如何更新到一个或多个具体DOM元素,而只需要关心在任意一个数据状态下,整个界面如何Render。...如果这时因为用户一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成。服务器端并不需要知道哪一小段HTML发生了变化,而只需要根据数据刷新整个页面。...; 上面这种看起来可能有些奇怪标签语法既不是字符串也不是HTML,被称为 JSX,JSX带来一大便利就是我们可以直接在JS里面写DOM结构,比我们用原生JS去拼接字符串,然后再用正则替换等方式来渲染模板方便和简单太多了...6、ReactJS小结 ReactJs基于组件化开发,所以最终你页面应该是由若干个小组件组成大组件。...为组件添加外部css样式名应该写成className而不是class;添加内部样式,应该是style={{opacity: this.state.opacity}}而不是style="opacity

    4K40

    React 性能优化完全指南,将自己这几年心血总结成这篇!

    列表项使用 key 属性 当渲染列表项,如果不给组件设置不相等属性 key,就会收到如下报警。 ? 相信很多开发者已经见过该报警成百上千次了,那 key 属性到底在优化了什么呢?举个 ?...,在不使用 key ,组件两次 Render 结果如下。 <!...常见组件 Modal/Drawer 等,当 visible 属性为 true 渲染组件内容,也可以认为渲染一种实现。...在该场景中,除非想办法不依赖 DOM 信息,否则两次更新过程少不了,就只能用其他优化技巧了。 use-swr 源码[43]就使用了该优化技巧。...那么如何定位哪些组件状态更新导致呢? 在 Profiler 面板左侧虚拟 DOM 树结构中,从上到下审查每个发生了渲染(不会灰色)组件。

    7.4K30

    React hooks 最佳实践【更新中】

    来代替写法;但是俗话说好,没有什么东西十全十美的,在本次整理总结 hooks 库过程中,有体验到 hooks 带来体验提升,同时也存在对比生命周期写法中不足地方。...,那么会造成这种情况:第一次渲染时候正常,但是在第二次渲染时候,执行到第一个钩子函数: const [lastName, setLastName] = useState('yeyung'); 这时候...03 初始化 通常情况,我们使用 useState 来创建一个带有状态变量,这个钩子函数返回一个状态变量和一个setter,当我们调用setter函数时候,render函数会重新执行;这里有一个常见问题...deps 去做比较,如果相等,就直接返回缓存中状态;如果第一次渲染,或者两次 deps 不想等,那么 useMemo 会重新执行一遍 callback,并将值赋给对应缓存。...useState ,再去从这个全局队列中执行对应更新;下面看一下重复渲染情况,给出当重复渲染 useReducer 中逻辑: // This is a re-render.

    1.3K20
    领券