开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

React -子元素未重新渲染

React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式，将用户界面拆分为独立的可复用组件，通过组件的组合和嵌套来构建复杂的界面。

在React中，当组件的状态或属性发生变化时，React会自动重新渲染组件。然而，当只有组件的子元素发生变化时，React并不会重新渲染该组件，而是通过对比新旧子元素来确定是否需要更新。

这种优化策略称为"虚拟DOM"，React通过比较新旧虚拟DOM树的差异，只对需要更新的部分进行实际的DOM操作，从而提高了性能。

对于子元素未重新渲染的情况，可能是由于以下原因：

子元素的属性或状态没有发生变化：React只会重新渲染那些属性或状态发生变化的组件及其子组件，如果子元素的属性或状态没有发生变化，React就不会重新渲染该子元素。
子元素使用了React的PureComponent或shouldComponentUpdate方法进行了性能优化：PureComponent是React提供的一个优化组件，它会对组件的属性和状态进行浅比较，如果没有变化，则不会重新渲染。类似地，通过在组件中实现shouldComponentUpdate方法，可以手动控制组件的重新渲染。
子元素没有直接依赖于父组件的属性或状态：如果子元素没有直接使用父组件的属性或状态，而是通过props传递了其他数据，那么即使父组件的属性或状态发生变化，子元素也不会重新渲染。

总结起来，React的重新渲染是基于组件的属性和状态的变化，而不是基于子元素的变化。这种优化策略可以提高React应用的性能和效率。

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

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能平台（AI Lab）：https://cloud.tencent.com/product/ai
腾讯云物联网平台（IoT Hub）：https://cloud.tencent.com/product/iothub
腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

React 元素渲染

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = Hello, world!...; 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。...将元素渲染到 DOM 中首先我们在一个 HTML 页面中添加一个 id="example" 的 : 在此 div 中的所有内容都将由 React...要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：实例 const element = Hello, world!...; ReactDOM.render( element, document.getElementById('example') ); 更新元素渲染 React 元素都是不可变的。

5553 0

React 为什么重新渲染

更新（重新渲染）是 React 的重要特性 —— 当用户与应用交互的时候，React 需要重新渲染、更新 UI，以响应用户的输入。但是，React 为什么会重新渲染呢？...如果不知道 React 为什么会重新渲染，我们如何才能避免额外的重新渲染呢？ TL; DR 状态改变是 React 树内部发生更新的唯二原因之一。这句话是 React 更新的公理，不存在任何例外。...为了避免有人抬杠，这句话引入了一些限制定语和关键词：名词解释「更新」和「重新渲染」在 React 中，「更新」和「重新渲染」是关系紧密，但是含义完全不同的两个词。...本文接下来的部分中，「重新渲染」一律指代 React 组件在「更新」时的「渲染」阶段，而「更新」则一律指代（重新）渲染、Reconcilation 和 Commit 整个过程。...如果你去问一些使用 React 的开发者「为什么 React 会更新/重新渲染」，大概会得到这个答案。这句话不无道理，但是并不能反应真实的 React 更新机制。

1.7K3 0

【React基础-3】元素渲染

元素渲染我们将一个react元素渲染到页面的话，是要通过ReactDOM的render()方法来渲染的，例如下面的代码： import React from 'react'; import ReactDOM...的div标签元素，因为我们所有的组件全都是渲染在这个div中的，但是如果你需要在其他的地方另外渲染另一个react页面元素或者集成一个已有的react应用的话，你可以再次调用这个方法，第二个参数传入另一个...元素更新 react中的元素是一个不可改变对象，所以它一旦创建后是不允许改变的，包括更改它的子元素和属性这些都是不允许的，如果我们要更新它的子元素或者属性的话，只能新建一个全新的元素，然后将这个元素传入...元素，按照我们上述的猜想，页面每次会重新渲染这部分页面，那么事实是这样子嘛，我们打开浏览器控制台看一下：如上图所示我们可以看到，虽然我们每次调用ReactDOM.render()方法传进去了一个新的...原来React DOM它会将我们传入的元素及其子元素和它们之前的状态进行比较，然后只会进行必要的更新来达到我们预期的效果，就像上图一样，它通过比较后仅仅更新”时间”那部分DOM。

6962 0

React.js 实战之元素渲染将元素渲染到 DOM 中

