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

React -为什么即使我有嵌套的值,我的组件仍然可以正确地用PureComponent重新呈现?

React是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式,使得开发者可以将界面拆分成独立的、可复用的组件,从而提高代码的可维护性和可复用性。

在React中,组件的重新渲染是由其props和state的变化触发的。当组件的props或state发生变化时,React会比较新旧props和state的值,如果发现有变化,就会重新渲染组件。

在使用React的过程中,我们通常会使用PureComponent来定义组件。PureComponent是React提供的一个优化性能的组件,它会自动实现shouldComponentUpdate方法,用来判断组件是否需要重新渲染。PureComponent会对组件的props和state进行浅比较,如果发现它们的值没有变化,就会阻止组件的重新渲染。

那么为什么即使有嵌套的值,PureComponent仍然可以正确地重新渲染组件呢?这是因为PureComponent的浅比较只会比较props和state的一级属性,而不会递归比较嵌套的值。也就是说,如果组件的props或state中包含了嵌套的对象或数组,PureComponent只会比较它们的引用是否相同,而不会比较它们的具体内容。

这样的设计有一定的优势和应用场景。首先,浅比较比深比较更高效,可以减少不必要的重新渲染,提升性能。其次,对于大多数情况下,我们只关心props和state的一级属性是否发生变化,而不关心嵌套的值的具体变化。因此,PureComponent可以满足我们对组件重新渲染的需求。

在腾讯云的产品中,与React相关的产品有云函数SCF(Serverless Cloud Function)和云开发(Tencent Cloud Base)。云函数SCF是一种无服务器的云计算服务,可以用于编写和运行无需管理服务器的代码。云开发是一套面向开发者的全栈云开发平台,提供了前后端一体化的开发能力。这些产品可以与React结合使用,帮助开发者更好地构建和部署React应用。

更多关于腾讯云产品的信息,可以访问腾讯云官网:https://cloud.tencent.com/

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

相关·内容

Web 性能优化:缓存 React 事件来提高性能

