react中PureComponent的理解与使用

最新推荐文章于 2024-05-08 10:57:53 发布
最新推荐文章于 2024-05-08 10:57:53 发布
阅读量1.1k 收藏
点赞数
分类专栏： react 文章标签： react.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45936353/article/details/132089699
版权

一、作用

它是一个纯组件，会做一个数据的浅比较，当props和state没改变的时候，不会render重新渲染， 改变后才会render重新渲染，提高性能。

二、使用

三、注意

它不能和shouldComponentUpdate生命周期同时使用。因为它是一个浅比较，所以如果是对象引用，就算props或state发生改变了，它也不会render重新渲染，所以应慎用，一般用于展示组件

思学QAQ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
知识梳理------React组件性能优化
杜杜的博客
07-20 320
React 组件性能优化最佳实践 React 组件性能优化的核心是减少渲染真实 DOM 节点的频率，减少 Virtual DOM 比对的频率。 1. 组件卸载前进行清理操作 在组件中为 window 注册的全局事件, 以及定时器, 在组件卸载前要清理掉, 防止组件卸载后继续执行影响应用性能. 需求：开启定时器然后卸载组件，查看组件中的定时器是否还在运行。 import React, { useState, useEffect } from "react" import ReactDOM from "reac
react学习—PureComponent纯组件
xun__xing的博客
05-14 534
PureComponent纯组件一、PureComponent纯组件1、任务列表2、添加任务3、性能优化1.使用PureComponent 一、PureComponent纯组件 纯组件用于避免不必要的渲染（render函数），提高效率 1、任务列表 //Task.js import React, { Component } from 'react' import PropTypes from "prop-types" import './Task.css' export default class Tas
react知识点之Component和PureComponent深度解析
小糖豆
08-21 6057
Component和PureComponent的区别 介绍 React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。 在PureComponent中，如果包含比较复杂的数据结构，可能会因深层的数据不一致而产生错误的否定判断，导致界面得不到更新。 如果定义了 shouldComponentUpdate()，无论组件是否是 PureCompone
React 第二十五章 React.PureComponent
最新发布
aXin_li的博客
05-08 366
是一个帮助优化性能的组件，通过浅层比较属性和状态的值来避免不必要的组件渲染。但需要注意深层比较的情况，以确保组件能够正常地重新渲染。
React PureComponent介绍与使用
Boboy
03-18 6040
前言 介绍之前可以先看下shouldComponentUpdate介绍 PureComponent介绍 React15.3中新加了一个 PureComponent 类，顾名思义， pure 是纯的意思， PureComponent 也就是纯组件，取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一，易于实施，只要把继承类从 Com...
React Component和Purecomponent区别
weixin_59525879的博客
12-28 517
PureComponent是一个优化过的组件类，它默认实现了一个浅比较的shouldComponentUpdate函数。当组件的props或state发生变化时，PureComponent会对新旧props和state进行浅比较，如果没有变化，则不重新渲染组件。Component是一个普通的组件类，它的shouldComponentUpdate函数默认返回true，意味着每次组件的props或state发生变化时都会重新渲染组件。这可能会导致性能问题，特别是当组件包含大量子组件时。
react实现pure render时bind(this)隐患需注意!
08-31
在React开发中，纯渲染（Pure Render）是一种优化性能的重要技术。它的核心思想是如果一个组件的props和...同时，结合使用`shouldComponentUpdate`或`React.PureComponent`等优化策略，可以使你的React应用更加高效。
简谈创建React Component的几种方式
12-03
前言 当我们谈起React的时候，...后来在阅读别人代码的时候又发现了PureComponent以及完全没有继承，仅仅通过返回JSX语句的方式创建组件的方式。 下面这篇文章，就将逐一介绍这几种创建组件的方法，分析其特点，以及如
React源码思维导图
05-31
`PureComponent`是React中的一个基础组件，它实现了浅比较来优化性能。在`shouldComponentUpdate`生命周期方法中，它会比较当前的`props`和`state`与新的值，只有当它们不相等时才会触发组件的更新。 `memo`功能...
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
10-16
在`Animation.jsx`中，我们创建一个`PureComponent`，并管理`isInnerShow`（表示元素是否已挂载）和`animationClass`（用于存储当前动画类名）两个状态： ```jsx // Animation.jsx import React from 'react'; ...
作为老司机使用 React 总结的 11 个经验教训
08-30
7. **避免不必要的重新渲染** - 通过PureComponent或shouldComponentUpdate方法限制组件的更新，防止不必要的渲染，提高性能。 8. **使用prop drilling的替代方案** - 当props需要穿过多层组件传递时，可考虑使用...
面试题-React(十一)：性能优化之PureComponent和memo
weixin_42560424的博客
10-10 269
随着应用的复杂性增加，React组件的渲染可能成为性能瓶颈。为了确保应用的高性能和流畅用户体验，我们需要采取一些措施来优化组件的渲染。都基于浅比较的原理，只有在状态或属性发生实际变化时才会触发重新渲染。但需要注意的是，当属性包含复杂的对象或数组时，浅比较可能会失效。包裹的函数组件，它会自动执行浅比较，从而避免不必要的重新渲染。方法，实现了一个自动的浅比较，判断组件是否需要重新渲染。是React提供的一个用于性能优化的组件类。属性时，它会自动避免不必要的重新渲染。是用于函数组件的高阶组件，它类似于。
PureComponent使用方法
前端精髓
05-06 5344
React.PureComponent React.PureComponent 类似于 React.Component。它们的不同之处在于React.Component 没有实现 shouldComponentUpdate()，但是 React.PureComponent实现了它。采用对属性和状态用浅比较的方式。 import React, { Component, PureComponent }...
react中对PureComponent的深度认识
好好学习
05-10 931
谈react优化其中最重要的一个组件就是PureComponent，主要的特点就是当数据即使发生深层次的变化，PureComponent也不会更新而且影响到子组件。 那PureComponent和Component的之间的联系在哪里，以下是对react框架代码的一些理解。 一、都是从React.js中暴露出来, 删除多此次不相关代码 import {Component, PureComponent} from './ReactBaseClasses'; const React = { Childre
React16源码: Component与PureComponent源码实现
Wang的专栏
12-31 1301
Component 就是组件, 这个概念依托于最直观的在react上的一个表现，那就是 `React.Component`，我们写的组件大都是继承于 `React.Component` 这个baseClass 而写的类
React 之 PureComponent
cmchenmei的博客
01-17 262
用于避免重复渲染（执行render函数），提高效率 以下面的示例： // taskContainer 组件 class TaskContainer extends Component { state = { taskList: [] }; componentDidMount() { const task = []; for (let i = 0; i &lt...
React（四）：事件总线、setState的细节、PureComponent、ref
weixin_42044763的博客
03-02 1426
原因是：这里回调的参数state是上一个合并状态的state，所以是可以在上一个的基础上做操作的！上面解决了这两个问题，但是真的是非常的麻烦，如果有多个数据，往下层也传了多个数据，那么我们要对每一个数据都写一个判断吗？所以我们一般不要直接去修改state中的数据，要修改内层数据的话，最好整个替换掉，给个新地址。2、第二个问题，如果子组件没有数据的改变，那么就不需要跟着父组件重新执行render函数了，我们同样可以用。1、刚才提到的，第一个参数是对象，第二个参数是回调，在第二个回调中，可以获取。
React性能优化：PureComponent的使用原则
hyupeng1006的博客
10-27 655
React15.3中新加了一个PureComponent类，取代之前的PureRenderMixin , PureComponent可以进行React性能优化，减少不必要的render渲染次数，使用时只要把继承类从Component换成PureComponent。 PureComponent的原理是继承了Component类，自动加载shouldComponentUpdate函数，当组件更新时，shouldComponentUpdate对props和state进行了一层浅比较，如果组件的props和sta
React性能优化-PureComponent、React.memo、useMemo、useCallback
EmotionComputer
06-27 393
参考官网链接：https://zh-hans.reactjs.org/docs/react-api.html#overview React.PureComponent 用在class组件中用： React.PureComponent 与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。 如果赋予 React
react中purecomponent
04-11
PureComponent是React中的一个组件类，它继承自Component类，并具有浅比较(props和state)的特性。当组件的props或state发生改变时，PureComponent会通过浅比较判断组件是否需要重新渲染，从而提高组件的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值