元素是构成 React 应用的最小单位元素用来描述在屏幕上看到的内容 ?...与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象 React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致注意: 初学者很可能把元素的定义和一个内涵更广的定义...“组件”给搞混了会在下节当中对组件进行详细的介绍元素事实上只是构成组件的一个部分将元素渲染到 DOM 中首先我们在一个 HTML 页面中添加一个 id="root" 的 ?...在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称之为 “根” DOM 节点我们用React 开发应用时一般只会定义一个根节点但如果你是在一个已有的项目当中引入 React...的话，你可能会需要在不同的部分单独定义 React 根节点要将React元素渲染到根DOM节点中，我们通过把它们都传递给ReactDOM.render() 的方法来将其渲染到页面上

2.6K2 0

基础 | React怎么判断什么时候该重新渲染组件？

组件获得新的状态然后React决定是否应该重新渲染组件。不幸的是，React难以置信简单地将默认行为设计为每次都重新渲染。组件改变？重新渲染。父组件改变？重新渲染。...但是，React不能知道什么时候可以安全的跳过重新渲染，所以React无论是否重要每次都重新渲染。我们如何告诉React跳过重新渲染？那就是第二点要说的内容。...但是你可以在需要优化性能时重写这个方法来让React更智能。比起让React每次都重新渲染，你可以告诉React你什么时候不像触发重新渲染。...重要提示当子组件的的state变化时, 返回false并不能阻止它们重渲染。这作用于子组件的状态而不是他们的props。...但是如果父组件的shouldComponentUpdate方法返回了false就不会传递更新后的props给他的子组件，所以子组件不会重渲染，即使他们的props变化了。

2.8K1 0

React Native中FlatList组件不重新渲染Item解决方法

场景今天在写一个点击TouchableOpacity调用函数重新渲染图表的功能，一开始是点击之后图表可以正常切换但是TouchableOpacity颜色没有变化解决方法给FlatList指定

1.9K1 0

通过防止不必要的重新渲染来优化 React 性能

不必要地重新渲染 React 组件会减慢您的应用程序并让 UI 感觉没有响应。...当一个组件重新渲染时，React 默认也会重新渲染子组件。...如果我们传入的子节点不仅仅是一个简单的字符串，我们会在对象标识和无意的重新渲染方面遇到同样的问题。...Key props 允许 React 跨渲染识别元素。它们最常用于渲染项目列表。...如果每个列表元素都有一个一致的键，那么即使添加或删除列表项，React 也可以避免重新渲染组件。

6K4 1

React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3

本系列文章基于 React 15.4.2 ，以下是本系列其它文章的传送门： React 源码深度解读（一）：首次 DOM 元素渲染 - Part 1 React 源码深度解读（二）：首次 DOM 元素渲染...- Part 2 React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3 React 源码深度解读（四）：首次自定义组件渲染 - Part 1 React 源码深度解读（五）：首次自定义组件渲染...）：单个元素更新 React 源码深度解读（十）：Diff 算法详解正文上一篇讲解了平台无关的代码，这篇继续来讲针对与 HTML DOM 操作的代码。...updateDOMProperties(null, props, transaction); var lazyTree = DOMLazyTree(el); // 循环创建子元素...到此为止，首次渲染就完成啦！总结从 React 启动到元素渲染到页面，并不像看起来这么简单，中间经历了复杂的层级调用。原文的这张图总结得非常好：

3981 0

React 源码深度解读（二）：首次 DOM 元素渲染 - Part 2

一、前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深。...本系列文章基于 React 15.4.2 ，以下是本系列其它文章的传送门： React 源码深度解读（一）：首次 DOM 元素渲染 - Part 1 React 源码深度解读（二）：首次 DOM 元素渲染...- Part 2 React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3 React 源码深度解读（四）：首次自定义组件渲染 - Part 1 React 源码深度解读（五）：首次自定义组件渲染...）：单个元素更新 React 源码深度解读（十）：Diff 算法详解二、从 ReactCompositeComponent 到 ReactDOMComponent 上一篇文章中，介绍了顶层对象ReactCompositeComponent..._mountImageIntoNode 则是将刚创建的 DOM 元素挂载到页面。

3602 0

测开技能--Web开发 React 学习（三）元素的渲染

前面的两节呢，讲了React环境的搭建呢，这节呢，我们这次来看下元素的渲染。元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。...与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。...我们可以看到，这样呢，我们的元素就渲染上去了。对应的h1标签是渲染的已经展示出来了。 React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。...一个元素就像电影的单帧：它代表了某个特定时刻的 UI。那么我们怎么改变下元素的值呢，我们将在下一个章节为大家揭秘，如何利用现有的知识，将元素做动态化渲染。...我是雷子，一个热衷分享技术的人。

