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

React Router

为什么需要路由?

单页应用(SPA):在单页面中实现多视图切换,避免整页刷新。

核心功能

  • 根据 URL 路径渲染对应组件。

  • 实现页面间导航(前进、后退、跳转)。

  • 支持动态路由、嵌套路由、路由守卫等。


一、RouterProvider 核心概念

1. 定位与作用

  • React Router v6.4+ 新增特性:用于替代传统的 <BrowserRouter>,提供 数据驱动路由(Data Routing)能力。

  • 核心能力

    • 集中式路由配置:路由定义与组件解耦。

    • 数据预加载:通过 loader 在路由匹配时自动加载数据。

    • 表单处理:通过 action 处理表单提交。

    • 内置优化:流式渲染(Suspense)、错误边界、滚动恢复等。

  • 适用场景:中大型项目、需复杂数据流管理、服务端渲染(SSR)准备。


二、基础配置与使用

1. 安装依赖

npm install react-router-dom

2. 创建路由配置

// src/router.js
import { createBrowserRouter } from "react-router-dom";
import App from "./App";
import Home from "./pages/Home";
import UserProfile, { loader as userLoader } from "./pages/UserProfile";// 定义路由配置对象
export const router = createBrowserRouter([{path: "/",element: <App />,children: [{ index: true, element: <Home /> },{path: "users/:id",element: <UserProfile />,loader: userLoader, // 数据预加载errorElement: <ErrorPage />, // 错误边界},],},
]);

3. 在入口文件中使用

// src/main.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import { router } from "./router";ReactDOM.createRoot(document.getElementById("root")).render(<React.StrictMode><RouterProvider router={router} /></React.StrictMode>
);

三、数据流管理(loader 与 action

1. loader:路由数据预加载

  • 触发时机:路由匹配时自动调用,在组件渲染前完成数据加载。

  • 典型场景:API 请求、权限校验、数据初始化。

// src/pages/UserProfile.jsx
export async function loader({ params, request }) {// 获取动态参数(如用户ID)const userId = params.id;// 发起数据请求const response = await fetch(`/api/users/${userId}`);if (!response.ok) {throw new Error("用户不存在"); // 抛出错误会被 errorElement 捕获}return response.json();
}function UserProfile() {// 使用 useLoaderData 获取 loader 返回的数据const userData = useLoaderData();return <div>{userData.name}</div>;
}

2. action:处理表单提交

  • 触发时机:表单提交时自动调用(需设置 method="post")。

  • 典型场景:用户注册、数据修改、文件上传。

// src/pages/EditUser.jsx
export async function action({ request, params }) {const formData = await request.formData();const updates = Object.fromEntries(formData);// 提交数据到后端await fetch(`/api/users/${params.id}`, {method: "PUT",body: JSON.stringify(updates),});// 重定向到用户详情页return redirect(`/users/${params.id}`);
}function EditUser() {return (<Form method="post"><input name="name" type="text" /><button type="submit">保存</button></Form>);
}

四、高级功能与最佳实践

1. 错误处理与边界

  • 全局错误捕获:通过路由配置的 errorElement 统一处理。

  • 局部错误处理:在组件内使用 useRouteError Hook。

// 全局错误页面配置
{path: "/users/:id",element: <UserProfile />,loader: userLoader,errorElement: <ErrorBoundary />, // 自定义错误组件
}// ErrorBoundary.jsx
import { useRouteError } from "react-router-dom";function ErrorBoundary() {const error = useRouteError();return (<div><h1>出错了!</h1><p>{error.message}</p></div>);
}

2. 路由懒加载与代码分割

// 结合 React.lazy 和 Suspense 实现懒加载
import { lazy, Suspense } from "react";const Settings = lazy(() => import("./pages/Settings"));const router = createBrowserRouter([{path: "/settings",element: (<Suspense fallback={<div>加载中...</div>}><Settings /></Suspense>),},
]);

3. 权限控制与路由守卫

// 封装鉴权高阶路由配置
function protectedLoader({ request }) {const isAuthenticated = checkAuth();if (!isAuthenticated) {return redirect("/login");}return null;
}const router = createBrowserRouter([{path: "/dashboard",element: <Dashboard />,loader: protectedLoader, // 路由加载前鉴权},
]);

4. 滚动恢复与定位

  • 自动恢复:React Router 默认记录滚动位置。

  • 手动控制:使用 <ScrollRestoration> 组件。

import { ScrollRestoration } from "react-router-dom";function App() {return (<div><ScrollRestoration />{/* 其他内容 */}</div>);
}

五、与传统 BrowserRouter 对比

功能RouterProviderBrowserRouter
路由配置集中式(JSON 结构)分散式(组件树中声明)
数据加载内置 loader,自动预加载需手动使用 useEffect
表单处理内置 action,统一管理提交逻辑需自行处理表单事件和状态
错误处理全局/局部错误边界,自动捕获需手动实现错误边界
代码分割天然支持 Suspense + 懒加载需手动配置
服务端渲染更友好(数据预加载机制)需额外配置

方案一:使用 createBrowserRouter + RouterProvider(推荐)

// router.js
import { createBrowserRouter } from "react-router-dom"
import App from "./App"
import Home from "./pages/home"
import News from "./pages/news"export default createBrowserRouter([{path: '/',element: <App />,children: [{index: true,element: <Home />},{path: '/news',element: <News />}]}
])// App.jsx
import './app.css'
import { Link, Outlet } from 'react-router-dom'function App() {return (<div className='main'><nav><Link to="/">Home</Link> {/* 修改为根路径 */}<Link to="/news">News</Link></nav><div className="content"><Outlet /></div></div>)
}// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { RouterProvider } from 'react-router-dom'
import router from './router/router'
import { Provider } from 'react-redux'
import store from './store/index.js'createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><RouterProvider router={router} /></Provider></StrictMode>
)

方案二:使用 BrowserRouter 组件方式

// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import store from './store/index.js'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'createRoot(document.getElementById('root')).render(<StrictMode><Provider store={store}><BrowserRouter><App /></BrowserRouter></Provider></StrictMode>
)// App.jsx
import './app.css'
import { Link, Outlet, Routes, Route } from 'react-router-dom'
import Home from './pages/home'
import News from './pages/news'function App() {return (<div className='main'><nav><Link to="/">Home</Link><Link to="/news">News</Link></nav><div className="content"><Routes><Route path="/" element={<Home />} /><Route path="/news" element={<News />} /></Routes></div></div>)
}

六、常见问题与解决方案

1. 如何传递自定义参数到 loader

  • 方案:通过 URL 参数或搜索参数传递,或在跳转时携带状态:

    navigate("/users/123", { state: { from: "home" } });// loader 中获取
    export async function loader({ request }) {const url = new URL(request.url);const from = url.searchParams.get("from");// 或通过 location.stateconst state = useLocation().state;
    }

2. 如何复用 loader 逻辑?

  • 方案:封装为共享函数:

    // utils/loaders.js
    export async function loadUserData(userId) {const res = await fetch(`/api/users/${userId}`);return res.json();
    }// 路由配置
    import { loadUserData } from "./utils/loaders";
    loader: ({ params }) => loadUserData(params.id)

3. 如何结合 TypeScript 使用?

  • 类型定义:为 loader/action 定义类型:

    import { LoaderFunctionArgs, ActionFunctionArgs } from "react-router-dom";export async function loader({ params }: LoaderFunctionArgs) {// params 自动推断为 { id: string }
    }

七、总结

何时选择 RouterProvider

  • 大型应用:需要集中管理路由和数据流。

  • 复杂数据依赖:多路由共享数据、预加载需求。

  • 优化需求:流式渲染、代码分割、滚动恢复。

  • 未来扩展:计划迁移到服务端渲染(SSR)。

最佳实践

  1. 路由分层管理:拆分为多个路由配置文件。

  2. 严格类型定义:结合 TypeScript 提升安全性。

  3. 合理拆分组件:保持路由配置简洁清晰。

  4. 性能监控:结合 Suspense 和懒加载优化首屏速度。


 

 

相关文章:

React Router

为什么需要路由&#xff1f; 单页应用&#xff08;SPA&#xff09;&#xff1a;在单页面中实现多视图切换&#xff0c;避免整页刷新。 核心功能&#xff1a; 根据 URL 路径渲染对应组件。 实现页面间导航&#xff08;前进、后退、跳转&#xff09;。 支持动态路由、嵌套路由…...

加载ko驱动模块:显示Arm版本问题解决!

1、问题 驱动模块加载&#xff0c;使用命令&#xff1a;modprobe chrdevbase.ko 时出现&#xff1a; hrdevbase: version magic 4.1.15 SMP preempt mod_unload modversions ARMv6 p2v8 ’ should be 4.1.15 SMP preempt mod_unload modversions ARMv7 p2v8 ’ ———————…...

OpenGL-ES 学习(9) ---- OpenGL-ES 简介和基本 Pipeline

目录 OpenGL-ES 简介渲染管线顶点和顶点着色器图元装配和光栅化片段和片段着色器逐片段操作EGL OpenGL-ES 简介 OpenGL-ES(OpenGL for Embedded System)是以手持和嵌入式设备为目标的高级3D图形应用编程接口&#xff0c;OpenGL ES 支持的的平台包括 IOS&#xff0c;Android&am…...

计算机视觉(CV)技术的优势和挑战(本片为InsCode)

计算机视觉&#xff08;CV&#xff09;技术是一种利用计算机和算法来模拟人类视觉实现图像和视频处理的技术。它在各个领域都有着广泛的应用&#xff0c;具有许多优势和挑战。 优势&#xff1a; 自动化&#xff1a;CV 技术可以自动识别、分类、跟踪和分析图像和视频数据&…...

Unity 几种主流的热更新方式

一、AssetBundle 资源热更 核心原理 将游戏资源打包为 AssetBundle 文件 运行时动态加载更新的 AssetBundle 实现步骤 资源标记&#xff1a;在 Unity Editor 中设置资源的 AssetBundle 属性 打包生成&#xff1a;使用 BuildPipeline.BuildAssetBundles 生成 AB 包 版本管…...

小结:ipsec-ike

IPSec 手动配置与自动配置&#xff08;IKE动态协商&#xff09; 手动配置IPSec 逻辑图 #mermaid-svg-eNMnNEwnoTjF8fkV {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-eNMnNEwnoTjF8fkV .error-icon{fill:#552222;}…...

基于大模型预测的输尿管癌诊疗全流程研究报告

目录 一、引言 1.1 研究背景与意义 1.2 研究目的与创新点 二、大模型预测输尿管癌的原理与方法 2.1 大模型技术概述 2.2 用于输尿管癌预测的大模型选择 2.3 数据收集与处理 2.4 模型训练与优化 三、术前风险预测与手术方案制定 3.1 术前风险预测指标 3.2 大模型预测…...

Python Cookbook-6.14 实现状态设计模式

任务 你希望你程序中的某个对象能在不同的“状态”之间切换&#xff0c;而且该对象的行为方式也能随着状态的变化而变化。 解决方案 状态设计模式的关键思路是将“状态”(带有它自身的行为方式)对象化&#xff0c;使其成为一个类实例(带有一些方法)。在Python中&#xff0c;…...

2025智能体的发展趋势

以下是2025年智能体的一些主要发展趋势&#xff1a; 技术能力提升 多模态融合深化&#xff1a;智能体将能够更加自然地处理和理解多种模态的数据&#xff0c;如文本、图像、语音、视频等&#xff0c;实现跨模态的感知、理解和生成。这将使智能体在复杂场景下的应用更加广泛和…...

PCA主成分分析法(最大投影方差,最小重构距离,SVD角度)

统计分析中&#xff0c;数据的变量之间可能存在相关性&#xff0c;以致增加了分析的难度。于是&#xff0c;考虑由少数不相关的变量来代替相关的变量&#xff0c;用来表示数据&#xff0c;并且要求能够保留数据中的大部分信息。 在信号处理领域,信号具有较大方差,噪声具有较小…...

《数据结构初阶》【顺序表/链表 精选15道OJ练习】

《数据结构初阶》【顺序表/链表 精选15道OJ练习】 前言&#xff1a;---------------顺序表OJ练习---------------[26. 删除有序数组中的重复项](https://leetcode.cn/problems/remove-duplicates-from-sorted-array/)题目介绍方法一&#xff1a; [27. 移除元素](https://leetco…...

Python协程入门指北

一、什么是协程&#xff1f; 协程&#xff08;Coroutine&#xff09;就像可以暂停执行的函数&#xff0c;能够在执行过程中主动让出控制权&#xff0c;等准备好后再继续执行。 生活小例子 想象你在咖啡店排队&#xff1a; 普通函数&#xff1a;必须一直排到取餐&#xff08…...

Nginx 核心功能02

目录 一、引言 二、正向代理 &#xff08;一&#xff09;正向代理基础概念 &#xff08;二&#xff09;Nginx 正向代理安装配置 &#xff08;三&#xff09;正向代理配置与验证 三、反向代理 &#xff08;一&#xff09;反向代理原理与应用场景 &#xff08;二&#xf…...

c++题目_P1027 [NOIP 2001 提高组] Car 的旅行路线

P1027 [NOIP 2001 提高组] Car 的旅行路线 - 洛谷 # P1027 [NOIP 2001 提高组] Car 的旅行路线 ## 题目描述 又到暑假了&#xff0c;住在城市 A 的 Car 想和朋友一起去城市旅游。 她知道每个城市都有 $4$ 个飞机场&#xff0c;分别位于一个矩形的 $4$ 个顶点上&#xff0c…...

【playwright】内网离线部署playwright

背景&#xff1a;安装好python3.9后&#xff0c;由于内网无法使用pip安装playwright&#xff0c;多方收集资料&#xff0c;终于部署完成&#xff0c;现汇总如下&#xff1a; 1、playwright需要python3.7以上的版本&#xff0c;如果低于这个版本先要将python解释器升级 2、在可…...

前端面经-webpack篇--定义、配置、构建流程、 Loader、Tree Shaking、懒加载与预加载、代码分割、 Plugin 机制

看完本篇你将基本了解webpack!!! 目录 一、Webpack 的作用 1、基本配置结构 2、配置项详解 1. entry —— 构建入口 2. output —— 输出配置 3. mode:模式设置 4. module:模块规则 5. plugins:插件机制 6. resolve:模块解析配置(可选) 7. devServer:开发服务器…...

ES6函数、对象和面向对象扩展

函数扩展 默认参数 通用的写法&#xff1a; function func(a, b, ..., c 默认值c, d 默认值d, ...) {... }其中&#xff0c;需要注意的是&#xff0c;有默认值的尽量写在后面并且所有形参参数不允许重复申明。具体例子&#xff1a; function test() {return 13 }// 函数可…...

航空客户价值分析阶段性测验

航空公司客户价值分析 学习目标 学会怎么进行数据分析。掌握hive的使用方法。学会数据清洗和K-Means聚类算法。 了解航空公司现状与客户价值分析 任务描述 面对激烈的市场竞争,各个航空公司都推出了更多的优惠来吸引客户。国内某航空公司面临着常旅客流失&#xff0c;竞争…...

纯html实现的json数据转csv文件

代码如下&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>JSON转CSV转换器</tit…...

Windows 查看电脑是否插拔过U盘

1、按 “WinR” 组合键打开 “运行” 对话框&#xff0c;输入 “regedit” 并回车&#xff0c;打开注册表编辑器。 2、依次展开HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Enum\USBSTOR注册表项&#xff0c;这里记录了所有已连接过的 USB 设备信息&#xff0c;包括 U 盘&am…...

VB.net序列化和反序列化的使用方法和实用场景

引言 相信很多初学编程的人都会提出过这个疑问&#xff1a;“既然我的变量可以存在内存之中&#xff0c;那么是否也可以存在硬盘之中呢” 其实我想回答的是&#xff0c;完全可以而且方法不止一种&#xff0c;而今天讲的是序列化最经典的——二进制序列化 由于序列化的部分已…...

kafka学习笔记(四、生产者(客户端)深入研究(二)——消费者协调器与_consumer_offsets剖析)

1.消费者协调器和组协调器 如果消费者客户端中配置了多个分配策略&#xff0c;则多消费者的分区分配交由消费者协调器和组协调器来完成&#xff0c;他们之间使用一套组协调协议进行交互。 1.1.在均衡原理 将全部消费者分成多个子集&#xff0c;每个消费者组的子集在服务中对…...

stm32基础001(串口)

文章目录 通信的基本概念串行通信和并行通信单工&#xff0c;半双工和全双工串口的硬件连接 stm32的串口原理图CPU的芯片手册stm32串口的库函数实现通过串口实现printf函数使用中断实现串口的接收 通信的基本概念 串行通信和并行通信 串行通信一个方向只有一个数据通道&#x…...

5G技术如何提升智能家居体验:让家更聪明,生活更智能

5G技术如何提升智能家居体验&#xff1a;让家更聪明&#xff0c;生活更智能 一、引言&#xff1a;智能家居的新纪元 近年来&#xff0c;智能家居已经逐渐走入我们的生活&#xff0c;家电、照明、安全设备、环境监控等产品&#xff0c;都在逐步实现智能化&#xff0c;让我们可以…...

在项目中如何对Map List等对象序列化及反序列化

我们知道&#xff0c;在自定义类中&#xff0c;若想完成序列化必须要实现Serializable接口。 那么在实现后如何进行序列化呢&#xff1f; 一.普通对象 序列化&#xff1a; 1.首先我们要定义一个 序列化所需要的工具类 ObjectMapper //定义序列化所需要的工具类 转化机器…...

指针与算法的双人舞:蓝桥杯两道趣味题的降维打击

蓝桥杯奇趣挑战&#xff1a;如何用指针和算法“驯服”无序数组与环形迷宫&#xff1f; &#x1f3a9; 博客引言 "你是否有过这样的体验&#xff1f;面对一段看似混乱的数组&#xff0c;像解开一团纠缠的耳机线&#xff0c;想用最优雅的方式让它乖乖听话&#xff1f;又或者…...

C语言 指针(2)

目录 1.指针运算 2.const修饰指针 3.野指针 我们在上篇文章中初步了解了关于指针的基础内容&#xff0c;包括内存地址以及指针变量类型。这篇我们来 讲关于指针的运算以及const修饰指针和野指针相关内容。 1. 指针运算 指针的基本运算有三种&#xff0c;分别是: - 指针-…...

使用Python和Pandas实现的Azure Synapse Dedicated SQL pool权限检查与SQL生成用于IT审计

下面是使用 Python Pandas 来提取和展示 Azure Synapse Dedicated SQL Pool 中权限信息的完整过程&#xff0c;同时将其功能以自然语言描述&#xff0c;并自动构造所有权限设置的 SQL 语句&#xff1a; ✅ 步骤 1&#xff1a;从数据库读取权限信息 我们从数据库中提取与用户、…...

Python基本语法(控制语句)

#控制语句 Python语言的控制语句和其他编程语言类似&#xff0c;常用的有if…else、while、for语句。 案例2一7控制语句 第1组代码&#xff0c;说明if-else语句&#xff1a; #1 print(\n1,if) x,y,z10,20,5 if x>y:print(x>y) else:print(x<y)输出结果: 1,if x<…...

Linux btop 使用教程

简介 btop 是一个基于终端的现代系统资源监控器&#xff0c;具有美观的图形界面、响应快、功能丰富等特点。它支持查看 CPU、内存、磁盘、网络、进程&#xff0c;并可以方便地筛选和管理进程。 功能总览 启动命令&#xff1a; btop界面分为以下几部分&#xff1a; CPU 区域…...

高并发场景下的MySQL生存指南

引言 在2025年全球数字经济峰会上&#xff0c;阿里云披露其核心交易系统单日处理请求量突破万亿次&#xff0c;其中MySQL集群承载了78%的OLTP业务。这标志着数据库系统已进入百万级QPS时代&#xff0c;传统优化手段面临三大挑战&#xff1a; 一、硬件与架构优化&#xff1a;构…...

Ethan独立开发产品日报 | 2025-04-30

1. Daytona 安全且灵活的基础设施&#xff0c;用于运行你的人工智能生成代码。 Daytona Cloud重新定义了AI代理的基础设施&#xff0c;具备低于90毫秒的启动时间、原生性能和有状态执行能力&#xff0c;这些是传统云服务无法比拟的。您可以以前所未有的速度和灵活性来创建、管…...

Mysql常用函数解析

字符串函数 CONCAT(str1, str2, …) 将多个字符串连接成一个字符串。 SELECT CONCAT(Hello, , World); -- 输出: Hello World​​SUBSTRING(str, start, length) 截取字符串的子串&#xff08;起始位置从1开始&#xff09;。 SELECT SUBSTRING(MySQL, 3, 2); -- 输出: SQ…...

donet使用指定版本sdk

ps:来自微软官方方案,实测可行,就是在项目任意目录下在新建 global.json,并配置sdk版本 SDK 使用最新安装的版本 SDK 命令包括 dotnet new 和 dotnet run。 .NET CLI 必须为每个 dotnet 命令选择一个 SDK 版本。 即使在以下情况下&#xff0c;它也会默认使用计算机上安装的最新…...

Android短信监控技术实现:合法合规的远程采集方案

一年经验的全栈程序员&#xff0c;目前头发健在&#xff0c;但不知道能撑多久。 该项目已成功部署并稳定运行于企业生产环境&#xff0c;如需个性化定制方案&#xff0c;欢迎联系作者进行深度合作。 文章目录 前言 一、页面设计 1.页面显示 2.代码实现 二、具体代码实现 1.添加…...

前端项目实践:打造响应式个人简历与实时天气预报应用

在当今前端开发领域&#xff0c;构建实际项目是提升技能的最佳方式。本文将带你完成两个极具实用价值的前端项目&#xff1a;响应式个人简历页面和天气预报Web应用。这两个项目不仅能够丰富你的作品集&#xff0c;还能帮助你掌握现代前端开发的核心技术。 一、响应式个人简历页…...

【C++】extern

本文介绍一些extern在C中的用法 声明与定义分离 C程序员应该都知道单一定义规则ODR 在任何一个翻译单元中&#xff0c;只允许存在任何变量、函数、类类型、枚举类型 、概念 (自 C20 起) 或模板的一个定义&#xff08;其中一些可能具有多个声明&#xff0c;但只允许一个定义&a…...

力扣——23合并升序链表

目录 1:题目描述&#xff1a; 2.算法思想&#xff1a; 3.代码展示&#xff1a; 1:题目描述&#xff1a; 给你一个链表数组&#xff0c;每个链表都已经按升序排列。 请你将所有链表合并到一个升序链表中&#xff0c;返回合并后的链表。 示例 1&#xff1a; 输入&#xff…...

Java 泛型参数问题:‘ResponseData.this‘ cannot be referenced from a static contex

问题与处理策略 问题描述 Data AllArgsConstructor NoArgsConstructor public class ResponseData<T> {private Integer code;private String msg;private T data;public static final int CODE_SUCCESS 2001;public static final int CODE_FAIL 3001;public static …...

21 课时精通生成式 AI:微软官方入门指南详解

21课时精通生成式AI&#xff1a;微软官方入门指南详解 引言项目概述分析基本信息项目定位与目标 核心功能详解1. 全面的课程结构2. 多样化的学习内容3. 技术亮点与创新点 安装和使用教程环境要求安装步骤基本使用方法示例代码 应用场景和实际价值适用业务场景实际应用价值效益可…...

WPF嵌入webapi服务器,充当微服务角色

WPF嵌入WebAPI服务器实现微服务角色 一、方案概述 在WPF应用程序中嵌入WebAPI服务器,使其能够同时作为桌面客户端和微服务提供者。这种架构允许WPF应用既作为用户界面,又作为后端服务,适合需要本地处理能力同时又能提供API接口的场景。 二、技术选型 ​​WebAPI框架​​:…...

构建现代分布式云架构的三大支柱:服务化、Service Mesh 与 Serverless

目录 前言1. 服务化架构模式&#xff1a;构建可扩展的基础单元1.1 服务化的定义与演进1.2 在分布式云中的价值1.3 面临的挑战 2. Service Mesh 架构&#xff1a;服务通信的治理中枢2.1 什么是 Service Mesh&#xff1f;2.2 功能与优势2.3 在分布式云中的角色2.4 落地难点 3. Se…...

2025华东杯数学建模B题完整分析论文(共36页)(含模型、代码、数据)

2025华东杯数学建模B题完整分析论文 摘要 一、问题重述 二、问题分析 三、模型假设 四、 模型建立与求解 4.1问题1 4.1.1问题1思路分析 4.1.2问题1模型建立 4.1.3问题1代码 4.1.4问题1求解结果 4.2问题2 4.2.1问题2思路分析 4.2.2问题2模型建立 4.2…...

K8S - 零基础掌握 RBAC - 命名空间安全实战

一、为什么需要 RBAC 权限管理&#xff1f; 真实场景 在企业级 K8S 集群中&#xff0c;不同团队共享同一集群&#xff0c;容易发生权限管理问题&#xff0c;例如&#xff1a; 测试人员误删了生产数据库。 实习生看到了财务系统的敏感配置。 核心需求 确保不同用户 只能在自…...

OpenGL-ES 学习(13) ---- Shader 编译和程序对象

目录 概述创建和编译Shader链接程序对象绘制一个最简单的三角形示例代码 概述 在本节中&#xff0c;我们提供创建 Shader对象&#xff0c;并且编译链接到一个程序对象的完整流程&#xff0c;主要内容如下&#xff1a; Shader 和程序对象概述创建和编译Shader创建和链接程序对…...

今天的python练习题

目录 一、每日一言 二、练习题 三、效果展示 四、下次题目 五、总结 一、每日一言 晚上8点到的&#xff0c;还是会被感动到&#xff0c;有一位列车员同志在检票期间&#xff0c;叫我到列车员专座位上去坐&#xff0c;我很感激他&#xff0c;温暖人心&#xff0c;所以人间填我…...

HarmonyOS应用开发中实现本地化存储的几种方式

Preferences 存储 适用于存储简单的键值对数据&#xff0c;如用户设置、配置信息等。其特点是轻量级、使用简单&#xff0c;适合频繁读取和少量更新的场景&#xff0c;数据存储在本地沙盒中&#xff0c;应用重启后数据保持不变。 获取 Preferences 实例 &#xff1a;使用 data…...

【C++指南】vector(三):迭代器失效问题详解

. &#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《C指南》 期待您的关注 文章目录 一、引言二、reserve 扩容引发的迭代器失效2.1 问题现象2.2 正确实现 三、insert 插入引发的…...

Android面试总结之GC算法篇

一、GC 机制核心原理与算法 面试题 1&#xff1a;Android 中为什么采用分代回收&#xff1f;分代策略如何优化 GC 效率&#xff1f; 标准答案&#xff1a; 分代回收基于对象生命周期的差异&#xff0c;将堆分为年轻代&#xff08;Young Gen&#xff09;和老年代&#xff08;Ol…...

驱动开发系列55 - Linux Graphics QXL显卡驱动代码分析(二)显存管理

一:概述 前面介绍了当内核检测到匹配的PCI设备后,会调用 qxl_pci_probe 初始化设备,其中会调用qxl_device_init 来初始化设备,为QXL设备进行内存映射,资源分配,环形缓冲区初始化,IRQ注册等操作,本文展开说说这些细节,以及介绍下QXL的显存管理。 二:QXL设备初始化细节…...