当前位置: 首页 > news >正文

深入解析React性能优化三剑客:React.memo、useMemo与useCallback

目录

  1. 渲染机制基础

    • React的渲染流程解析
    • 组件重渲染的根本原因
    • 性能优化的核心目标
  2. React.memo深度解析

    • 组件级缓存原理
    • 浅比较机制详解
    • 自定义比较函数实现
  3. useMemo核心技术

    • 值缓存机制剖析
    • 引用稳定性控制
    • 复杂计算场景实战
  4. useCallback终极指南

    • 函数缓存本质
    • 闭包陷阱解决方案
    • 事件处理最佳实践
  5. 三者的黄金组合

    • 联合使用场景分析
    • 性能优化效果对比
    • 常见误区与反模式
  6. 性能监控方法论

    • React DevTools实战技巧
    • 渲染次数可视化分析
    • 真实案例性能调优

一、渲染机制基础

1.1 React渲染流程

function App() {const [count, setCount] = useState(0);return (<div><Counter value={count} /><button onClick={() => setCount(c => c+1)}>+</button></div>);
}

当点击按钮时:

  1. App组件触发重新渲染
  2. Counter组件默认会重新渲染
  3. DOM进行差异化更新(Virtual DOM Diff)

1.2 重渲染的根本原因

触发条件示例场景
组件自身状态变化useState/useReducer更新
父组件重新渲染父组件state/props变化
Context值变化Provider的value更新
Hooks依赖项变化useEffect等依赖数组变化

1.3 优化目标矩阵

优化维度目标值测量工具
渲染次数最小化不必要渲染React DevTools
计算复杂度减少重复计算Chrome Performance
内存占用避免无效对象创建Chrome Memory
交互响应时间保持60FPS流畅度Chrome Rendering

二、React.memo深度解析

2.1 基本用法

const MemoComponent = React.memo(({ data }) => <div>{data}</div>,(prevProps, nextProps) => prevProps.data.id === nextProps.data.id
);

2.2 对比机制原理

function shallowCompare(prev, next) {if (Object.is(prev, next)) return true;const keys1 = Object.keys(prev);const keys2 = Object.keys(next);if (keys1.length !== keys2.length) return false;return keys1.every(key => Object.is(prev[key], next[key]));
}

2.3 经典使用场景

// 大型列表项组件
const ListItem = React.memo(({ item }) => (<li>{item.content}</li>
));// 纯展示型组件
const UserCard = React.memo(({ user }) => (<div><Avatar url={user.avatar} /><h2>{user.name}</h2></div>
));

三、useMemo核心技术

3.1 核心语法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b),[a, b]
);

3.2 性能对比实验

// 未优化
function Component() {const data = processLargeArray(props.items); // 每次渲染重新计算
}// 优化后
function Component() {const data = useMemo(() => processLargeArray(props.items),[props.items]);
}

性能提升幅度
数组长度10,000时,渲染时间从200ms降至5ms

3.3 引用稳定性控制

const config = useMemo(() => ({threshold: 0.5,timeout: 1000}),[]
);useEffect(() => {observer.subscribe(config);
}, [config]);

四、useCallback终极指南

4.1 基本形态

const memoizedCallback = useCallback(() => doSomething(a, b),[a, b]
);

4.2 闭包陷阱破解

function Counter() {const [count, setCount] = useState(0);// 错误示例:闭包陷阱const badIncrement = () => setCount(count + 1);// 正确方案const goodIncrement = useCallback(() => setCount(c => c + 1),[]);
}

4.3 事件处理优化

const Form = () => {const [text, setText] = useState('');// 未优化:每次渲染新建函数const handleSubmit = () => { /*...*/ };// 优化后const handleSubmit = useCallback(() => {console.log('Submitted:', text);}, [text]);
}

五、三者的黄金组合

5.1 联合优化案例

const Parent = () => {const [state, setState] = useState();const data = useMemo(() => transformData(state),[state]);const handleAction = useCallback(() => updateData(state),[state]);return <Child data={data} onAction={handleAction} />;
}const Child = React.memo(({ data, onAction }) => (/* 渲染逻辑 */
));

5.2 性能对比数据

优化策略渲染时间(ms)内存占用(MB)
无优化12085
单独React.memo7580
联合优化4575

5.3 常见反模式

// 错误1:无意义的memoization
const value = useMemo(() => 42, []); // 直接使用常量更好// 错误2:过度嵌套
const fn = useCallback(useMemo(() => () => doSomething(), []),[]
);// 错误3:依赖项缺失
const [count] = useState(0);
const badCompute = useMemo(() => count * 2, [] // 缺少count依赖
);

