一七一、React性能优化方式

在 React 中进行性能优化可以通过多种手段来减少渲染次数、优化渲染效率并减少内存消耗。以下是常见的性能优化方法及示例:

1. shouldComponentUpdate

shouldComponentUpdate 是类组件中的生命周期方法,它可以让组件在判断是否需要重新渲染时,避免不必要的渲染:

class MyComponent extends React.Component {shouldComponentUpdate(nextProps, nextState) {// 只有当 props 或 state 发生变化时才重新渲染return nextProps.value !== this.props.value || nextState.count !== this.state.count;}render() {return <div>{this.props.value}</div>;}
}

在这个示例中,组件只有在 valuecount 发生变化时才会重新渲染,这样可以避免不必要的渲染,提高性能。

2. PureComponent

PureComponent 是类组件的替代方案,使用浅层比较 propsstate 来确定是否重新渲染。它相当于内置了 shouldComponentUpdate 的优化:

import React, { PureComponent } from 'react';class MyPureComponent extends PureComponent {render() {return <div>{this.props.value}</div>;}
}

PureComponent 自动实现了浅比较(shallow comparison),如果 propsstate 没有变化,就不会触发重新渲染。适合用于不经常变化的静态内容。

3. React.memo

React.memo 是用于函数组件的高阶组件,类似于 PureComponent,可以帮助防止不必要的渲染。React.memo 通过浅比较来优化函数组件的性能:

const MyFunctionalComponent = React.memo(({ value }) => {return <div>{value}</div>;
});

使用 React.memo 包装后的组件,只有当 value 属性发生变化时才会重新渲染。如果有复杂的 props 检查逻辑,还可以自定义比较函数。

4. 避免使用内联函数

每次渲染时,内联函数会重新创建。可以将内联函数提取出来,减少函数的重新创建次数:

// 不推荐
<button onClick={() => console.log("clicked")}>Click</button>// 推荐
const handleClick = () => console.log("clicked");
<button onClick={handleClick}>Click</button>

提取函数可以减少内存消耗,尤其在组件内频繁传递回调函数的场景下,可以减少不必要的性能开销。

5. 使用 React.Fragment 避免额外标记

React.Fragment 可以用来避免额外的 DOM 元素包裹,减少不必要的 DOM 结构,提升性能:

// 不推荐
<div><h1>Title</h1><p>Content</p></div>// 推荐
<React.Fragment><h1>Title</h1><p>Content</p></React.Fragment>

或简写为 <></>。这不仅优化了 DOM 结构,也减少了浏览器的渲染时间。

6. 使用 Immutable.jsimmer 进行不可变数据操作

React 依赖 propsstate 的不可变性来判断是否需要重新渲染。使用 Immutable.jsimmer 可以确保数据的不可变性:

import { Map } from 'immutable';const state = Map({ value: 1 });
const newState = state.set('value', 2); // 产生新的对象// 或者使用 immer
import produce from 'immer';const newState = produce(state, draft => {draft.value = 2;
});

这种方式可以优化性能,避免重复的对象引用,保证更新的数据结构具有新引用,触发 React 的重新渲染。

7. 懒加载组件

懒加载可以减少初始加载的资源占用,仅在需要时加载组件。可以通过 React.lazySuspense 实现组件的懒加载:

import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function App() {return (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>);
}

懒加载特别适合于大型应用,减少首屏渲染时间,同时将不需要的代码分批加载。

React.Suspense使用介绍

React.Suspense 是 React 用于管理组件加载状态的一个功能,它通常与懒加载组件和数据请求一起使用,确保应用程序在加载数据或组件时提供用户友好的过渡体验。以下是 React.Suspense 的基础介绍及其常见用法。

1. 基本使用

React.Suspense 通过 fallback 属性来指定加载中的占位内容(如加载动画或文本),在懒加载组件或数据尚未加载完成时,显示该占位内容:

import React, { Suspense, lazy } from 'react';const LazyComponent = lazy(() => import('./LazyComponent'));function App() {return (<div><Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense></div>);
}

在此示例中,LazyComponent 会在需要时才被加载,而不是在应用程序加载时就加载。当 LazyComponent 还没加载完成时,fallback 中的内容 <div>Loading...</div> 会显示在页面上。

2. 配合懒加载 (React.lazy)

React.lazy 可以实现组件的动态导入。配合 Suspense,可以实现按需加载,减少初始加载时间:

const LazyComponent = lazy(() => import('./LazyComponent'));

通过 lazy 将组件包装为懒加载模式,这样只有在组件被渲染时,LazyComponent 才会进行导入。

3. Suspense 与数据获取

自从 React 18 起,Suspense 也可以用来处理异步数据请求。在数据获取的场景下,可以与 React Server Components 或者像 React Query 这样的库结合使用。以下是一个简要示例:

import { Suspense } from 'react';function DataFetchingComponent() {const data = fetchData(); // 假设 fetchData 是一个获取数据的函数return <div>{data}</div>;
}function App() {return (<Suspense fallback={<div>Loading data...</div>}><DataFetchingComponent /></Suspense>);
}

在更复杂的应用中,可能会使用缓存库或 React 的新 useTransitionuseDeferredValue 来进一步优化 Suspense 的效果和数据的呈现。

4. 多个 Suspense 组件

在复杂应用中,可能会嵌套或并列多个 Suspense 组件,以分阶段加载不同的部分。每个 Suspense 可以拥有不同的 fallback 内容,从而提供分区加载的用户体验:

function App() {return (<div><Suspense fallback={<div>Loading component A...</div>}><ComponentA /></Suspense><Suspense fallback={<div>Loading component B...</div>}><ComponentB /></Suspense></div>);
}
5. 注意事项
  • Error BoundariesSuspense 只能处理加载状态,但不处理错误。建议结合 Error Boundaries 来捕获和处理可能发生的错误。
  • 支持环境:确保 React 版本支持 Suspense,特别是数据加载的 Suspense 需要 React 18

React.Suspense 的使用可以有效提高应用的响应速度和用户体验,特别是当组件和数据加载较多时。

8. 优化事件绑定方式

在组件上直接绑定事件会导致事件在每次渲染时都重新创建。可以通过在构造函数中绑定或使用 class fields 语法避免这个问题:

class MyComponent extends React.Component {constructor() {super();this.handleClick = this.handleClick.bind(this); // 在构造函数中绑定事件}handleClick() {console.log("clicked");}render() {return <button onClick={this.handleClick}>Click</button>;}
}

或者使用类字段语法:

class MyComponent extends React.Component {handleClick = () => {console.log("clicked");};render() {return <button onClick={this.handleClick}>Click</button>;}
}

这种方法减少了每次渲染时重新创建函数的性能开销。

9. 服务端渲染(Server-Side Rendering)

服务端渲染可以显著提高首屏渲染速度,尤其对 SEO 有较大帮助。使用 Next.js 等框架可以轻松实现 React 的服务端渲染:

// 使用 Next.js
import { useEffect } from 'react';function MyComponent({ data }) {return <div>{data}</div>;
}export async function getServerSideProps() {const data = await fetchData();return { props: { data } };
}export default MyComponent;

服务端渲染的页面在服务器上渲染成 HTML 返回客户端,客户端接收后进行静态内容显示并完成渲染后的数据填充,这样提高了用户的访问速度。

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

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

相关文章

@DeleteMapping和@PostMapping和@GetMapping和Content-Type使用记录

代码例子&#xff0c;有注释大家可以自己试一下 RestController RequestMapping(value "demo") public class TestController {//Content-Type&#xff1a;application/x-www-form-urlencoded;表单提交form-dataPostMapping("/demo1")public String test…

服务器的免密登录和文件传输

在天文学研究中&#xff0c;通常会采用ssh登录服务器&#xff0c;把复杂的计算交给服务器&#xff0c;但是如果你没有进行额外的配置&#xff0c;那么登录服务器&#xff0c;以及和服务器进行文件传输&#xff0c;每次都要输入账号和密码&#xff0c;比较不方便&#xff0c;Win…

挑战Java面试题复习第3天,无人扶我青云志

挑战第3天 Java 创建对象有几种方式&#xff1f;有没有可能两个不相等的对象有相同的hashCode深拷贝和浅拷贝的区别final有哪些用法static有哪些用法3*0.1 0.3 返回值是什么aab与ab有什么区别try catch finally&#xff0c;try里有 return&#xff0c;finally还执行么 Java 创…

【Nas】X-Doc:jellyfin“该客户端与媒体不兼容,服务器未发送兼容的媒体格式”问题解决方案

【Nas】X-Doc&#xff1a;jellyfin“该客户端与媒体不兼容&#xff0c;服务器未发送兼容的媒体格式”问题解决方案 当使用Jellyfin播放视频时出现“该客户端与媒体不兼容&#xff0c;服务器未发送兼容的媒体格式”&#xff0c;这是与硬件解码和ffmpeg设置有关系&#xff0c;具体…

沪深A股上市公司数据报告分析

数据分析报 目录 数据分析报告 1.引言 1.1 背景介绍 1.2 报告目的 1.3 报告范围 1.4 关键术语定义 2. 数据收集与预处理 2.1 数据来源概述 2.2 数据收集过程 2.3 数据预处理步骤 3. 数据可视化 3.1分析地区对公司数量的影响 3.2分析行业分类是否影响公…

Mysql当中的各种log

一、MySQL日志文件类型 重做日志&#xff08;redo log&#xff09;回滚日志&#xff08;undo log&#xff09;二进制日志&#xff08;binlog&#xff09;错误日志&#xff08;errorlog&#xff09;慢查询日志&#xff08;slow query log&#xff09;一般查询日志&#xff08;g…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29目录1. Does your LLM truly unlearn? An embarrassingly simple approach to recover unlearned knowledge摘要研究背景问题…

Java 22新特性概述

Java 22于2024年3月19日发布&#xff0c;共有12个特性&#xff0c;本节就介绍其中相对重要的9个特性&#xff1a; JEP 447&#xff1a;Statements before super(...) (Preview)super&#xff08;...&#xff09; 之前的语句&#xff08;第一次预览&#xff09; JEP 454&#x…

C1.【C++ Cont】准备

目录 1.平台 2.Dev C的使用方法 1.新建项目 2.几个常用按钮 3.修改字体 3.第一个C程序:打印Hello World! 4.注 1.平台 Dev C,VS2022 2.Dev C的使用方法 1.新建项目 选择Console Application控制台应用程序,C项目 项目的后缀dev 默认下创建了一个main.cpp,cpp为c源程…

uniapp编译多端项目App、小程序,input框键盘输入后

项目场景&#xff1a; uniapp编译后的小程序端&#xff0c;app端 在一个输入框 输入消息后&#xff0c;点击键盘上的操作按钮之后键盘不被收起&#xff0c;点击其他发送按钮时&#xff0c;键盘也不被收起。 问题描述 在编译后的app上普通的事件绑定&#xff0c;tap,click在发…

pip命令行安装pytest 一直报错

其实就是切换不同镜像安装 我最终成功的是阿里云镜像 pip install --trusted-host mirrors.aliyun.com pytest 也可以用其他的 pip install -i https://pypi.org/simple pytest # 或者使用其他的镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pytest

版本管理工具切换 | svn切换到gitlab | gitblit 迁移到 gitlab

1.在能够访问SVN服务的电脑上安装 Git-2.47.0-64-bit.exe&#xff08;下载地址&#xff1a; https://github.com/git-for-windows/git/releases/download/v2.47.0.windows.1/Git-2.47.0-64-bit.exe 如果已安装其它版本可以忽略&#xff0c;但是版本必须大于Git 1.6.0&#xff…

【339】基于springboot的新能源充电系统

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;新能源充电系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解…

vue中elementUI的el-select下拉框的层级太高修改设置!

项目场景&#xff1a; 项目中遇到一个问题&#xff0c;下拉框选择之后弹出一个弹出框选择数据再关闭。 问题就出在&#xff0c;我打开下拉框后再弹出弹出框&#xff0c;弹出框的 z-index 层级没有 select 的层级高&#xff0c;导致我弹框弹出了几个下拉框还在弹出框上面显示着…

为什么 C 语言数组是从 0 开始计数的?

C 语言等大多数编程语言的数组从 0 开始而不从 1 开始&#xff0c;有两个原因&#xff1a; 第一&#xff1a;地址计算更方便 C 语言从 0 开始的话&#xff0c;array[i] 的地址就正好是&#xff1a; (array i) 如果是从 1 开始的话&#xff0c;就是 (array i - 1) 多一次计…

`map` 是 JavaScript 数组的一个高阶函数,用于对数组中的每个元素进行操作,并返回一个新的数组

文章目录 map 方法的作用语法示例 具体到你的代码完整代码片段总结 当然可以解释一下 map 方法的作用。 map 方法的作用 map 是 JavaScript 数组的一个高阶函数&#xff0c;用于对数组中的每个元素进行操作&#xff0c;并返回一个新的数组。新数组的每个元素是原数组中对应元…

代码随想录day15 二叉树(3)

文章目录 day11 栈与队列(2)栈与队列的总结 day13 二叉树&#xff08;1&#xff09;day14 二叉树&#xff08;2&#xff09;day15 二叉树&#xff08;3&#xff09; day11 栈与队列(2) 逆波兰表达式求值 https://leetcode.cn/problems/evaluate-reverse-polish-notation/ 逆…

计算机毕业设计Python+大模型股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; Python大模型股票预测系统 …

[山河CTF 2024] week3

一周不在家&#xff0c;这是补的最后一篇。后边的还有0xgame和shctf的末周。打不动了。 Crypto Approximate_n 题目分两部分&#xff0c;flag分两块两个RSA&#xff0c;第1个泄露了4个n_approxkpr的值&#xff0c;后边只泄露了1个。 第1部分利用以前的模板&#xff0c;造格…

基于SSM+VUE园艺生活植物网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档&#xff08;1万字以上&#xff09;开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统&#xff1a;Window操作系统 2、开发工具&#xff1a;IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…