shouldComponentUpdate和PureComponents区别？

最新推荐文章于 2024-01-02 14:54:07 发布
最新推荐文章于 2024-01-02 14:54:07 发布
阅读量167 收藏 1
点赞数 2
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77305454/article/details/132219281
版权

1.实现方式不同：

        shouldComponentUpdate是生命周期中的一个方法，需要我们手动去实现

        PureComponent是React提供的一个组件类，继承自Component，它已经内置了对props和            state的浅层比较。

2.触发方式不同：

        shouldComponentUpdate方法可以根据props或者state的任意属性和值去比较，并且是基于            自定义的逻辑去判断是否触发渲染。

        PrueComponent会自动进行props和state的浅层比较，只有当props或者satte引用发生变化时          才会触发渲染

3.应用场景：

        shouldComponentUpdate可以灵活的根据自定义的逻辑去判断是否触发渲染，因此适用于复          杂的数据和条件判断场景。

        PureComponent则比较适用于简单的props和state，对于多数场景来说，它可以自动处理组件是否重新渲染，这样就能够避免手动书写shouldComponentUpdate方法

小航要继续努力吖！
关注
React性能优化——PureComponent & ShouldComponentUpdate详解篇
scu_南的博客
11-30 1350
背景   为了响应公司中台化的战略，6.7月份的时候做了一个中台组件的项目。    组件逻辑比较复杂，而且因为有不同的接入方，需求可能都会不一样，所以都是通过读接口来获取配置，所有的字段依据配置来决定显隐，是否必填，以及各种的校验，联动，并且划分的一些功能模快同样也是走的配置。    以上听起来还是比较复杂的，组件因为包含大量的不同类型的表单，而不同表单又有一些通用的输入框，像文本输入框，时间选择框，所以我们选择以最小颗粒度拆分出一些组件。为了优化
PureComponent和shouldComponentUpdate
richest_qi的博客
06-06 278
新建react项目，主要包含以下文件： 入口文件index.js 入口组件App.js Demo组件 Demo/index.css Demo/index.jsx 存在的问题 只要调用setState()，就会执行render()，即使state没有发生变化。 只要当前组件render，子组件会自动重新render，即使子组件的state或props都没有发生变化。 针对以上问题，下面将采取措施进行优化。涉及变更的文件有：component/Demo/index.jsx。 是开关，只有当其返回值
shouldComponentUpdate与PureComponent
weixin_38222276的博客
08-14 180
react效率高的做法 只有当组件的state或props数据发生改变时才重新render() 原因 Component中的shouldComponentUpdate()默认放回true 解决 办法1 重写shouldComponentUpdate()方法 比较新旧state或props数据，如果有变化才返回ture，如果没有返回fasle 办法2 使用PureComponent PureComponent重写了should...
PureComponent & shouldComponentUpdate
diaoju3333的博客
07-08 121
Called to determine whether the change in props and state should trigger a re-render. Componentalways returns true.PureComponentimplements a shallow comparison on props and state and returns ...
React类组件性能优化之shouldComponentUpdate、React.PureComponent
qq_42335214的博客
12-26 497
前言 这两个性能优化方法是对与类组件来说的。有些时候我们setState时，状态值并没有改变，但是相关的组件还是渲染了。比如如下代码的执行 class Test extends React.Component { state = { value:0 } componentWillUpdate() { console.log('Test 渲染了') } render() { return <div>
march-react-mrng
03-31
8. **性能优化**：React提供了一些策略，如PureComponents、shouldComponentUpdate和React.memo，以及React DevTools，帮助开发者优化应用性能。 9. **测试**：Jest和Enzyme等工具用于编写和运行React组件的单元...
induro面试：React Full Stack面试。 时间紧迫，没有清理或代码优化
02-22
- 变量与数据类型：了解`let`, `const` 和 `var` 的区别，以及基本数据类型（如数字、字符串、布尔、null、undefined）和复杂数据类型（对象、数组）。 - 函数：掌握函数表达式、箭头函数、作用域（局部/全局/闭包...
my-burger:Max的React16 Udemy课程中的Burger Builder应用
04-16
10. **代码优化**：学习性能优化技巧，如使用PureComponents、shouldComponentUpdate以及使用React.memo()。 通过这个项目，学员不仅可以深化对React 16的理解，还能提高实际开发技能，同时对前端开发的全貌有更...
React-harjoituksia:Sisältääeri React harjoituksia
03-26
1. **创建组件**：学习如何使用JSX（JavaScript XML）语法创建React组件，包括函数组件和类组件的区别。 2. **props和state**：理解如何通过props向组件传递数据，以及组件内部如何使用state来管理自身的数据。 3....
nucampReact
03-11
10. **优化技巧**：了解性能优化技术，如PureComponents、shouldComponentUpdate和 memoization。 通过这个项目，你不仅会学习到React的基本用法，还能了解实际开发流程，包括项目结构、代码组织和测试实践，这些都...
React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用
landl_ww的博客
07-12 1698
React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用 场景 React 是一个用于构建用户界面的 JavaScript 库，主要负责将数据转换为视图，要保证数据和视图的统一，react 通过 重新 render 来保证数据和视图的统一，但当数据没有变化时，视图重新渲染，就会造成不必要的性能浪费 看下面这个例子， import ...
【React】对比ShouldComponentUpdate、PureComponent和Memo
未来可期
12-10 1024
对比ShouldComponentUpdate、PureComponent和Memo
React性能优化之shouldComponentUpdate、PureComponent和React.memo
雨的印记的博客
07-04 791
React性能优化之shouldComponentUpdate、PureComponent和React.memo 前言 最近一直在学习关于React方面的知识，并有幸正好得到一个机会将其用在了实际的项目中。所以我打算以博客的形式，将我在学习和开发（React）过程中遇到的问题记录下来。 这两天遇到了关于组件不必要的重复渲染问题，看了很多遍官方文档以及网上各位大大们的介绍，下面我会通过一些demo结合自己的理解进行汇总，并以此作为学习React的第一篇笔记（自己学习，什么都好，就是费头发…）。 本文主要介绍以
【React系列】React生命周期、setState深入理解、 shouldComponentUpdate和PureComponent性能优化、脚手架
最新发布
川峰的博客
01-02 1443
一. 生命周期 1.1. 认识生命周期 很多的事物都有从创建到销毁的整个过程，这个过程称之为是生命周期； React组件也有自己的生命周期，了解组件的生命周期可以让我们在最合适的地方完成自己想要的功能； 生命周期和生命周期函数的关系： 生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段； 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程； 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程； 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
react 组件进阶之 pureComponent(纯组件)
twinkle的博客
03-13 782
阅读下面的代码，请回答 render 总共执行了多少次？这个问题涉及到react的生命周期。 代码如下 import React, { Component, PureComponent } from 'react' /** * 组件有两个状态，一个是li,另一个是添加li */ interface ITestPureComponentS { lis: number[], addLi: (li: number) => void } // 测试li 组件 class TestLi ex.
React.memo、shouldComponentUpdate、PureComponent的基本使用
阿飞
05-23 625
当我们组件内部有大量的计算是，避免组件内部进行不必要的重新渲染，使用React.memo进行缓存组件，避免不必要的重新渲染。默认根据props的浅比较进行来判断子组件是否更新。是否应该更新组件，true更新、false不更新。传递第二个参数是就根据第一个参数返回值判断。是用来判断是否需要重新渲染组件，和。用于class组件方式，而。
前端进阶之路（三）React组件重新渲染之shouldComponentUpdate和React.PureComponent
Root的博客
10-19 4574
state作为react的一个重要的部分，固然自动渲染给我们省了很多的麻烦，然而并不是我们想让他不渲染就很容易做到的 一些时候，state的重新渲染机制导致了不必要的渲染，所以研究一下用来一些特定的情况下也是很有必要的 一. shouldComponentUpdate （shouldComponentUpdate可能会导致bug，并不建议使用） 关于shouldComponentUpdate，R...
React性能优化 PureComponent 使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
09-14 1万+
为什么使用？ 转载https://wulv.site/2017-05-31/react-purecomponent.html React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易
React解密：React中PureComponent和Component的区别是什么
lee前端技术站
08-25 6505
提到PureComponent，应该并不是react与生俱来就有的，而应该是在15.3版本之后才出现的，主要是为了取代之前的PureRenderMixin。所以对于几年不怎么接触react的我来说，当提到PureComponent的时候，还是有那么些许的懵逼。更不要说它于Component的区别是什么？那么我们先来看看pureComponent是个什么鬼？ PureComponent其实就是一个继承自Component的子类，会自动加载shouldComponentUpdate函数。当组件需要更新的时候，
shouldcomponentupdate
09-21
### 回答1： `shouldComponentUpdate` 是 React 中组件的一个生命周期函数，它在组件接收到新的 props 或 state 时被调用。这个函数的返回值决定了组件是否需要重新渲染。如果返回 true，组件就会重新渲染；如果返回 false，组件就不会重新渲染。默认情况下，这个函数的返回值是 true。 ### 回答2： shouldComponentUpdate是React中一个生命周期函数，它决定了组件是否需要重新渲染。它的作用是在组件状态或者属性发生变化时，通过比较前后的状态或者属性，决定是否需要进行重新渲染，从而提高组件性能。 通常情况下，React中的组件在状态或者属性发生变化时会重新渲染，当组件的状态或者属性改变频繁且重新渲染的成本较高时，就需要使用shouldComponentUpdate进行优化。 shouldComponentUpdate在state和props发生变化时被调用，它接收两个参数：nextProps和nextState。我们可以在这个函数中进行判断，返回一个布尔值，用于决定组件是否需要重新渲染。如果返回false，组件将不会进行重新渲染。 在实现shouldComponentUpdate时，我们可以对状态或者属性进行比较，判断它们是否真的发生了变化。如果没有变化，说明组件的渲染并不会产生任何影响，那么就可以返回false，避免不必要的重新渲染。 通过使用shouldComponentUpdate进行优化，可以避免不必要的渲染，提高组件的性能。但需要注意的是，过度使用shouldComponentUpdate可能会导致一些问题，比如忽略了某些状态或者属性的变化，从而产生错误的结果。因此，我们需要在合适的情况下使用shouldComponentUpdate，同时进行正确的判断，确保组件的渲染行为是正确的和符合预期的。 ### 回答3： shouldComponentUpdate是React组件的一个生命周期方法，它决定了组件是否需要重新渲染。当该方法返回false时，组件将不会进行重新渲染，而是直接使用上一次渲染的结果。 为了提高性能，React使用了虚拟DOM来进行渲染，虚拟DOM可以将多次的渲染操作合并为一次，从而减少了实际DOM操作的次数。而shouldComponentUpdate方法则进一步优化了性能，它允许我们在组件重新渲染之前检查组件的props或state是否已经改变，如果没有改变，那么就可以避免重新渲染，从而节省了资源。 在实际应用中，我们可以根据具体的业务需求来判断是否需要实现shouldComponentUpdate方法。比如，当父组件的props或state发生变化时，子组件将会重新渲染。但是有些情况下，父组件的props或state的变化并不会影响到子组件的展示，这时就可以通过重写shouldComponentUpdate方法来避免不必要的渲染。 实现shouldComponentUpdate方法的一般步骤是先比较新旧的props和state，判断它们是否有改变。可以通过简单的浅层比较来进行判断，如果有改变，则返回true，重新渲染组件；如果没有改变，返回false，避免重新渲染。 需要注意的是，如果在shouldComponentUpdate中使用了不稳定的比较方法，可能会导致组件不渲染或者渲染不正确的问题。因此，在实现shouldComponentUpdate方法时，需要确保比较方法是正确、稳定的。 总之，shouldComponentUpdate是一个非常有用的生命周期方法，能够有效地提高React组件的性能。通过合理地使用该方法，我们可以避免不必要的重新渲染，减少了资源的消耗，提升了应用的性能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小航要继续努力吖！

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值