六、性能监控方法论

6.1 DevTools实战

  1. 打开Profiler录制渲染过程
  2. 分析火焰图中的组件渲染耗时
  3. 查看组件为什么重新渲染的提示

6.2 性能优化检查表

  1. 大型列表是否使用React.memo
  2. 复杂计算是否用useMemo缓存
  3. 事件处理函数是否用useCallback包裹
  4. Context消费组件是否拆分层级
  5. 是否避免在渲染中创建新对象

6.3 真实案例优化

优化前

  • 商品列表页滚动卡顿
  • 每次输入筛选条件都会冻结1秒

优化步骤

  1. 使用React.memo包裹列表项组件
  2. 用useMemo缓存筛选结果
  3. 用useCallback固定回调函数
  4. 虚拟滚动优化渲染数量

优化后

  • 滚动帧率从15FPS提升到60FPS
  • 筛选响应时间从1000ms降到50ms

总结与最佳实践

7.1 三者的核心区别

特性React.memouseMemouseCallback
优化目标组件渲染值计算函数引用
适用对象函数组件计算结果函数对象
比较方式浅比较/自定义比较依赖数组依赖数组
内存消耗

7.2 使用决策树

简单Props
复杂Props
需要优化组件渲染?
Props是否复杂?
使用React.memo
React.memo+自定义比较
需要缓存计算值?
使用useMemo
需要稳定函数引用?
使用useCallback

7.3 黄金法则

  1. 按需优化:不要过早优化,先测量后改进
  2. 组合使用:React.memo + useMemo + useCallback
  3. 关注依赖:正确设置依赖数组,避免过时闭包
  4. 平衡取舍:优化带来的复杂度增加需控制在合理范围
  5. 持续监控:使用性能工具验证优化效果

通过合理运用这三大利器,开发者可以将React应用的性能提升一个数量级。但切记:性能优化的最高境界是让优化本身变得不必要,良好的组件设计和状态管理才是根本。

相关文章:

深入解析React性能优化三剑客:React.memo、useMemo与useCallback

目录 渲染机制基础 React的渲染流程解析组件重渲染的根本原因性能优化的核心目标 React.memo深度解析 组件级缓存原理浅比较机制详解自定义比较函数实现 useMemo核心技术 值缓存机制剖析引用稳定性控制复杂计算场景实战 useCallback终极指南 函数缓存本质闭包陷阱解决方案事…...

Java高频面试之SE-23

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天又来了&#xff01;哈哈哈哈哈嗝&#x1f436; Java 中的 Stream 是 Java 8 引入的一种全新的数据处理方式&#xff0c;它基于函数式编程思想&#xff0c;提供了一种高效、简洁且灵活的方式来…...

SOC-ATF 安全启动BL31流程分析(3)

一、BL31启动流程 与bl1和bl2不同&#xff0c;bl31包含两部分功能&#xff0c;在启动时作为启动流程的一部分&#xff0c;执行软硬件初始化以及启动bl32和bl33镜像。在系统启动完成后&#xff0c;将继续驻留于系统中&#xff0c;并处理来自其它异常等级的smc异常&#xff0c;以…...

计算机三级网络技术备考

#subtotal 1Mbps1024kb128KB12.8M/s #1024B1KB 1024KB1MB 1024MB1GB #路由器的5G信号和平常的波长不同&#xff08;5G的穿墙性能差&#xff09; #局域网LAN&#xff08;一公里内——构成集线机、交换机、同轴电缆&#xff09; #城域网MAN&#xff08;几公里到几十公里——光…...

Linux红帽:RHCSA认证知识讲解(四)修改远程配置文件,取消root禁用,便于使用root身份远程

Linux红帽&#xff1a;RHCSA认证知识讲解&#xff08;四&#xff09;修改远程配置文件&#xff0c;取消root禁用&#xff0c;便于使用root身份远程 前言一、远程连接的用途和原因二、通过 ssh 远程登陆系统三、默认限制及解决方案&#xff08;一&#xff09;非常规方法一&#…...

【笔记ing】每天50个英语词汇

ex- e-out exclude 排外&#xff0c;排除 expect 期待&#xff0c;期望 单词构成&#xff1a; 前缀&#xff08;prefix&#xff09;&#xff1a;情感&#xff08;emotion&#xff09;方向&#xff08;orientation&#xff09; 词根&#xff08;root&#xff09;&#xf…...