这与 React 什么关系? React 一种节省处理时间以提高性能智能方法:如果组件 props 和 state 没有改变,那么render 输出也一定没有改变。...如果要将组件 prop 从 object1(上面的例子)更改为 o bject3,则 React 不会重新呈现,因为这两个对象具有相同引用。 在 JavaScript 中,函数处理方式是相同。...如果 React 接收到具有不同内存地址相同函数,它将重新呈现。如果 React 接收到相同函数引用,则不会。...不幸是,这是在代码评审过程中遇到常见场景: class SomeComponent extends React.PureComponent { get instructions () {...如果函数确实依赖于组件,以至于无法在组件外部定义它,你可以组件方法作为事件处理传递过去: class SomeComponent extends React.PureComponent { createAlertBox

2K20

web前端经典react面试题

当一个组件相关数据更新时,即使组件不需要用到这个组件,父组件还是会重新render,可能会有效率影响,或者需要写复杂shouldComponentUpdate进行判断。...React Hooks 限制主要有两条:不要在循环、条件或嵌套函数中调用 Hook;在 React 函数组件中调用 Hook。那为什么会有这样限制呢?...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢?因为 Hooks 设计是基于数组实现。在调用时按顺序加入数组中,如果使用循环、条件或嵌套函数很有可能导致数组取值错位,执行错误 Hook。...它接收 prevProps(上一次 props )作为入参,也就是说在此处我们仍然可以进行 props 对比(再次说明 componentWillUpdate 确实鸡肋哈)。...React如何获取组件对应DOM元素?可以ref来获取某个子节点实例,然后通过当前class组件实例一些特定属性来直接获取子节点实例。

94320

React App 性能优化总结

React 构建并在内部维护呈现UI(Virtual DOM)。当组件 props 或者 state 发生改变时,React 会将新返回元素与先前呈现元素进行比较。...译注:函数组件可以做纯组件优化:React.memo(…) 是 React v16.6 中引入新功能。它与 React.PureComponent 类似,它有助于控制 函数组件 重新渲染。...因此,我们必须确保在使用 React.PureComponent 时符合两个标准: 组件 State / Props 是一个不可变对象; State / Props 不应该有多级嵌套对象。...props 初始数据传递给 React组件 来设置初始状态。...认为没有测量优化几乎都是为时过早,这就是为什么建议首先对性能进行基准测试和测量。您可以考虑使用 Chrome 时间线分析和可视化组件

7.7K20

React 新特性讲解及实例(一)

所以就衍生出 Consumer 组件,用来接收 Provier 提供。 一个 Provider 可以和多个消费组件对应关系。多个 Consumer 也可以嵌套使用,里层会覆盖外层数据。...你可以将 Suspense 组件置于懒加载组件之上任何位置。你甚至可以一个 Suspense 组件包裹多个异步组件。 那如果 about 组件加载失败会发生什么呢?...可以看出 count 每变化一次, Foo 组件都会重新渲染一次,即使它没有必要重新渲染,这个是我们可以优化点。...Foo 组件不会重新渲染了。但如果我们传入数据有好多个层级,我们得一个一个对比,显然就会很繁琐且冗长。 其实 React 已经帮我们提供了现层对比逻辑就是 PureComponent 组件。...它与 React.PureComponent 非常相似,但它适用于函数组件,但不适用于 class 组件。 我们 Foo 组件并没有相关状态,所以可以函数组件来表示。

74130

Web 性能优化: 使用 React.memo() 提高 React 组件性能

这些组件具有状态,此状态是组件本地状态,当状态因用户操作而更改时,组件知道何时重新渲染。现在,React 组件可以重新渲染 5、10 到 90次。...屏幕 0 就变成了 1。.当我们再次单击该按钮时出现了问题,组件不应该重新呈现,因为状态没有更改。count 上个为1,新也 1,因此不需要更新 DOM。...日志,这表明即使状态相同,我们组件也在重新呈现,这称为浪费渲染。...,函数组件没有像类组件状态(尽管它们现在利用Hooks useState出现使用状态),而且我们不能控制函数组件是否重新渲染,因为我们不能像在类组件中使用生命周期方法。...优化函数组件重新渲染 原文: https://blog.bitsrc.io/improv... 你点赞是持续分享好东西动力,欢迎点赞! 一个笨笨码农,世界只能终身学习!

5.6K41

面试官:React怎么做性能优化_2023-05-19

,使用React.PureComponent可以起到优化性能作用。...针对这个问题,官方给出两个解决方案:在深层数据结构发生变化时调用forceUpdate()来确保组件正确地更新(不推荐使用);使用immutable对象加速嵌套数据比较(不同于深拷贝);forceUpdate...修改Child组件导出方式:export default React.memo(Child)。再运行程序,我们可以看到父组件虽然修改了count,但子组件跳过了渲染。...这里React hooks写法,在hooks中useState修改引用类型数据时候,每一次修改都是生成一个新对象,也就避免了引用类型数据传递时候,子组件不更新情况。...和这位“光明磊落”博主进行沟通,得到却是:“什么你看到了就是”这样回复。真是天下之大,无奇不,果断向平台提交了侵权投诉。

28720

面试官:React怎么做性能优化

,使用React.PureComponent可以起到优化性能作用。...针对这个问题,官方给出两个解决方案:在深层数据结构发生变化时调用forceUpdate()来确保组件正确地更新(不推荐使用);使用immutable对象加速嵌套数据比较(不同于深拷贝);forceUpdate...修改Child组件导出方式:export default React.memo(Child)。再运行程序,我们可以看到父组件虽然修改了count,但子组件跳过了渲染。...这里React hooks写法,在hooks中useState修改引用类型数据时候,每一次修改都是生成一个新对象,也就避免了引用类型数据传递时候,子组件不更新情况。...和这位“光明磊落”博主进行沟通,得到却是:“什么你看到了就是”这样回复。真是天下之大,无奇不,果断向平台提交了侵权投诉。

32010

前端必会react面试题_2023-03-01

} } }); React.Component 和 React.PureComponent 区别 PureComponent表示一个纯组件可以用来优化React程序,减少render函数执行次数...React 高阶组件、Render props、hooks 什么区别,为什么要不断迭代 这三者是目前react解决代码复用主要方式: 高阶组件(HOC)是 React 中用于复用组件逻辑一种高级技巧...也就是key不一样时候 通常我们输出节点时候都是map一个数组然后返回一个ReactNode,为了方便react内部进行优化,我们必须给每一个reactNode添加key,这个key prop在设计处不是给开发者...对状态组件和无状态组件理解及使用场景 (1)状态组件 特点: 是类组件 继承 可以使用this 可以使用react生命周期 使用较多,容易频繁触发生命周期钩子函数,影响性能 内部使用 state...,返回那个函数也只会最终在组件卸载时调用一次; [source]参数时,则只会监听到数组中发生变化后才优先调用返回那个函数,再调用外部函数。