2863 0

React 源码深度解读（一）：首次DOM元素渲染 - Part 1

一、前言 React 是一个十分庞大的库，由于要同时考虑 ReactDom 和 ReactNative ，还有服务器渲染等，导致其代码抽象化程度很高，嵌套层级非常深。...本系列文章基于 React 15.4.2 ，以下是本系列其它文章的传送门： React 源码深度解读（一）：首次 DOM 元素渲染 - Part 1 React 源码深度解读（二）：首次 DOM 元素渲染...- Part 2 React 源码深度解读（三）：首次 DOM 元素渲染 - Part 3 React 源码深度解读（四）：首次自定义组件渲染 - Part 1 React 源码深度解读（五）：首次自定义组件渲染...）：单个元素更新 React 源码深度解读（十）：Diff 算法详解二、React.createElement 在写 React 项目的时候，我们一般会直接用 JSX 的形式来写，而 JSX 经过 Babel...四、总结本文介绍了 React 顶层对象 ReactCompositeComponent 的构建过程。通过 JSX 表达的 DOM 结构最终会转化为一个纯 JS 对象，用于下一步的渲染。

5024 0

vue中父组件传值给子组件，父组件值改变，子组件不能重新渲染

1在子组件中用watch()监听值的改变，不同的类型的要用不同的监听方法 props: { echartStyle: { type: Object, default() {...$refs.str.method()在值改变的地方来调用子组件中的方法来重新渲染（暂时使用有bug，不能够及时渲染,父组件值已经改变了，但是子组件值仍然没有改变，不能够及时渲染）这个方法感觉props...’接收数据在调用方法之后，明明父组件的值已经改变了，但是父组件在调用子组件方法时，数据仍然没有接收到，调用之后才接收到，这个方法暂且没用，应该是声明ref的时候声明的是当前组件的实例，然后调用时调用的也是值未改变时的属性...这个没什么用，可以用来调用子组件方法。...$refs.pieChart.getChange(); } }, 3 在子组件上使用 v-if =”flag” （谢谢各位老哥的建议）初始flag:true 修改data时 changData(

2.8K3 0

测开技能--Web开发 React 学习（四）元素的动态渲染

今天是第四篇，讲解元素的动态渲染， React 元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。...根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。...考虑一个计时器的例子：我们修改app.js的文件，定时去刷新下界面，达到这个目的 import React from 'react'; import ReactDOM from 'react-dom...注意：在实践中，大多数 React 应用只会调用一次 ReactDOM.render()。...我是雷子，一个热衷技术专研的人。如果感觉文章对你有帮助，请点亮在看。

6142 0

react.js避免在inputtextareah中输入(setState)时重新渲染整个页面

咬人猫背景：在的onChange方法中使用setState来保存value的话，会导致输入卡顿，原因是用户在输入时，一直在setState，导致整个页面一直重新渲染主页面：...import React, { Component, } from 'react'; import { Input } from 'antd'; const { TextArea } = Input...targetValue.length}/100 );} 解决方法：将组件单独封装成一个组件（component），这样就只会触发自身重新渲染而不是整个页面...TextArea 组件： import React from 'react'; import { Input } from 'antd'; const { TextArea } = Input; class..., { Component, } from 'react'; import { Button } from 'antd'; import CountTextArea from '.

5K2 0

「框架篇」React 中的 9 种优化技术

) } } 这样做虽然能正常执行，但是会额外创建不必要的 DOM 节点，这可能会导致创建许多无用的元素，并且在我们的渲染数据来自特定顺序的子组件时...当一个组件的 props 或 state 变更，React 会将最新返回的元素与之前渲染的元素进行对比，以此决定是否有必要更新真实的 DOM，当它们不相同时 React 会更新该 DOM。...即使 React 只更新改变了的 DOM 节点，重新渲染仍然花费了一些时间。...(MyComponent, areEqual); 8 使用 ComponentDidUnmount() 删除未使用的DOM 元素有些时候，存在一些未使用的代码会导致内存泄漏的问题，React 通过向我们提供...这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量。 react-window 和 react-virtualized 是热门的虚拟滚动库。

2.4K2 0

useLayoutEffect的秘密