Linux 基本开发工具的使用(yum、vim、gcc、g++、gdb、make/makefile)

文章目录 Linux 软件包管理器 - yum理解什么是软件包和yum如何查看/查找软件包如何安装软件如何实现本地机器和云服务器之间的文件互传如何卸载软件 Linux 编辑器 - vim 的使用vim 的基本概念vim 的基本操作vim 命令模式各命令汇总vim 底行模式各命令汇总vim 的简单配置 Linux …...

idea创建第一个springboot程序

说明&#xff1a; 我计划用idea&#xff0c;创建第一个springboot程序&#xff0c;但是作为新手完全不会弄&#xff0c;今天我就亲自尝试一边&#xff0c;并且出一期详细&#xff0c;完美的教程&#xff0c;亲测可以运行 step1. 点击file &#xff0c; 选new&#xff0c; 选…...

python 使用 venv 创建虚拟环境 (VSCode)

Python 自带了一个名为 venv 的模块&#xff0c;可以用来创建虚拟环境。这是 Python 官方推荐的方式&#xff0c;不需要额外安装 Anaconda 或其他工具。 假设项目名为myproject&#xff0c;进入到项目目录 cd myproject 创建虚拟环境 python3 -m venv 虚拟环境名&#xff08…...

组态软件在物联网中的应用

随着物联网的快速发展&#xff0c;组态软件在物联网中的应用也越来越广泛。组态软件是一种用于创建和管理物联网系统的可视化工具&#xff0c;它能够将传感器、设备和网络连接起来&#xff0c;实现数据的采集、分析和可视化。本文将探讨组态软件在物联网中的应用&#xff0c;并…...

字节火山引擎-大模型声音复刻,流式语音合成接口

字节火山引擎-大模型声音复刻&#xff0c;流式语音合成接口 参考文档&#xff1a;火山引擎-大模型声音复刻文档 官网给出的示例代码有bug&#xff0c;这里已经修改了 创建应用 声音复刻大模型页面查看应用&#xff0c;获取接口调用需要的参数 注意调用tts接口时候需要三个参数…...

QT:Graphics View的坐标系介绍

在 Qt 的 Graphics View 框架中&#xff0c;存在三种不同的坐标系&#xff0c;分别是 物品坐标系&#xff08;Item Coordinates&#xff09;、场景坐标系&#xff08;Scene Coordinates&#xff09; 和 视图坐标系&#xff08;View Coordinates&#xff09;。这三种坐标系在图形…...

轻松搭建:使用Anaconda创建虚拟环境并在PyCharm中配置

一、使用Anaconda创建虚拟环境 1. 安装Anaconda 2..conda常用的命令 3. 创建虚拟环境-以搭建MachineVision为例 4. 激活虚拟环境 5. 安装依赖包 二、PyCharm配置环境 在进行Python项目开发时&#xff0c;合理的环境管理是必不可少的&#xff0c;特别是当你在多个项目中…...

Unity TMPro显示中文字体

TMP默认的字体只能显示英语&#xff0c;那么怎么显示中文呢 1、找到支持中文的字体文件 在c盘搜索Fonts文件夹有很多支持中文的字体文件 我这里选择雅黑 PS.双击打开发现里面有粗体细体普通三个版本&#xff0c;也可以只导入一个版本进去 2、将其拖入到unity Assets里面 3…...

【嵌入式原理设计】实验五:远程控制翻盖设计

目录 一、实验目的 二、实验环境 三、实验内容 四、实验记录及处理 五、实验小结 六、成果文件提取链接 一、实验目的 熟悉和掌握舵机及串口控制方式 二、实验环境 Win10ESP32实验开发板 三、实验内容 1、熟悉舵机的控制方式&#xff1b; 2、用串口发…...

矩阵乘积态简介

定义 矩阵乘积态&#xff08;Matrix Product State, MPS&#xff09;是一种用于表示量子多体系统的强大工具&#xff0c;特别是在一维系统中。MPS 是一种张量网络状态&#xff0c;它通过将全局量子态分解为一系列局部张量的乘积来有效地表示量子态。 注释&#xff1a; 量子态表…...

国自然面上项目|基于肺癌精准靶向治疗的基因影像组学研究|基金申请·25-02-26

