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

前端取经路——框架修行:React与Vue的双修之路

大家好,我是老十三,一名前端开发工程师。在前端的江湖中,React与Vue如同两大武林门派,各有千秋。今天,我将带你进入这两大框架的奥秘世界,共同探索组件生命周期、状态管理、性能优化等核心难题的解决之道。无论你是哪派弟子,掌握双修之术,才能在前端之路上游刃有余。准备好启程了吗?

掌握了DOM渡劫的九道试炼后,是时候踏入现代前端的核心领域——框架修行。在这条充满挑战的双修之路上,我们将探索React与Vue这两大主流框架的精髓,以及它们背后的设计哲学。

🔄 第一难:生命周期 - 组件的"六道轮回"

问题:组件从创建到销毁经历了哪些阶段?如何在正确的生命周期阶段执行相应操作?

深度技术:

组件生命周期是前端框架的核心概念,描述了组件从创建、更新到销毁的完整过程。理解生命周期,意味着掌握了何时获取数据、何时操作DOM以及何时清理资源。

React和Vue在生命周期设计上既有相似之处,也有显著区别。React强调函数式理念,推动Hooks模式;Vue则提供更直观的选项式API,同时也支持组合式API。无论哪种方式,合理使用生命周期钩子都是构建高性能应用的关键。

代码示例:

// React Hooks生命周期
function HooksLifecycle() {const [count, setCount] = React.useState(0);const [userId, setUserId] = React.useState(1);const prevUserIdRef = React.useRef();// 相当于constructor + componentDidMount + componentDidUpdateReact.useEffect(() => {console.log('组件挂载或更新');// 设置定时器const timer = setInterval(() => {setCount(c => c + 1);}, 1000);// 返回清理函数,相当于componentWillUnmountreturn () => {console.log('组件卸载或更新前清理');clearInterval(timer);};}, []); // 空依赖数组,仅在挂载和卸载时执行// 监听特定依赖变化React.useEffect(() => {console.log('userId发生变化,获取新用户数据');fetchUserData(userId);}, [userId]); // 仅当userId变化时执行// 模拟getDerivedStateFromPropsReact.useEffect(() => {if (prevUserIdRef.current !== userId) {console.log('从props派生状态');}prevUserIdRef.current = userId;});// 模拟componentDidUpdate - 比较前后值const prevCountRef = React.useRef();React.useEffect(() => {const prevCount = prevCountRef.current;if (prevCount !== undefined && prevCount !== count) {console.log('count从', prevCount, '变为', count);}prevCountRef.current = count;});// 使用布局效果,在DOM变更后同步触发React.useLayoutEffect(() => {console.log('DOM更新后立即执行,浏览器绘制前');// 获取DOM测量或直接操作DOM});return (<div><h1>Hooks计数器: {count}</h1><button onClick={() => setCount(count + 1)}>增加</button><button onClick={() => setUserId(userId + 1)}>切换用户</button></div>);
}// Vue 3组合式API生命周期
import { ref, onMounted, onBeforeMount, onUpdated, onBeforeUpdate, onBeforeUnmount, onUnmounted, watch } from 'vue';const LifecycleDemo = {setup() {const count = ref(0);const message = ref('Hello Vue 3');onBeforeMount(() => {console.log('1. onBeforeMount: 组件挂载前');});onMounted(() => {console.log('2. onMounted: 组件已挂载');// 适合进行DOM操作、网络请求、订阅事件const timer = setInterval(() => {count.value++;}, 1000);// 清理函数onBeforeUnmount(() => {clearInterval(timer);});});onBeforeUpdate(() => {console.log('3. onBeforeUpdate: 组件更新前');});onUpdated(() => {console.log('4. onUpdated: 组件已更新');});onBeforeUnmount(() => {console.log('5. onBeforeUnmount: 组件卸载前');});onUnmounted(() => {console.log('6. onUnmounted: 组件已卸载');});// 监听数据变化watch(count, (newValue, oldValue) => {console.log(`count从${oldValue}变为${newValue}`);});return {count,message};}
};

🔄 第二难:状态管理 - 数据的"太极之道"

问题:如何优雅地管理应用状态?Redux和Vuex各有什么特点?

深度技术:

状态管理是前端应用的核心挑战之一。Redux遵循严格的单向数据流和不可变数据原则,强调纯函数reducer;Vuex则采用更贴近Vue的响应式设计。理解这两种范式的差异和适用场景,是框架修行的关键一步。

代码示例:

// Redux Toolkit示例
import { createSlice, configureStore } from '@reduxjs/toolkit';// 创建slice
const todoSlice = createSlice({name: 'todos',initialState: {items: [],filter: 'all'},reducers: {addTodo: (state, action) => {state.items.push({id: Date.now(),text: action.payload,completed: false});},toggleTodo: (state, action) => {const todo = state.items.find(todo => todo.id === action.payload);if (todo) {todo.completed = !todo.completed;}},setFilter: (state, action) => {state.filter = action.payload;}}
});// 导出actions
export const { addTodo, toggleTodo, setFilter } = todoSlice.actions;// 创建store
const store = configureStore({reducer: {todos: todoSlice.reducer}
});// React组件中使用Redux Toolkit
import { useSelector, useDispatch } from 'react-redux';function TodoApp() {const dispatch = useDispatch();const todos = useSelector(state => state.todos.items);const filter = useSelector(state => state.todos.filter);const [newTodo, setNewTodo] = React.useState('');const handleSubmit = e => {e.preventDefault();if (!newTodo.trim()) return;dispatch(addTodo(newTodo));setNewTodo('');};return (<div><h1>Todo应用</h1><form onSubmit={handleSubmit}><inputvalue={newTodo}onChange={e => setNewTodo(e.target.value)}placeholder="添加新任务"/><button type="submit">添加</button></form><div><button onClick={() => dispatch(setFilter('all'))}>全部</button><button onClick={() => dispatch(setFilter('active'))}>进行中</button><button onClick={() => dispatch(setFilter('completed'))}>已完成</button><span>当前: {filter}</span></div><ul>{todos.map(todo => (<likey={todo.id}style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}onClick={() => dispatch(toggleTodo(todo.id))}>{todo.text}</li>))}</ul></div>);
}// Pinia示例
import { defineStore } from 'pinia';export const useTodoStore = defineStore('todos', {state: () => ({items: [],filter: 'all'}),getters: {visibleTodos: (state) => {switch (state.filter) {case 'active':return state.items.filter(todo => !todo.completed);case 'completed':return state.items.filter(todo => todo.completed);default:return state.items;}}},actions: {addTodo(text) {this.items.push({id: Date.now(),text,completed: false});},toggleTodo(id) {const todo = this.items.find(todo => todo.id === id);if (todo) {todo.completed = !todo.completed;}},setFilter(filter) {this.filter = filter;}}
});// Vue组件中使用Pinia
import { useTodoStore } from './stores/todo';const TodoApp = {setup() {const store = useTodoStore();const newTodo = ref('');const handleSubmit = () => {if (!newTodo.value.trim()) return;store.addTodo(newTodo.value);newTodo.value = '';};return {store,newTodo,handleSubmit};},template: `<div><h1>Todo应用</h1><form @submit.prevent="handleSubmit"><inputv-model="newTodo"placeholder="添加新任务"/><button type="submit">添加</button></form><div><button @click="store.setFilter('all')">全部</button><button @click="store.setFilter('active')">进行中</button><button @click="store.setFilter('completed')">已完成</button><span>当前: {{ store.filter }}</span></div><ul><liv-for="todo in store.visibleTodos":key="todo.id":style="{ textDecoration: todo.completed ? 'line-through' : 'none' }"@click="store.toggleTodo(todo.id)">{{ todo.text }}</li></ul></div>`
};

🔄 第三难:组件通信 - 数据的"乾坤大挪移"

问题:在React和Vue中,如何实现组件之间的数据传递和通信?有哪些最佳实践?

深度技术:

组件通信是前端开发中的核心问题。React和Vue提供了多种组件通信方式,从简单的props传递到复杂的状态管理,从事件总线到上下文共享。理解这些通信方式的适用场景和最佳实践,是构建可维护应用的关键。

代码示例:

// React组件通信示例// 1. Props传递 - 父子组件通信
function ParentComponent() {const [count, setCount] = useState(0);return (<div><h1>父组件</h1><ChildComponent count={count} onIncrement={() => setCount(c => c + 1)} /></div>);
}function ChildComponent({ count, onIncrement }) {return (<div><p>子组件接收到的count: {count}</p><button onClick={onIncrement}>增加</button></div>);
}// 2. Context API - 跨层级组件通信
const ThemeContext = React.createContext('light');function ThemeProvider({ children }) {const [theme, setTheme] = useState('light');const toggleTheme = () => {setTheme(prev => prev === 'light' ? 'dark' : 'light');};return (<ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>);
}

相关文章:

前端取经路——框架修行:React与Vue的双修之路

大家好,我是老十三,一名前端开发工程师。在前端的江湖中,React与Vue如同两大武林门派,各有千秋。今天,我将带你进入这两大框架的奥秘世界,共同探索组件生命周期、状态管理、性能优化等核心难题的解决之道。无论你是哪派弟子,掌握双修之术,才能在前端之路上游刃有余。准…...

【DBMS学习系列】一、DBMS(数据库管理系统)的存储模型

一、前置知识 1.1 什么是OLAP 和 OLTP? On-Line Analytical Processing,简称OLAP(联机分析处理),是一种用于处理大规模数据的技术,它提供了一种灵活的分析和查询方式,能够帮助用户从不同维度来分析和理解业务数据。 On-Line Transaction Processing,简称OLTP(联机事…...

Matlab 镍氢电池模型

1、内容简介 Matlab216-镍氢电池模型 可以交流、咨询、答疑 2、内容说明 略 3、仿真分析 略 4、参考论文 略...

39、.NET GC是什么? 为什么需要GC?

.NET GC是什么&#xff1f; .NET GC&#xff08;Garbage Collector&#xff0c;垃圾回收器&#xff09;是.NET运行时&#xff08;CLR&#xff09;的核心组件&#xff0c;负责自动管理托管堆&#xff08;Managed Heap&#xff09;中的内存分配与释放。其核心工作机制包括&#…...

前端缓存踩坑指南:如何优雅地解决浏览器缓存问题?

浏览器缓存&#xff0c;配置得当&#xff0c;它能让页面飞起来&#xff1b;配置错了&#xff0c;一次小小的上线&#xff0c;就能把你扔进线上 bug 的坑里。你可能遇到过这些情况&#xff1a; 部署上线了&#xff0c;结果用户还在加载旧的 JS&#xff1b;接口数据改了&#xf…...

XML语言

XML语言 在开始介绍Mybatis之前&#xff0c;先介绍一下XML语言&#xff0c;XML语言发明最初是用于数据的存储和传输&#xff0c;它是由一个一个的标签嵌套而成 <?xml version"1.0" encoding"UTF-8" ?> <outer> <name>阿伟</name&…...

垃圾回收的三色标记算法

目录 1、介绍 1.1、发展 1.2、基本原理 2、执行过程 2.1、初始标记 (Initial Marking) 2.2、并发标记 (Concurrent Marking) 2.3、重新标记 (Remark) 2.4、垃圾清理阶段 3、并发标记 3.1、浮动垃圾 3.2、漏标 前言 三色标记&#xff08;Tri-color Marking&#xff0…...

紫禁城多语言海外投资理财返利源码带前端uniapp纯工程文件

测试环境&#xff1a;Linux系统CentOS7.6、宝塔、PHP7.2、MySQL5.6&#xff0c;根目录public&#xff0c;伪静态thinkphp&#xff0c;开启ssl证书 语言&#xff1a;中文简体、英文、越南语、马来语、日语、巴西语、印尼语、泰语 前端是uniapp的源码&#xff0c;我已经把nmp给你…...

深入剖析 I/O 复用之 select 机制

深入剖析 I/O 复用之 select 机制 在网络编程中&#xff0c;I/O 复用是一项关键技术&#xff0c;它允许程序同时监控多个文件描述符的状态变化&#xff0c;从而高效地处理多个 I/O 操作。select 作为 I/O 复用的经典实现方式&#xff0c;在众多网络应用中扮演着重要角色。本文…...

Android开发报错解决

Android开发报错解决 组件相关文件相关权限相关代码相关程序报错IDE相关版本对应框架okhttp请求失败 Roomno such table cocos2d 组件相关 使用gravity属性让文字居中是&#xff0c;需把该属性放在text属性上面ScrollView只能容纳一个子视图 文件相关 放在drawble下的图片资源…...

Linux 网络命名空间:从内核资源管理到容器网络隔离

1. 网络命名空间是什么? 网络命名空间(Network Namespace) 是 Linux 内核提供的一种网络资源隔离机制,用于为进程或容器创建完全独立的网络环境。它并非物理或虚拟的网络接口(如网卡、veth pair 等),而是一个虚拟容器,包含以下资源的独立实例: 网络接口(物理或虚拟)…...

VNC windows连接ubuntu桌面

✅ 步骤 1&#xff1a;安装 VNC 服务器 首先&#xff0c;我们需要在 Winux 系统上安装一个 VNC 服务器。这里我们使用 tigervnc 作为例子&#xff0c;它是一个常用的 VNC 服务器软件。 打开终端并更新你的软件包&#xff1a; sudo apt update安装 tigervnc 服务器&#xff1a;…...

Elastic:如何构建由 AI 驱动的数字客户体验策略

作者&#xff1a;来自 Elastic Elastic Platform Team 客户通过多个数字渠道与企业和组织互动 —— 从网站和应用程序到聊天机器人和电子邮件。这些接触点构成了数字客户体验&#xff08;DCX&#xff09;。无缝的数字客户体验能显著提升客户满意度&#xff0c;进而带动更高的收…...

安防多协议接入/视频汇聚平台EasyCVR助力工地/工程/建筑施工领域搭建视频远程监控系统

一、摄像机安装方案​ 1&#xff09;安装位置选择​&#xff1a;摄像机安装需避开强振源与电磁干扰区&#xff0c;兼顾建筑外观&#xff0c;隐蔽安装。其防护罩应巧妙遮蔽视角&#xff0c;增强安防威慑。电梯轿厢内的摄像机&#xff0c;建议藏于吊顶。连接摄像机的视频、电源及…...

《100天精通Python——基础篇 2025 第16天:异常处理与调试机制详解》

目录 一、认识异常1.1 为什么要使用异常处理机制?1.2 语法错误1.3 异常错误1.4 如何解读错误信息 二、异常处理2.1 异常的捕获2.2 Python内置异常2.3 捕获多个异常2.4 raise语句与as子句2.5 使用traceback查看异常2.6 try…except…else语句2.7 try…except…finally语句--捕获…...

Ceph PG unfound/lost 问题排查与解决

Ceph PG unfound/lost 问题排查与解决 背景现象排查过程经验总结参考命令结语 背景 Ceph 集群出现 HEALTH_ERR&#xff0c;提示有 PG 对象丢失&#xff08;unfound&#xff09;&#xff0c;并且 repair 无法自动修复。 现象 ceph health detail 显示&#xff1a; HEALTH_ERR …...

LeetCode热题100--54.螺旋矩阵--中等

1. 题目 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5] 示例 2&#xff1a; 输入&#xff1a;ma…...

【嵌入式开发-CAN】

嵌入式开发-CAN ■ CAN简介 ■ CAN简介...

SQLite3介绍与常用语句汇总

SQLite3简介 SQLite3是一款轻量级的、基于文件的开源关系型数据库引擎&#xff0c;由 D. Richard Hipp 于 2000 年首次发布。它遵循 SQL 标准&#xff0c;但与传统的数据库系统不同&#xff0c;SQLite 并不运行在独立的服务器进程中&#xff0c;而是作为一个嵌入式数据库引擎直…...

uniapp中score-view中的文字无法换行问题。

项目场景&#xff1a; 今天遇到一个很恶心的问题&#xff0c;uniapp中的文字突然无法换行了。得..就介样 原因分析&#xff1a; 提示&#xff1a;经过一fan研究后发现 scroll-view为了能够横向滚动设置了white-space: nowrap; 强制不换行 解决起来最先想到的是&#xff0c;父…...

[学习]RTKLib详解:ephemeris.c与rinex.c

文章目录 RTKLib详解&#xff1a;ephemeris.c与rinex.cPART A: ephemeris.c一、代码整体作用与工作流程分析1.1 整体作用1.2 工作流程 二、核心函数说明2.1 alm2pos (Almanac to Position)2.2 eph2clk (Ephemeris to Clock)2.3 eph2pos (Ephemeris to Position)2.4 geph2pos (G…...

JDBC:java与数据库连接,Maven,MyBatis

JDBC 是使用Java语言操作关系型数据库的一套API JDBC是接口&#xff0c;用其实现一系列不同种类关系型数据库的实现类 JDBC本质: 官方(sun公司)定义的一套操作所有关系型数据库的规则&#xff0c;即接口 各个数据库厂商去实现这套接口&#xff0c;提供数据库驱动jar包 我…...

代码随想录第39天:单调栈

一、每日温度&#xff08;Leetcode 739&#xff09; 思路&#xff1a; 栈里存放的是**“还没等到升温的日子”**的索引&#xff1b; 每遇到一个新的温度&#xff1a; 检查是否比栈顶的温度高&#xff1b; 如果高了&#xff0c;说明升温来了&#xff0c;栈顶元素可以出栈&…...

如何在vite构建的vue项目中从0到1配置postcss-pxtorem

1. 安装postcss-pxtorem和autoprefixer yarn add postcss-pxtorem autoprefixer2. 在vite.config.ts中写入 import { defineConfig } from "vite"; import vue from "vitejs/plugin-vue"; import postcssPxtorem from "postcss-pxtorem"; impo…...

基于51单片机的自动洗衣机衣料材质proteus仿真

地址&#xff1a;https://pan.baidu.com/s/13d2bJ6vKh8ZLuDBZnI0VGw 提取码&#xff1a;1234 仿真图&#xff1a; 芯片/模块的特点&#xff1a; AT89C52/AT89C51简介&#xff1a; AT89C51 是一款常用的 8 位单片机&#xff0c;由 Atmel 公司&#xff08;现已被 Microchip 收…...

永久免费的小工具,内嵌微软接口

有时候我们制作短视频&#xff0c;需要为视频添加声音&#xff0c;但部分配音软件要收费。不过别担心&#xff0c;今天给大家推荐一款超实用的免费文字转语音软件&#xff0c;完全无需担忧费用问题&#xff01; 01 软件介绍 这款软件就是Read Aloud&#xff0c;具有以下特点&a…...

C++漫步结构与平衡的殿堂:AVL树

文章目录 1.AVL树的概念2.AVL树的结构3.AVL树的插入4.AVL树的旋转4.1 左单旋4.2 右单旋4.3 右左双旋4.4 左右双旋 5.AVL树的删除6.AVL树的高度7.AVL树的平衡判断希望读者们多多三连支持小编会继续更新你们的鼓励就是我前进的动力&#xff01; 二叉搜索树有其自身的缺陷&#xf…...

MIST:一键解锁 macOS 历史版本,旧系统安装不再难!

在 Mac 电脑的使用过程中&#xff0c;你是否遇到过这些困扰&#xff1f;为了运行一款经典设计软件&#xff0c;新系统却无法兼容&#xff1b;或是想给老旧 Mac 设备升级&#xff0c;却找不到适配的系统版本。而 App Store 里&#xff0c;旧版 macOS 安装包就像 “隐藏副本”&am…...

mac连接lniux服务器教学笔记

从你的检查结果看&#xff0c;容器内已经安装了 XFCE 桌面环境&#xff08;xfce.desktop 和 xubuntu.desktop 的存在说明桌面环境已存在&#xff09;。以下是针对 Docker 容器环境的远程桌面配置方案&#xff1a; 一、容器内快速配置远程桌面&#xff08;XFCE VNC&#xff09;…...

网站公安备案流程及审核时间

在中国&#xff0c;网站运营除了需要 ICP备案&#xff08;工信部备案&#xff09;&#xff0c;还需完成 公安备案&#xff08;公安机关互联网站安全备案&#xff09;。以下是详细流程及审核时间说明&#xff1a; 一、公安备案流程 1. 备案对象 所有在中国境内运营的网站&#…...

python学生作业提交管理系统-在线作业提交系统

目录 技术栈介绍具体实现截图系统设计研究方法&#xff1a;设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示 技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理&#xff0c;难度适中&#xf…...

从颜料混色到网络安全:DH算法的跨界智慧

一、颜料混色的秘密 想象一下&#xff0c;你和朋友各自有一罐私密的颜料&#xff0c;但你们想共同调出一种只有彼此知道的新颜色&#xff0c;而旁观者即使看到你们的操作也无法复现。奇怪的是&#xff0c;你们全程没有直接交换颜料&#xff0c;却能达成共识——这就是**迪菲-赫…...

初学者的AI智能体课程:构建AI智能体的十堂课

初学者的AI智能体课程:构建AI智能体的十堂课 在人工智能(AI)领域,AI智能体正在逐渐发挥其不容忽视的作用。自动化的智能体不仅仅在理论上广泛讨论,更加在实际应用中开辟了一片新的天地。那么如何动手开发属于自己的AI智能体呢?Microsoft提供的AI智能体入门课正是为此而设…...

数据结构 - 8( AVL 树和红黑树 10000 字详解 )

一&#xff1a;二叉搜索树 1.1 回顾二叉搜索树 我们在树的章节中学习了二叉搜索树的概念。二叉搜索树满足以下性质&#xff1a;如果它的左子树存在&#xff0c;则左子树所有节点的值均小于根节点的值&#xff1b;如果右子树存在&#xff0c;则右子树所有节点的值均大于根节点…...

Tcp 通信简单demo思路

Server 端 -------------------------- 初始化部分 ------------------------------- 1.创建监听套接字&#xff1a; 使用socket(协议家族&#xff0c;套接字的类型&#xff0c;0) 套接字类型有 SOCK_STREAM&#xff1a;表示面向连接的套接字&#xff08;Tcp协议&#xff09;&…...

Cesium 导航控件(指南针 + 缩放按钮),自定义放置位置

Cesium 导航控件&#xff08;指南针 缩放按钮&#xff09; Cesium 导航控件&#xff08;指南针 缩放按钮&#xff09;的功能实现&#xff0c;从技术角度来看&#xff0c;可以整理出一整套实现流程和技术结构。这套流程结合了以下几个核心技术点&#xff1a; 1、整体功能目标 …...

MySQL的索引和事务

目录 1、索引 1.1 查看索引 1.2 创建索引 1.3 删除索引 1.4 索引的实现 2、事务 1、索引 索引等同于目录&#xff0c;属于针对查询操作的一个优化手段&#xff0c;可以通过索引来加快查询的速度&#xff0c;避免针对表进行遍历。 主键、unique和外键都是会自动生成索引的…...

【Fifty Project - D25】

今日完成记录 TimePlan完成情况9&#xff1a;00 - 11&#xff1a;30大论文修改修改情况书小论文修改√16&#xff1a;00 - 17 &#xff1a;00Leetcode√ Leetcode 每日一题 到达最后一个房间的最小时间II&#xff1a;和昨天的每日一题大致一样&#xff0c;增加一个条件&…...

pip下载tmp不够

问题描述 今天遇到一个小问题&#xff0c;在用pip安装的时候提示 ERROR: Could not install packages due to an OSError: [Errno 28] No space left on device 但我们单位用于生产环境的机器磁盘都是基本是论TB的&#xff0c;怎么会不够呢&#xff1f; 原因分析&#xff1a;…...

一种机载扫描雷达实时超分辨成像方法——论文阅读

一种机载扫描雷达实时超分辨成像方法 1. 专利的研究目标与产业意义1.1 研究目标与实际问题1.2 产业意义2. 专利的创新方法:滑窗递归优化与实时更新2.1 核心模型与公式2.2 与传统方法对比优势3. 实验设计与验证3.1 仿真参数3.2 实验结果4. 未来研究方向与挑战4.1 学术挑战4.2 技…...

nginx 会话保持(cookie的配置)

nginx会话保持主要有以下几种实现方式。 1. ip_hash ip_hash使用源地址哈希算法,将同一客户端的请求总是发往同一个后端服务器,除非该服务器不可用。 ip_hash语法: upstream backend { ip_hash; server backend1.example.com; server backend2.example.com; …...

nginx 实现动静分离

环境 : 三个机器,准备一个nginx代理 两个http 分别处理动态和静态 知识点--expires expires功能说明---(为客户端配置缓存时间) nginx缓存的设置可以提高网站性能,对于网站的图片,尤其是新闻网站,图片一旦发布,改动的可能是非常小的,为了减小对服务器请求的压力,提高…...

k8s的pod挂载共享内存

k8s的pod挂载共享内存&#xff0c;限制不生效问题&#xff1a; 注&#xff1a;/dev/shm 是 Linux 系统中用于共享内存的特殊路径。通过将 emptyDir 的 medium 设置为 Memory&#xff0c;可以确保 /dev/shm 正确地挂载到一个基于内存的文件系统&#xff0c;从而实现高效的共享内…...

Java高频面试之并发编程-14

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天又来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;指令重排有限制没有&#xff1f;happens-before 又是什么&#xff1f; 在并发编程中&#xff0c;指令重排&#xff08;…...

Linux基础(最常用基本命令)

1.查看文件ls 1.1 格式 ls 选项 参数&#xff0c;如&#xff1a;ls -lah ~/ 1.2 选项设置&#xff1a; -l&#xff1a;list 以列表方式显示文件 -h&#xff1a;human-readable 以人类可读的方式显示文件大小(会将纯数字转换为kb&#xff0c;mb) -a&#xff1a;all 显示所有的…...

【Python 日期和时间】

Python 中处理日期和时间主要依赖 datetime 模块&#xff0c;结合 dateutil 和 pytz 等第三方库可实现更复杂的需求。以下是日期和时间处理的核心知识点&#xff1a; 一、基础模块 1. datetime 模块 核心类&#xff1a;datetime, date, time, timedelta安装依赖&#xff1a;p…...

C#简易Modbus从站仿真器

C#使用NModbus库&#xff0c;编写从站仿真器&#xff0c;支持Modbus TCP访问&#xff0c;支持多个从站地址和动态启用/停用从站&#xff08;模拟离线&#xff09;&#xff0c;支持数据变化&#xff0c;可以很方便实现&#xff0c;最终效果如图所示。 项目采用.net framework 4.…...

FPGA图像处理(四)------ 图像裁剪

timescale 1ns / 1ps // // Description: 图像裁剪算法 // module image_crop(input wire clk,input wire reset,input wire [10:0] img_width,input wire [10:0] img_height,input wire [10:0] img_x_start,input wire [10:0] img_x_end,input wire [10:0] img_y_start,input…...

1.MySQL数据库初体验

1.1数据库简介 1.1.1使用数据库的必要性 使用数据库可以高效且条理分明地存储数据&#xff0c;使人们能够更加迅速、方便地管理数据。 数据库特点&#xff1a; a.可以结构化存储大量地数据信息&#xff0c;方便用户进行有效的检索 b.可以有效地保持数据信息的一致性、完整…...

量子密码的轻量级通信协议笔记

代码笔记 本文档提供了项目代码的详细说明&#xff0c;包括代码结构、关键算法实现和重要的代码片段。 代码结构 . ├── Makefile # 构建系统配置 ├── coap_client.c # CoAP客户端实现 ├── coap_server.c # CoAP服务端实现 ├─…...