React类组件和函数组件的性能优化

最新推荐文章于 2024-01-17 12:45:50 发布
最新推荐文章于 2024-01-17 12:45:50 发布
阅读量452 收藏
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38099964/article/details/116763840
版权

React类组件和函数组件的性能优化

为什么要做性能优化
React 中，如果组件更新了，会携带它的子孙级组件一起进行更新 虽然组件更新时，会有diff约束DOM更新， 但组件更新时的 diff，也会消耗很多性能

方法
1、 如果是类组件我们可以使用 shouldComponentUpdate 或者PureComponent
https://reactjs.org/docs/react-api.html#reactpurecomponent.
2、函数组件则可以使用 memo
https://reactjs.org/docs/react-api.html#reactmemo.

注意
不管你使用的是哪种优化手段，state 一定是一个不可变值，否则拿不到组件更新前的数据， 也就没有办法进行对比，优化也就无从谈起了

哆姆
关注
专栏目录
React 类组件和函数组件
baidulixueqin的博客
04-19 5114
React 类组件和函数组件 目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题 组件component 一.概念 Element VS Component (元素与组件) //不成文的约定:元素小写，组件大写 const div=React.createElement('div',...) 这是一个React元素(小写) const Div=()=>React.createElement('div',...) 这是一个Rea
React 中的类和函数组件 选择哪一个?
m0_64460287的博客
12-09 1442
每个 React 组件作为 JavaScript 本身都支持允许将一些可重用的代码片段插入到更大的代码片段中的功能。因此，它是一种应用程序的构建块。以这种方式，React 组件将 UI 划分为可重用的部分并返回html。所以它们是 UI 的一种子功能综上所述，什么是 React 组件就很清楚了。它们是 JS 代码与返回 HTML 片段的独立混合。这里 JS 的主要目的是提供业务逻辑并允许创建正确的 HTML，以便可以将其插入dom在 ReactJS 中有两种创建组件的方式：类和函数式组件。
React类组件性能优化之shouldComponentUpdate、React.PureComponent
qq_42335214的博客
12-26 491
前言 这两个性能优化方法是对与类组件来说的。有些时候我们setState时，状态值并没有改变，但是相关的组件还是渲染了。比如如下代码的执行 class Test extends React.Component { state = { value:0 } componentWillUpdate() { console.log('Test 渲染了') } render() { return <div>
【React】列表应用
qq_45677671的博客
04-22 432
文章目录渲染列表组件基础列表组件用 key 提取组件 渲染列表组件 我们使用 Javascript 中的 map() 方法来遍历 numbers 数组。将数组中的每个元素变成 <li> 标签，最后我们将得到的数组赋值给 listItems： const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> ); 我们把整个 listItems
vue 自定义组件切换时刷新
weixin_45977625的博客
09-25 2247
我们在使用vue自定义组件时，常常会遇到切换组件的操作，但是切换组件的时候，如果没有处理好，组件内容就不会刷新。如：标签页下放自定义组件，切换标签时，组件里面的内容不刷新，导致页面停留在上一次的操作。那么我们应该如何来解决这个问题呢？接下来说说我在网上看到的两种方法 一、通过v-if来刷新 当我们在爷辈组件请求后台接口完成后要刷新子孙组件时，我们就可以在爷辈组件使用以下代码,实现子孙组件的刷新（感觉这种方法怪怪的，个人喜欢第二种方法） 上代码： //父组件内容 <child v-if="show"&g
react类组件性能优化-避免不必要的重新渲染
qq_45228255的博客
04-12 2318
react类组件性能优化-避免不必要的重新渲染
react中类组件的相关问题及优化
fangqi20170515的博客
08-20 289
使用PureComponent，PureComponent重写了shouldComponentUpdate(), 只有state或props数据有变化才返回true。只当前组件重新render(), 就会自动重新render子组件，纵使子组件没有用到父组件的任何数据 ==> 效率低。只要执行setState(),即使不改变状态数据, 组件也会重新render() ==> 效率低。比较新旧state或props数据, 如果有变化才返回true, 如果没有返回false；如果只是数据对象内部数据变了, 返回。
react-react面试题之对类组件和函数组件的理解.zip
最新发布
03-20
在React的世界里，类组件和函数组件是两种主要的组件形式，它们各自有着独特的特性和用途，对于理解和掌握React开发至关重要。本篇文章将深入探讨这两种组件的区别、应用场景以及它们之间的联系。 首先，让我们来...
【React】React组件(函数式组件、类组件)
南栀的博客
10-29 925
文章目录React组件介绍函数组件 React组件介绍 React组件可以将UI切分成一些独立的、可复用的部件， 这样有助于设计人员专注于构建每一个单独的部件。 React组件通过Props可以接收任意的输入值 React语法是基于版本ECMAScript6实现的。因此，React组件除了通过JavaScript函数形式实现，还可以通过ES6 Class(类)的形式来实现。 组件就是页面上的一部分，大大小小的各种组件拼在一起就变成了一个完整的页面，就像我们玩的拼图，需要一块一块的拼接在一起才能变成一副
React之类组件项目重构为函数组件
TiAmopanduola的博客
03-04 1461
1、函数组件 数组件接收一个单一的 props 对象并返回了一个React元素 2、类组件 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。 React是单项数据流，父组件改变了属性，那么子组件视图会更新。 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改 组件的属性和状态改变都会更新视图。 3、两者区别 函数组件的性能比类组件的性能要高，因为类组件使用的时候要
【React】组件性能优化、高阶组件
m0_68324632的博客
01-17 1652
React性能优化SCU React更新机制 keys的优化 render函数被调用 shouldComponentUpdate PureComponent shallowEqual方法 高阶组件memo 获取DOM方式refs 如何使用ref ref的类型 受控和非受控组件 认识受控组件 非受控组件 React的高阶组件 认识高阶函数 高阶组件的定义 应用一 – props的增强 应用二 – 渲染判断鉴权 应用三 – 生命周期劫持 高阶函数的意义 ref的转发 portals和fragment Porta
[SpringCloud] 组件性能优化技巧
959
08-14 726
组件的性能调优
常用优化组件和方法- Java程序性能优化--让你的Java程序更快、更稳定
zxsted的专栏
11-25 1483
2.2  常用优化组件和方法 本节主要介绍可用于系统性能优化的组件和性能优化思想，重点介绍缓冲和缓存这两个组件以及它们的使用方法。此外，还将介绍几种常用的优化思想，如池化对象、并行代替串行、负载均衡，以及时间换空间和空间换时间。 2.2.1  缓冲（Buffer）（1） 缓冲区是一块特定的内存区域。开辟缓冲区的目的是通过缓解应用程序上下层之间的性能差异，提高系统的性能。在日常生活
2.9 react 函数式组件 （UI/无状态组件） 性能高 没state可以用 推荐
weixin_45271385的博客
11-19 210
1 定义方法 import React from 'react' function Diy(){ return({ <div> <h1>我就是函数式组件</h1> </div> }) } export default Diy 被引用可传值 props 在（props） 里引入 ({解构},…rest) …rest数据用 rest.xx来使用 ...
react性能优化之组件render优化
jjsnc
02-26 425
举个例子例子说明，父组件触发 render，无论子组件使用到父组件的 state 作为 props 值是否改变，甚至无论子组件是否使用到父组件的 state，都会触发子组件 render class ChildOne extends React.Component { constructor(props) { super(props) } render() { const {value} = this.props; console.l
React函数组件与类组件优劣对比
m0_47670683的博客
04-25 4747
类组件的问题 自从React推出Hooks之后，函数组件写法大行其道，而类组件写法有些日渐式微。为什么要推广函数组件？我觉得有以下三个原因。 原因一，因为this带来的问题 有一个著名的案例展示了类组件this带来的问题，下面我将其本土化复现一下这个案例。 import React from "react" const ProfileFunction: React.FC<{goods:string}> = (props) => { const showMessage = () =
React——函数组件与类组件
weixin_68160847的博客
01-12 1590
函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。 在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件就是一个纯函数，它的输出只由参数props决定，不受其他任何因素影响。
React性能优化的手段有哪些？
weixin_66557048的博客
12-08 261
在前面文章中，我们了解到类组件通过调用setState方法， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染。但是react的默认做法是调用所有组件的render，再对生成的虚拟DOM进行对比（黄色部分），如不变则不进行更新。React凭借virtual DOM和diff算法拥有高效的性能，但是某些情况下，性能明显可以进一步提高。从上图可见，黄色部分diff算法对比是明显的性能浪费的情况。
React函数组件和类组件的区别
热门推荐
前端精髓
06-08 2万+
定义组件有两个要求： 组件名称必须以大写字母开头 组件的返回值只能有一个根元素 函数组件 function Welcome (props) { return <h1>Welcome {props.name}</h1> } ReactDOM.render(<Welcome name='react' />, document.getElementById(...
react类组件和函数组件
03-29
React组件是React应用程序的基本构建块。React组件可以分为两类：类组件和函数组件。 类组件是React中最常见的组件类型，它们是用ES6类语法编写的。类组件具有状态和生命周期方法，可以使用this关键字来访问组件的属性和方法。类组件通常用于构建复杂的组件，因为它们可以处理一些需要状态管理和生命周期管理的复杂逻辑。 函数组件是React中另一种常见的组件类型，它们是用函数语法编写的。函数组件通常比类组件更简单，因为它们没有状态或生命周期方法。函数组件通常用于构建简单的组件，例如按钮或标签。 在React 16.8版本之前，函数组件只能是无状态的，也就是说它们不能存储任何状态。但是，React 16.8版本引入了Hooks，它允许函数组件管理状态和使用生命周期方法，使它们更加灵活和强大。现在，函数组件可以处理更复杂的逻辑，而不需要使用类组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值