小罗碎碎念 今天和大家分享一个国自然面上项目&#xff0c;执行年限为2019.01&#xff5e;2022.12&#xff0c;直接费用为57万元。 项目旨在解决肺癌靶向治疗耐药问题&#xff0c;通过整合多组学和影像组学技术构建预测模型。 研究期间&#xff0c;对非小细胞肺癌 CT 影像组学…...

OA办公系统自动渗透测试过程

目录 一、下载环境源码 二、部署环境 三、测试 XSS漏洞 SQL注入 文件上传漏洞 一、下载环境源码 OA源码打包地址: https://download.csdn.net/download/weixin_43650289/90434502?spm=1001.2014.3001.5503 二、部署环境...

Fisher信息矩阵(Fisher Information Matrix,简称FIM)

Fisher信息矩阵简介 Fisher信息矩阵&#xff08;Fisher Information Matrix&#xff0c;简称FIM&#xff09;是统计学和信息理论中的一个重要概念&#xff0c;广泛应用于参数估计、统计推断和机器学习领域。它以统计学家罗纳德费希尔&#xff08;Ronald Fisher&#xff09;的名…...

nginx反向代理以及负载均衡(常见案例)

一、nginx反向代理 1、什么是代理服务器&#xff1f; 代理服务器&#xff0c;客户机在发送请求时&#xff0c;不会直接发送给目的主机&#xff0c;而是先发送给代理服务器&#xff0c;代理服务接受客户机请求之后&#xff0c;再向主机发出&#xff0c;并接收目的主机返回的数据…...

LabVIEW形状误差测量系统

在机械制造领域&#xff0c;形状与位置公差&#xff08;GD&T&#xff09;直接影响装配精度与产品寿命。国内中小型机加工企业因形状误差导致的返工率高达12%-18%。传统测量方式存在以下三大痛点&#xff1a; ​ 设备局限&#xff1a;机械式千分表需人工读数&#xff0c;精度…...