/ 将div的子元素转换为数组 const children = [...div.childNodes]; // 所有子元素的宽度 const childrenWidths =...，考虑根据lastVisibleMenuItem来控制子元素的内容 const Component = ({ items }) => { // 如果是第一次渲染且值仍然是默认值，则渲染所有内容...} ) } 现在，在state用实际数字更新后，它将触发导航的重新渲染，React 将重新渲染项目并删除那些不可见的项目。 6....另一方面，使用 useEffect 的流程将分为两个任务：第一个任务渲染了带有所有按钮的初始导航。而第二个任务删除我们不需要的那些子元素。在「两者之间重新绘制屏幕」！...下面是一个时间轴： React 更新 1：渲染虚拟DOM，安排effect，更新DOM 调用 useLayoutEffect 更新state，安排重新渲染(re-render) 调用 useEffect

2131 0

petite-vue-源码剖析-v-for重新渲染工作原理

，true表示重新渲染 let blocks: Block[] let childCtxs: Context[] let keyToIndexMap: KeyToIndexMap // 用于记录...key和索引的关系，当发生重新渲染时则复用元素 const createChildContexts = (source: unknown): [Context[], KeyToIndexMap]...] // 更新作用域，由于元素下的`:value`,`{{value}}`等都会跟踪scope对应属性的变化，因此这里只需要更新作用域上的属性，即可触发子元素的更新渲染...`:value`,`{{value}}`等都会跟踪scope对应属性的变化，因此这里只需要更新作用域上的属性，即可触发子元素的更新渲染 Object.assign(block.ctx.scope...若key相同但元素类型不同，则创建新元素替换掉旧元素遍历剩下未遍历的旧元素 - 以旧元素.key为键，旧元素为值通过Map存储第二次遍历剩下未遍历的新元素(左到右) 从Map查找是否存在的旧元素

5453 0

脱围：使用 ref 保存值及操作DOM

♻️ 前面多篇文章中提及：state 可以 ① 保存渲染间的数据； ② state setter 函数更新变量会触发 React 重新渲染组件。...，React 会递归地重新渲染它的所有子组件。...存储 timeout ID 存储和操作 DOM 元素存储不需要被用来计算 JSX 的其他对象 ref 与 state 不同之处 ✈️ 与 state 一样，React 会在每次重新渲染之间保留 ref...更改时触发重新渲染。...方案一：用一个 ref 引用其父元素，然后用 DOM 操作方法（如 querySelectorAll）来寻找子节点。该方案比较脆弱，当 DOM 结构发生变化，则会失效或报错。

630 0

React 分析器简介

图表中的每个条形代表一个React组件， (如： App, Nav)。条形的大小和颜色代表渲染该组件及其子组件所需的耗时。 (条形的宽度代表组件上次渲染的耗时，颜色代表当前提交的耗时。)...[火焰图示例] 注意：条形的宽度代表上次渲染组件（及其子组件）时所需的耗时。如果组件在本次提交中未重新渲染，则代表之前的渲染耗时。条形图越宽，渲染耗时越长。...剩下的时间被剩余的子节点瓜分，或者在组件自己的渲染方法中使用。...这可能是导致 List 组件重新渲染的原因。排行榜 {#ranked-chart} 排行榜视图表示单个提交。图表中的每个条形代表一个 React 组件 (如： App，Nav)。...对图表进行排序，以便渲染耗时最长的组件位于顶部。 [排行榜示例] 注意：组件的渲染耗时包括渲染其子组件所花费的时间，因此，渲染耗时最长的组件通常位于树的顶部附近。

2.9K4 0

怎样对react，hooks进行性能优化？

但同时函数组件的使用也带来了一些额外的问题：由于函数式组件内部的状态更新时，会重新执行一遍函数，那么就有可能造成以下两点性能问题：造成子组件的非必要重新渲染造成组件内部某些代码（计算）的重复执行好在 React...因为如果一个父组件重新渲染，即使其子组件的 props 没有发生任何变化，这个子组件也会重新渲染，我们称这种渲染为非必要的重新渲染。这时 React.memo 就可以派上用场了。...由此可见，在没有任何优化的情况下，React 中某一组件重新渲染，会导致其全部的子组件重新渲染。即通过 React.memo 的包裹，在其父组件重新渲染时，可以避免这个组件的非必要重新渲染。...当你把 memolizedCallback 作为参数传递给子组件（被 React.memo 包裹过的）时，它可以避免非必要的子组件重新渲染。...情况 1：onClick 未包裹 useCallback ，当点击 app button 时，触发重新渲染，onClick 重新生成函数引用，导致 Child 子组件重新渲染。

2.1K5 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