83930

React性能探索 --- 避免不必要渲染

感兴趣同学可以下载跑一跑代码 分析更新时间 这里reactPerf工具来测量重新渲染时间。...在这个栗子中,只要text不变,就不需要重新渲染。...这里做一个区分: 无状态组件只是作为一个展示组件,它好处是: 易复用,易测试 与逻辑处理数据层解耦,一般来说,app里越多无状态组件越好,这说明逻辑处理都在上层,例如redux 中处理,这样可以在不渲染前提下...个人觉得,在实际中,Perf跟why-did-you-update两个工具已经可以很好帮我们判断哪部分不需要重新渲染,我们可以根据结果做出优化。...遗留点 PureComponent那么好用,但是使用PureComponent是有条件呀~ 由于PureComponent只是做了一个浅比较,所以深层嵌套对象跟数组都是比不出来,可能会导致需要渲染地方没有重新渲染错误展示

1.1K60

React性能探索 --- 避免不必要渲染

感兴趣同学可以下载跑一跑代码 分析更新时间 这里reactPerf工具来测量重新渲染时间。...在这个栗子中,只要text不变,就不需要重新渲染。...这里做一个区分: 无状态组件只是作为一个展示组件,它好处是: 易复用,易测试 与逻辑处理数据层解耦,一般来说,app里越多无状态组件越好,这说明逻辑处理都在上层,例如redux 中处理,这样可以在不渲染前提下...个人觉得,在实际中,Perf跟why-did-you-update两个工具已经可以很好帮我们判断哪部分不需要重新渲染,我们可以根据结果做出优化。...遗留点 PureComponent那么好用,但是使用PureComponent是有条件呀~ 由于PureComponent只是做了一个浅比较,所以深层嵌套对象跟数组都是比不出来,可能会导致需要渲染地方没有重新渲染错误展示

78130

优化 React APP 10 种方法

在这里,将回顾有助于您优化应用性能功能和技巧。 无论您使用哪种特定模式和方法来优化代码。保持 DRY 原则是非常重要。始终努力重用组件-保证可以帮助编写优化代码。...React.PureComponent通过减少浪费渲染次数来优化我们组件。 4.缓存功能 可以在render方法React组件JSX中调用函数。...我们可以React中使用Web worker,尽管没有官方支持,但是一些方法可以将Web worker添加到React应用中。...React.lazy函数使您可以将动态导入呈现为常规组件。— React博客 React.lazy使创建组件和使用动态导入呈现组件变得容易。...就什么都不返回所以React.memo会看到一个函数引用相同分组并取消重新呈现TestComp。

33.8K20

React16中Component与PureComponent

题图 From Bing By Clm React中用类方式声明组件时候,一般需要继承Component这个类,但是在React16版本中增加了一个PureComponent类,这两个类什么区别呢...下面我们来逐条解释,第一点很好理解,在React中用class方式定义组件,这两个类都可以使用。...如果想让组件随着state和props变化渲染可以PureComponent改变为Component或者在person和arr改变后,对其引用重新设置,也会使组件重新渲染。...在测试时候解决了PureComponent一个小疑惑,看代码: import React, {Component, PureComponent} from 'react'; //父组件 class...判断就会返回ture组件重新渲染,那么同时组件中也会拿到person和arr最新变相进行了渲染。

1.2K20

(转) 谈一谈创建React Component几种方式

