React性能优化分享

本篇将介绍在React编码过程中需要注意的性能优化点。鉴于图片懒加载、虚拟滚动列表等已成为广为人知的通用性能优化手段,本文将不再赘述这些内容。

  1. memo

    memo允许组件在 props 没有改变的情况下跳过重新渲染

    默认通过Object.is比较每个prop,可通过第二个参数,传入自定义函数来控制对比过程

    const Chart = memo(function Chart({ dataPoints }) {// ...
    }, arePropsEqual);function arePropsEqual(oldProps, newProps) {return (oldProps.dataPoints.length === newProps.dataPoints.length &&oldProps.dataPoints.every((oldPoint, index) => {const newPoint = newProps.dataPoints[index];return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y;}));
    }
    
  2. useMemo

    在每次重新渲染的时候能够缓存计算的结果,只有传入的参数发生变化后,该计算函数才会重新调用计算新的结果。

    import { useState, useMemo } from "react";function App() {const [count, setCount] = useState(0);const memoizedValue = useMemo(() => {//创建1000位数组const list = new Array(1000).fill(null).map((_, i) => i);//对数组求和const total = list.reduce((res, cur) => (res += cur), 0);//返回计算的结果return count + total;//添加依赖项,只有count改变时,才会重新计算}, [count]);return (<div>{memoizedValue}<button onClick={() => setCount((prev) => prev + 1)}>按钮</button></div>);
    }export default App;
    
  3. useCallback

    缓存函数的引用地址,仅在依赖项改变时才会更新。避免在每次渲染时都创建新的函数,useCallback 返回一个记忆化的回调函数,它只在其依赖项改变时才会改变

    import { useState, memo } from 'react';const App = () => {const [count, setCount] = useState(0);const handleClick = () => {setCount((prev) => prev + 1);};return (<div>{count}<MyButton handleClick={handleClick} /></div>);
    };const MyButton = memo(function MyButton({ handleClick }: { handleClick: () => void }) {console.log('子组件渲染');return <button onClick={handleClick}>按钮</button>;
    });export default App;
    

    点击按钮,可以发现即使子组件使用memo包裹了,但还是更新了,控制台打印出“子组件渲染”。这是因为父组件App每次更新时,函数handleClick每次都返回了新的引用地址,因此对于子组件来说每次传入的都是不一样的值,从而触发重渲染。

    同样的,减少使用通过内联函数绑定事件。每次父组件更新时,匿名函数都会返回一个新的引用地址,从而触发子组件的重渲染

    <MyButton handleClick={() => setCount((prev) => prev + 1)} />
    

    使用useCallback可以缓存函数的引用地址,将handleClick改为

    const handleClick = useCallback(()=>{  setCount(prev=>prev+1)},[])
    

    再点击按钮,会发现子组件不会再重新渲染。

  4. useTransition

    使用useTransition提供的startTransition来标记一个更新作为不紧急的更新。这段任务可以接受延迟或被打断渲染,进而去优先考虑更重要的任务执行

    页面会先显示list2的内容,之后再显示list1的内容

    import { useState, useEffect, useTransition } from "react";const App = () => {const [list1, setList1] = useState<null[]>([]);const [list2, setList2] = useState<null[]>([]);const [isPending, startTransition] = useTransition();useEffect(() => {startTransition(() => {//将状态更新标记为 transition  setList1(new Array(10000).fill(null));});}, []);useEffect(()=>{setList2(new Array(10000).fill(null));},[])return (<>{isPending ? "pending" : "nopending"}{list1.map((_, i) => (<div key={i}>{i}</div>))}-----------------list2{list2.map((_, i) => (<div key={i}>6666</div>))}</>);
    };export default App;
    
  5. useDeferredValue

    可以让我们延迟渲染不紧急的部分,类似于防抖但没有固定的延迟时间

    import { useState, useDeferredValue } from 'react';function SearchPage() {const [query, setQuery] = useState('');const deferredQuery = useDeferredValue(query);// ...
    }
    
  6. Fragment

    当呈现多个元素而不需要额外的容器元素时,使用React.Fragment可以减少DOM节点的数量,从而提高呈现性能

    const MyComponent = () => {return (<React.Fragment><div>Element 1</div><div>Element 2</div><div>Element 3</div></React.Fragment>);
    };
    
  7. 合理使用Context

    Context 能够在组件树间跨层级数据传递,正因其这一独特机制,Context 可以绕过 React.memo 或 shouldComponentUpdate 设定的比较过程。

    也就是说,一旦 Context 的 Value 变动,所有使用 useContext 获取该 Context 的组件会全部 forceUpdate。即使该组件使用了memo,且 Context 更新的部分 Value 与其无关

    为了使组件仅在 context 与其相关的value发生更改时重新渲染,将组件分为两个部分。在外层组件中从 context 中读取所需内容,并将其作为 props 传递给使用memo优化的子组件。

  8. 尽量避免使用index作为key

    在渲染元素列表时,尽量避免将数组索引作为组件的key。如果列表项有添加、删除及重新排序的操作,使用index作为key,可能会使节点复用率变低,进而影响性能

    使用数据源的id作为key

    const MyComponent = () => {const items = [{ id: 1, name: "Item 1" }, { id: 2, name: "Item 2" }, { id: 3, name: "Item 3" }];return (<ul>{items.map(item => (<li key={item.id}>{item.name}</li>))}</ul>);
    };
    
  9. 懒加载

    通过React.lazy和React.Suspense实施代码分割策略,将React应用细分为更小的模块,确保在具体需求出现时才按需加载相应的部分

    定义路由

    import { lazy } from 'react';
    import { createBrowserRouter } from 'react-router-dom';const Login = lazy(() => import('../pages/login'));const routes = [{path: '/login',element: <Login />,},
    ];//可传第二个参数,配置base路径 { basename: "/app"}
    const router = createBrowserRouter(routes);export default router;
    

    引用路由

    import { Suspense } from 'react';
    import { RouterProvider } from 'react-router-dom';import ReactDOM from 'react-dom/client';import router from './router';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);root.render(<Suspense fallback={<div>Loading...</div>}><RouterProvider router={router} /></Suspense>,
    );
    
  10. 组件卸载时的清理

    在组件卸载时清理全局监听器、定时器等。防止内存泄漏影响性能

    import { useState, useEffect, useRef } from 'react';function MyComponent() {const [count, setCount] = useState(0);const timer = useRef<NodeJS.Timeout>();useEffect(() => {// 定义定时器timer.current = setInterval(() => {setCount((count) => count + 1);}, 1000);const handleOnResize = () => {console.log('Window resized');};// 定义监听器window.addEventListener('resize', handleOnResize);// 在组件卸载时清除定时器和监听器return () => {clearInterval(timer.current);window.removeEventListener('resize', handleOnResize);};}, []);return (<div><p>{count}</p></div>);
    }export default MyComponent;
    
  11. Hooks

    使用React Hooks可以更方便的管理组件的状态和副作用,减少组件的复杂度和重复代码。

  12. 使用React.PureComponent , shouldComponentUpdate

    父组件状态的每次更新,都会导致子组件的重新渲染,即使是传入相同props。但是这里的重新渲染不是说会更新DOM,而是每次都会调用diif算法来判断是否需要更新DOM。这对于大型组件例如组件树来说是非常消耗性能的。
    在这里我们就可以使用React.PureComponent , shouldComponentUpdate生命周期来确保只有当组件props状态改变时才会重新渲染

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/28433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

可视化大屏开发系列——页面布局

页面布局是可视化大屏的基础&#xff0c;想要拥有一个基本美观的大屏&#xff0c;就得考虑页面整体模块的宽高自适应&#xff0c;我们自然就会想到具有强大灵活性flex布局&#xff0c;再借助百分比布局来辅助。至此&#xff0c;大屏页面布局问题即可得到解决。 写在前面&#x…

哪些数据管理知识领域需要做到数据全生命周期管理

一、数据生命周期 数据管理、数据治理、数据安全、元数据管理、数据治理等知识领域,都需要按照数据的生命周期开展管理工作。数据生命周期包括计划、设计/启用、创建/获取、存储/维护、使用、增强和处置。详见下图。 1.数据治理生命周期 1)规划:将数据要求与业务战略连接起…

PTA 6 - 20 汉诺塔问题(py 递归)

这道题是一道比较典型的递归问题&#xff0c;他跟斐波那契数列的本质是一样的&#xff0c;大家自己动手推理一下&#xff0c;非常好推 参考代码&#xff1a; def hanoi(n,a,b,c):global stepif n 1:print(a,"->",c)step 1else:hanoi(n-1,a,c,b)print(a,"…

查看npm版本异常,更新nvm版本解决问题

首先说说遇见的问题&#xff0c;基本上把nvm&#xff0c;npm的坑都排了一遍 nvm版本导致npm install报错 Unexpected token ‘.‘install和查看node版本都正确&#xff0c;结果查看npm版本时候报错 首先就是降低node版本… 可以说基本没用&#xff0c;如果要降低版本的话&…

用python纯手写一个日历

一、代码 # 月份名称数组 months ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", &qu…

深度解析RocketMq源码-持久化组件(二) MappedFileQueue

1.绪论 MappedFileQueue是commitLog中最核心的主组件。前面讲解commitLog的时候也曾说过&#xff0c;MappedFileQueue本质上就是一个MappedFile队列&#xff0c;而commitLog操纵Mmapped读写的时候&#xff0c;也是通过MappedFileQueue来实现的。 commitlog和mappedfilequeue和…

git下载路径

第一步 1进入官网&#xff1a;Git - Downloading Package 第二步 根据自己的系统选择对应版本下载

局域网内怎么访问另一台电脑?(2种方法)

案例&#xff1a;需要在局域网内远程电脑 “当我使用笔记本电脑时&#xff0c;有时需要获取保存在台式机上的文件&#xff0c;而两者都连接在同一个局域网上。我的台式机使用的是Windows 10企业版&#xff0c;而笔记本电脑则是Windows 10专业版。我想知道是否可以通过网络远程…

springboot-自定义配置

在springboot项目中&#xff0c;最常用的自定义配置就是&#xff0c;在yml文件中&#xff0c;添加一些配置&#xff0c;然后&#xff0c;通过springboot的集成功能&#xff0c;赋值某个bean。 在yml文件中新建我们需要的配置信息&#xff0c;如下&#xff1a; user:id: 2user…

OpenCV计算形状之间的相似度ShapeContextDistanceExtractor类的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 1.功能描述 ShapeContextDistanceExtractor是OpenCV库中的一个类&#xff0c;主要用于计算形状之间的相似度或距离。它是基于形状上下文&#xff08;Shape Co…

26.1 WEB框架介绍

1. Web应用程序 1.1 应用程序有两种模式 应用程序的架构模式主要分为两种: C/S (客户端/服务器端)和B/S(浏览器/服务器端). * 1. C/S模式, 即客户端/服务器模式(Client/Server Model): 是一种分布式计算模式.它将应用程序的功能划分为客户端和服务器端两部分.在这种模式下, 客…

码住!详解时序数据库不同分类与性能对比

加速发展中的时序数据库&#xff0c;基于不同架构&#xff0c;最流行的类别是&#xff1f; 作为管理工业场景时序数据的新兴数据库品类&#xff0c;时序数据库凭借着对海量时序数据的高效存储、高可扩展性、时序分析计算等特性&#xff0c;一跃成为物联网时代工业领域颇受欢迎的…

C++升级软件时删除老版本软件的桌面快捷方式(附源码)

删除桌面快捷方式其实是删除桌面上的快捷方式文件,那我们如何去删除桌面快捷方式文件呢?软件可能已经发布过多个版本,其中的一些版本的快捷方式文件名称可能做了多次改动,程序中不可能记录每个版本的快捷方式名称,没法直接去删除快捷方式文件。本文就给出一种有效的处理办…

【GO-OpenCV】go-cv快速配置

最近对golang实现目标检测心血来潮&#xff0c;尝试在没有sudo权限的平台配置go-cv,有所发现&#xff0c;索性多个平台都做尝试 安装Go语言&#xff08;Golang&#xff09; 通过包管理器安装&#xff08;适用于Debian/Ubuntu&#xff09;(有点慢) 更新包列表&#xff1a; sud…

Eclipse 内容辅助

Eclipse 内容辅助 1. 引言 Eclipse 是一款广受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;它为各种编程语言提供了强大的开发支持。内容辅助&#xff08;Content Assist&#xff09;是 Eclipse 中的一项核心功能&#xff0c;它通过自动提示和代码补全&#x…

Linux命令2

文章目录 移动文件或目录mv格式 查找命令/文件存放位目录置which格式 查找文件或目录find格式查找类型多个查找条件逻辑运算符 移动文件或目录 mv 将文件或者目录移动到指定的位置 如果目标的位置和源位置相同&#xff0c;相当于改名操作 跨目录移动相当于window的剪切 格式…

eNSP学习——帧中继基本配置

目录 主要命令 基本原理 实验目的 实验内容 实验拓扑 实验编址 实验步骤 1、基本配置 2、静态与动态映射的配置 3、子接口配置和静态路由 主要命令 [R1]int s1/0/0 [R1-Serial1/0/0]link-protocol fr //配置链路层协议为FR Warning: The encapsulation protocol…

C++ 算法教程

归并排序 #include<iostream> using namespace std; template <class T> void Merge(T data[],int start,int mid,int end) {int len1 mid - start 1, len2 end - mid;int i, j, k;T* left new int[len1];T* right new int[len2];for (i 0; i < len1; i)…

TF-IDF(Term Frequency-Inverse Document Frequency)

TF-IDF&#xff08;Term Frequency-Inverse Document Frequency&#xff09;是一种常用于信息检索和文本挖掘的统计方法&#xff0c;用以评估一个词语对于一个文件集或一个语料库中的其中一份文件的重要程度。它的重要性随着词语在文本中出现的次数成正比增加&#xff0c;但同时…

【SOEM主站】EtherCAT主站时钟偏移补偿

在进行EtherCAT主从通讯测试时&#xff0c;比较容易在DC配置出现错误&#xff0c;特别是使用到从站DC模式时&#xff0c;有时会报同步错误&#xff0c;有时即使没报错误伺服从站运行过程中也会出现电机轴的抖动。引起同步错误其中一个原因就是主站发送数据帧时间存在较大的抖动…