将VsCode变得顺手好用(1

目录 设置中文 配置调试功能 提效和增强相关插件 主题和图标相关插件 创建js文件 设置中文 打开【拓展】 输入【Chinese】 下载完成后重启Vs即可变为中文 配置调试功能 在随便一个位置新建一个文件夹&#xff0c;用于放置调试文件以及你未来写的代码&#xff0c;随便命名但…...

排序模板——C++

0.排序模板题目 题目描述 将读入的 N 个数从小到大排序后输出。 输入格式 第一行为一个正整数 N。 第二行包含 N 个空格隔开的正整数 ai​&#xff0c;为你需要进行排序的数。 输出格式 将给定的 N 个数从小到大输出&#xff0c;数之间空格隔开&#xff0c;行末换行且无空格。 …...

HTTP/HTTPS 服务端口监测的简易实现

一 HTTP/HTTPS 服务端口监测的简易实现方法 在当今快节奏的工作环境中&#xff0c;工作忙碌成为了许多职场人的常态。就拿我们团队最近经历的事情来说&#xff0c;工作任务一个接一个&#xff0c;大家都在各自的岗位上争分夺秒地忙碌着。然而&#xff0c;就在这样高强度的工作…...

快速入门——状态管理VueX

Vuex介绍 状态管理 每一个Vuex应用的核心都是一个store&#xff0c;与普通的全局对象不同的是&#xff0c;基于Vue数据与视图绑定的特点&#xff0c;当store中的状态发生变化时&#xff0c;与之绑定的视图也会被重新渲染。 store中的状态不允许被直接修改&#xff0c;改变sto…...

C# 根据Ollama+DeepSeekR1开发本地AI辅助办公助手

在上一篇《访问DeepSeekR1本地部署API服务搭建自己的AI办公助手》中&#xff0c;我们通过通过Ollama提供的本地API接口用Python实现了一个简易的AI办公助手&#xff0c;但是需要运行Py脚本&#xff0c;还比较麻烦&#xff0c;下面我们用C#依据Ollama提供的API接口开发一个本地A…...

Flutter - 基础Widget

Flutter 中万物皆 Widget&#xff0c;基础Widget 同步对应 Android View. 普通文本 Text /*** 控制文本样式统一使用 style:TextStyle, 例&#xff1a;fontSize(字体大小),color(颜色),shadows(阴影)等等* 控制文本布局需单独设置&#xff1a;* textAlign(文不对齐方式)* te…...

Tips :仿真竞争条件 指的是什么?

文章目录 **为什么会出现仿真竞争条件?****典型场景举例****System Verilog 如何解决竞争条件?****1. 使用 `program` 块隔离测试平台****2. 使用 `clocking` 块明确时序关系****3. 非阻塞赋值(`<=`)的合理使用****竞争条件的根本原因****总结****代码结构****1. 设计模…...

【Elasticsearch】script_fields 和 runtime_fields的区别

script_fields和runtime_fields都是 Elasticsearch 中用于动态计算字段值的功能&#xff0c;但它们在实现方式、应用场景和性能表现上存在显著区别。以下是两者的详细对比&#xff1a; 1.定义和应用场景 • script_fields&#xff1a; • 定义&#xff1a;通过 Painless 脚本…...

达梦DTS数据迁移工具生产篇(MySQL->DM8)

本文章使用的DTS工具为 2024年9月18日的版本&#xff0c;使用的目的端DM8数据库版本为2023年12月的版本&#xff0c;注意数据库版本和DTS版本之间跨度不要太大&#xff0c;以免出现各种兼容性的报错。若发现版本差距过大时&#xff0c;请联系达梦技术服务工程师处理。 1. 迁移…...

【安卓逆向】逆向APP界面UI修改再安装

1.背景 有一客户找到我&#xff0c;说能不能把APP首页的底部多余界面去掉。 逆向实战 想要去除安卓应用软件中的内容&#xff0c;需要对APP逆向进行修改再打包。 通过工具 MIT管理器工具 提取APK包&#xff0c;点击apk文件&#xff0c;点击查看反编译apk。 搜索关键字。这里关键…...

企业级大模型应用的Java-Python异构融合架构实践

一、后端语言相关技术生态 Python语言 Python在AI计算领域拥有全面的生态支持&#xff1a; 底层工具库: Pandas、NumPy、SciPy、Matplotlib深度学习框架: PyTorch、TensorFlow领域专用框架: HuggingFace Transformers&#xff08;社区生态为主&#xff09; 常见Python框架 …...

深度剖析数据中台架构图,铸造数字文明的基石

🔥🔥 AllData大数据产品是可定义数据中台,以数据平台为底座,以数据中台为桥梁,以机器学习平台为中层框架,以大模型应用为上游产品,提供全链路数字化解决方案。 ✨奥零数据科技官网:http://www.aolingdata.com ✨AllData开源项目:https://github.com/alldatacenter/a…...

python实现基于文心一言大模型的sql小工具

一、准备工作 注册与登录&#xff1a; 登录百度智能云千帆控制台&#xff0c;注册并登录您的账号。 创建千帆应用&#xff1a; 根据实际需求创建千帆应用。创建成功后&#xff0c;获取AppID、API Key、Secret Key等信息。如果已有千帆应用&#xff0c;可以直接查看已有应用的AP…...

飞腾腾锐D2000 + OpenHarmony 4.1release部署deepseek大模型

简介 1.1 飞腾腾锐D2000 飞腾腾锐D2000是一款面向桌面应用的高性能通用处理&#xff0c;集成8个飞腾自主研发的高能效处理器核FTC663&#xff0c;兼 容64位ARMv8指令集并支持ARM64和ARM32两种执行模式&#xff0c;支持单精度、双精度浮点运算指令和ASIMD处理 指令&#xff0c;主…...

进程概念、PCB及进程查看

文章目录 一.进程的概念进程控制块&#xff08;PCB&#xff09; 二.进程查看通过指令查看进程通过proc目录查看进程的cwd和exe获取进程pid和ppid通过fork()创建子进程 一.进程的概念 进程是一个运行起来的程序&#xff0c;而程序是存放在磁盘的&#xff0c;cpu要想执行程序的指…...

Oracle 数据库基础入门(一):搭建数据管理基石

在当今数字化时代&#xff0c;数据库作为数据管理的核心工具&#xff0c;对于各类应用系统的开发至关重要。尤其是在 Java 全栈开发领域&#xff0c;掌握一款强大的数据库技术是必备技能。Oracle 数据库以其卓越的性能、高度的可靠性和丰富的功能&#xff0c;在企业级应用中广泛…...

selenium如何实现,开启浏览器的开发者工具模式,并且开启 toggle移动设备模拟模式

核心实现代码 pythonCopy Code from selenium import webdriver from selenium.webdriver.chrome.options import Options def enable_devtools_with_toggle(): options Options() # 强制开启开发者工具 options.add_argument("--auto-open-devtools-for-tabs&quo…...

分布式锁实现(数据库+Redis+Zookeeper)

1. 数据库分布式锁 实现原理 基于唯一索引&#xff1a; 创建一张锁表&#xff0c;通过唯一索引&#xff08;如锁名称&#xff09;保证互斥性。 加锁&#xff1a;插入一条记录&#xff0c;成功则获取锁&#xff0c;失败则重试。 解锁&#xff1a;删除对应记录。 乐观锁&…...

七、Spring Boot:初识与项目搭建

深入解析 Spring Boot&#xff1a;初识与项目搭建 Spring Boot 是基于 Spring Framework 的开源 Java 基础框架&#xff0c;旨在简化 Spring 应用的开发过程。它通过“约定优于配置”的理念&#xff0c;极大地减少了开发中的配置工作&#xff0c;同时提供了“开箱即用”的功能…...

记录一下用docker克隆某授权制定ip的环境恢复

#首先还是要看日志根据问题去进行调整 java web的老项目配置文件一般是 bin启动里边的脚本 还有conf中的 xml配置文件 再或者就是classes中的配置文件,再或者就是lib中的jar包中的配置文件 1.安装docker 2.创建docker网络 docker network create --driver bridge --subnet…...

【含文档+PPT+源码】基于微信小程序的健康饮食食谱推荐平台的设计与实现

项目介绍 本课程演示的是一款基于微信小程序的健康饮食食谱推荐平台的设计与实现&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本…...

主流虚拟化技术讲解

目录 VMware vSphere Microsoft Hyper-V KVM&#xff08;Kernel-based Virtual Machine&#xff09; OpenStack VMware vSphere 架构与组件&#xff1a;VMware vSphere 是基于裸金属虚拟化技术的平台&#xff0c;核心组件包括 ESXi 主机和 vCenter Server。ESXi 是虚拟化层…...

java开发——为什么要使用动态代理?

举个例子&#xff1a;假如有一个杀手专杀男的&#xff0c;不杀女的。代码如下&#xff1a; public interface Killer {void kill(String name, String sex);void watch(String name); }public class ManKiller implements Killer {Overridepublic void kill(String name, Stri…...

kotlin 知识点一 变量和函数

在Kotlin中定义变量的方式和Java 区别很大&#xff0c;在Java 中如果想要定义一个变 量&#xff0c;需要在变量前面声明这个变量的类型&#xff0c;比如说int a表示a是一个整型变量&#xff0c;String b表 示b是一个字符串变量。而Kotlin中定义一个变量&#xff0c;只允许在变量…...

将CUBE或3DL LUT转换为PNG图像

概述 在大部分情况下&#xff0c;LUT 文件通常为 CUBE 或 3DL 格式。但是我们在 OpenGL Shader 中使用的LUT&#xff0c;通常是图像格式的 LUT 文件。下面&#xff0c;我将教大家如何将这些文件转换为 PNG 图像格式。 条形LUT在线转换&#xff08;不是8x8网络&#xff09;&am…...

侯捷 C++ 课程学习笔记:类的声明与构造函数

目录 一、类的声明 二、内联函数 三、访问级别 四、构造函数 五、构造函数重载 六、实际应用案例 七、学习心得 一、类的声明 类的声明是定义类的基本结构&#xff0c;包括类的成员变量和成员函数。类的声明分为类头和类体两部分。 类头&#xff08;class head&#xf…...

BGP状态和机制

BGP邻居优化 为了增加稳定性,通常建议实验回环口来建立邻居。更新源:建立邻居和邻居所学习到的路由的下一跳。多跳:EBGP邻居建立默认选哟直连,因为TTL=1,如果非直连,必须修改TTL。命令备注peer 2.2.2.2 connect-interface lo1配置更新源peer 2.2.2.2 ebgp-max-hop 2配置T…...

MongoDB 数据库简介

MongoDB 数据库简介 引言 随着互联网技术的飞速发展,数据已经成为企业的重要资产。为了高效地管理和处理这些数据,数据库技术应运而生。MongoDB作为一种流行的NoSQL数据库,因其灵活的数据模型和高效的数据处理能力,受到了广泛的关注。本文将为您详细介绍MongoDB的基本概念…...

浏览器下载vue.js.devtools,谷歌浏览器和edg浏览器

1、谷歌浏览器下载&#xff1a; 情况一&#xff1a;如果谷歌应用商店可以打开&#xff0c;那么就直接到谷歌应用商店下载&#xff0c;直接搜索vue.js.devtools添加扩展即可。 情况二&#xff1a;谷歌浏览器的谷歌应用商城打不开&#xff0c;那么就百度搜索极简插件找到vue.js.…...