在最开始时候以为创建组件只需要调用createClass这个api就可以了;但学习了ES6语法后,又知道了可以利用继承,通过extends React.component来创建组件;后来在阅读别人代码时候又发现了...2.component 因为ES6对类和继承语法级别的支持,所以ES6创建组件方式更加优雅,下面是示例: import React from 'react'; class Greeting extends...属性更为合理,而在面向对象语法中类属性通常被称作静态(static)属性,这也是为什么props还可以像上面注释掉方式来定义。...),当props或者state本身是嵌套对象或数组等时,浅比较并不能得到预期结果,这会导致实际props和state发生了变化,但组件却没有更新问题,例如下面代码一个ListOfWords组件来将单词数组拼接成逗号分隔句子...PureComponent/Component,对于拥有内部state,使用生命周期函数组件,我们可以使用二者之一,但是大部分情况下,更推荐使用PureComponent,因为它提供了更好性能,

46320

让你 React 组件跑得再快一点

渲染(Render)时影响性能React 处理 render 基本思维模式是每次一变动就会去重新渲染整个应用。...> ); } } ○ 父组件重新渲染 只要父组件重新渲染了,即使传入子组件 props 未发生变化,那么子组件也会重新渲染,进而触发 render。...鱼和熊掌不可兼得,带来方便同时也会存在一些问题,当子组件过多或者组件层级嵌套过深时,因为反反复复重新渲染状态没有改变组件,可能会增加渲染时间又会影响用户体验,此时就需要对 React render...○ shouldComponentUpdate 和 PureComponentReact组件中,可以利用 shouldComponentUpdate 或者 PureComponent 来减少因父组件更新而触发子组件...减少 render 次数 类组件可以使用 shouldComponentUpdate 或 PureComponent,函数组件可以利用高级组件特性或者 React.memo 对组件进行合理拆分 在摸索这些解决方案同时

78310

React Hooks 源码解析(1):类组件、函数组件、纯组件

2.2 Pure Component 基于函数式编程范例中纯度概念,如果符合以下两个条件,那么我们可以称一个组件是 Pure Component: 其返回仅由其输入决定 对于相同输入,返回始终相同...如果 React 组件为相同 state 和 props 呈现相同输出,则可以将其视为纯组件。对于像这样组件React 提供了 PureComponent 基类。...因此如果 key 里面是对象的话,可能出现比较不符合预期情况,所以浅比较是不适用于嵌套类型比较。...纯组件React 性能优化重要意义,它减少了组件渲染操作次数:如果一个组件是一个纯组件,如果输入没有变动,那么这个组件就不需要重新渲染。若组件树越大,纯组件带来性能优化收益就越高。...下一篇文章中将说一下这些组件复用方法,以此说明我们为什么需要 React Hooks :)

2K20

探索React Hooks:原来它们是这样诞生

2016:类组件 在JavaScript在ES2015(ES6)中获得类之后,React很快跟进了今天仍然可以使用组件。...我们应该称之为函数组件,因为...他们计划 2018 Hooks 从本质上讲,Hooks 只是我们可以从函数组件中调用函数。...自定义钩子一般概念是为任何想要使用它组件创建可重用逻辑。 React useState() ,因此函数组件可以拥有与类状态类似的自己本地状态。...即使可以接受这些问题,并且你不觉得高阶组件(HOC)和 Render Props 混乱,与过去五年开始学习 React 其他开发者合作或者组队工作时,你可能会发现困难。...一整代新 React 开发者不知道这个背景故事,也不知道我们为什么要有 Hooks。

1.5K20

使用React.memo()来优化React函数组件性能

为了测试count重复设置相同组件会不会被重新渲染, 为TestC组件添加了两个生命周期函数: componentWillUpdate和componentDidUpdate。...所以即使count被设置相同,TestC组件还是会被重新渲染,这些就是所谓无用渲染。...那么如何验证后面state发生改变,组件还是会被重新渲染呢?我们可以在浏览器React DevTools插件中直接对TestC组件状态进行更改。...让我们PureComponent去改写一下我们代码吧: import React from 'react'; class TestC extends React.PureComponent {...所以该组件也被重新渲染了,控制台输出Object{count: 45},让我们重复设置count为45, 然后再看一下控制台输出结果: 由输出结果可以看出,即使count保持不变,还是45,

1.9K00
领券