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

千峰React：Hooks（下）

news 来源：原创 2025/9/13 6:14:57

useLayoutEffect

useLayoutEffect在useEffect之前触发

这样会闪屏，因为是异步的，两次都渲染了

import {useEffect,useState } from 'react';function App() {const [msg,setMsg] = useState('hello App')useEffect(() => {setMsg('hello useEffect')});return (<div >{msg}</div>);
}export default App;

换上useLayoutEffect不闪屏，在异步的情况是等两者都执行完以后渲染

import {useLayoutEffect,useState } from 'react';function App() {const [msg,setMsg] = useState('hello App')useLayoutEffect(() => {setMsg('hello useEffect')});return (<div >{msg}</div>);
}export default App;

触发多次的时候还是useEffect好，解决闪屏问题用useLayoutEffect

useInsertionEffect Dom

触发顺序是123

import { useEffect, useLayoutEffect, useState } from 'react'function App() {//触发顺序：3->2->1useEffect(() => {console.log(1)})useLayoutEffect(() => {console.log(2)})useInsertionEffect(() => {console.log(3)})return <div></div>
}export default App

有些团队喜欢在js里写样式，这叫CSS-in-Js

有三种实现方法：

useEffect和useLayoutEffect是在jsx渲染后走的样式，会造成浏览器的频繁计算，有性能影响，一般都用useInsertionEffect


import { useInsertionEffect, useRef } from 'react'function App() {const ref = useRef(null)useInsertionEffect(() => {const style = document.createElement('style')style.innerHTML = `.box{background:red;width:100px;height:100px;}`document.head.appendChild(style)})return <div className='box' ref={ref}>哈哈哈</div>
}export default App

Reducer和Context

Reducer的统一状态管理集合

Reducer是整合状态的工具，我们之前学过useState来组织状态，Reducer可以规划复杂的组件逻辑

内里的逻辑其实就是switch

import { useActionState, useReducer, useState } from 'react'//由外部函数来完成逻辑操作
function listReducer(state, action) {switch (action.type) {case 'add':return [...state, { id: 4, text: 'ddd' }]case 'edit':return state.map((item) => {if (action.id === item.id) {return { ...state, id:action.id,text: 'new ' + item.text }} else {return item}})case 'remove':return state.filter((item) => {if (action.id === item.id) {return false} else return true})}
}function App() {const [list, dispatch] = useReducer(listReducer, [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },])return (<div><input type='text' /><buttononClick={() => {dispatch({ type: 'add' })}}>添加</button><ul>{list.map((item) => {return (<li key={item.id}>{item.text}<buttononClick={() => {dispatch({ type: 'edit', id: item.id })}}>编辑</button><buttononClick={() => {dispatch({ type: 'remove', id: item.id })}}>删除</button></li>)})}</ul></div>)
}export default App

之前我们学了Immer可以整合对状态变量的修改，其实useImmerReducer可以实现整合状态变量的修改+起到多个状态管理的作用

这是用immer改写的代码，效果也是一样的

import { useImmerReducer } from 'use-immer'//由外部函数来完成逻辑操作
function listReducer(draft, action) {switch (action.type) {case 'add':draft.push({ id: 4, text: 'ddd' })breakcase 'edit':const value = draft.find((item) => item.id === action.id)value.text='new '+value.textbreakcase 'remove':const index = draft.findIndex((item) => item.id === action.id)draft.splice(index,1)}
}function App() {const [list, dispatch] = useImmerReducer(listReducer, [{ id: 1, text: 'aaa' },{ id: 2, text: 'bbb' },{ id: 3, text: 'ccc' },])return (<div><input type='text' /><buttononClick={() => {dispatch({ type: 'add' })}}>添加</button><ul>{list.map((item) => {return (<li key={item.id}>{item.text}<buttononClick={() => {dispatch({ type: 'edit', id: item.id })}}>编辑</button><buttononClick={() => {dispatch({ type: 'remove', id: item.id })}}>删除</button></li>)})}</ul></div>)
}export default App

Context向组件深层传递数据

props通常只能实现父子间的信息传递，Context是跨组件通信的一种方案

比如我们在这里三个组件，实现祖孙级别的通信👇

function Tittle({ count }) {return (<div>Hello Tittle{'我是Tittle,这是我接收的参数：'}{count}</div>)
}function Head({ count }) {return (<div>Hello Head<Tittle count={count} /></div>)
}function App() {return (<div>Hello App<Head count={123} /></div>)
}
export default App

count通过App->Head，最后传给Tittle

如果使用Context就可以跨组件通信了

import { createContext, useContext } from 'react'
const Context = createContext()//定义钩子，尽量大写function Tittle() {const value = useContext(Context)//定义接收的参数return (<div>Hello Tittle{'我是Tittle,这是我接收的参数：'}{value}</div>)
}function Head() {return (<div>Hello Head<Tittle /></div>)
}function App() {return (<div>Hello App<Context.Provider value={123}>'{提供数据}'<Head /></Context.Provider></div>)
}
export default App

这里传递的参数只有一个值，如果传递多个可以写成数组或者对象：

function App() {return (<div>Hello App<Context.Provider value={[1,2,3,4,5]}><Head /></Context.Provider></div>)
}

import { createContext, useContext } from 'react'
const Context = createContext()function Tittle() {const value = useContext(Context)return (<div>Hello Tittle{'我是Tittle,这是我接收的参数：'}{'id:' + value.id}{'text:' + value.text}</div>)
}function Head() {return (<div>Hello Head<Tittle /></div>)
}function App() {return (<div>Hello App<Context.Provider value={{id:1,text:'aaa'}}><Head /></Context.Provider></div>)
}
export default App

但是不管传递多少个数据，只能通过value来传递

跨组件传递的状态变量，也会在渲染的时候重新传递、重新渲染

Reducer配合Context实现共享状态管理

实现父子通信用props，实现深层通信用context，实现兄弟间通信怎么做？

一个方法是使用状态提升，把状态提到两个兄弟的公共区域，再从公共区域通过父子通信的方式传回去，但是不够灵活

太复杂的可以用第三方库

但是React里，把这俩玩意一起用，Context可以跨组件通信，Reducer可以整合组件更新逻辑，也可以实现兄弟通信

六月份学长说建议以后使用redux，反正我也看不懂，就这样吧

memo

我们在父组件里调用子组件，父组件有改变，子组件内部无需渲染的情况下，其实还是会渲染的👇

可以看见子组件里面的随机数在改变

为了节省性能，可以使用memo来优化效率

import { useState,memo } from 'react'const Head = memo(function Head() {return (<div>Hello Head,{ Math.random()}</div>)
}
)
function App() {const [count, setCount] = useState(0)const handleClick = () => {setCount(count + 1)}return (<div>Hello App<button onClick={handleClick}></button><Head /></div>)
}
export default App

可以看见随机数并没有改变

useMemo对计算结果进行缓存

import { useState,memo } from 'react'const Head = memo(function Head() {return (<div>Hello Head,{ Math.random()}</div>)
}
)
function App() {const [count, setCount] = useState(0)const [msg, setMsg] = useState('hello React')const list=[msg.toLocaleLowerCase(),msg.toLocaleUpperCase()]const handleClick = () => {setCount(count + 1)}return (<div>Hello App<button onClick={handleClick}></button><Head list={list} /></div>)
}
export default App

按理来说，Head加了memo应该是不会重新刷新的对吧

但是其实刷新两次，随机数还是不同的

因为引用类型的判别（之前说过）

这时候要用useMemo来解决引用类型在Object.Is()方法被判定为不同导致重新渲染耗费性能的问题

useMemo是靠缓存上次结果，拿上次结果做对比的

import { useState,memo,useMemo } from 'react'const Head = memo(function Head() {return (<div>Hello Head,{ Math.random()}</div>)
}
)
function App() {const [count, setCount] = useState(0)const [msg, setMsg] = useState('hello React')const list = useMemo(() => [msg.toLocaleLowerCase(),msg.toLocaleUpperCase()])//只有msg被修改时，list才会重新计算，其他情况都是拿上次缓存的值const handleClick = () => {setCount(count + 1)}return (<div>Hello App<button onClick={handleClick}></button><Head list={list} /></div>)
}
export default App

useCallback对函数进行缓存

上面的代码我们引用的是数组，这里写一个函数：


import { useState,memo,useMemo } from 'react'const Head = memo(function Head() {return (<div>Hello Head,{ Math.random()}</div>)
}
)
function App() {const [count, setCount] = useState(0)const [msg, setMsg] = useState('hello React')const fn = () => {console.log(msg)}//const list = useMemo(() => [msg.toLowerCase(),msg.toUpperCase()],[msg])//只有msg被修改时，list才会重新计算，其他情况都是拿上次缓存的值const handleClick = () => {setCount(count + 1)}return (<div>Hello App<button onClick={handleClick}>点我</button><Head fn={fn} /></div>)
}
export default App

还是会多渲染，所以我们用useCallback，useCallback其实就是省略了useMemo里面套两个回调的写法：

import { useState,memo,useMemo, useCallback } from 'react'const Head = memo(function Head() {return (<div>Hello Head,{ Math.random()}</div>)
}
)
function App() {const [count, setCount] = useState(0)const [msg, setMsg] = useState('hello React')const fn = useCallback(() => {console.log(msg)},[msg])const handleClick = () => {setCount(count + 1)}return (<div>Hello App<button onClick={handleClick}>点我</button><Head fn={fn} /></div>)
}
export default App

startTransition方法及并发模式

我们react居然还有并发

import { useState,memo,useMemo, useCallback, startTransition } from 'react'function List({ query}) {const items = []const word = 'hello World'if (query !== '' && word.includes(query)) {const arr = word.split(query)for (let i = 0; i < 1000; i++) {items.push(<li key={i}>{arr[0]}<span style={{color:'red'}}>{query}</span></li>)}} else {for(let i=0;i<1000;i++){items.push(<li key={i}>{ word}</li>)}}return (<ul>{items}</ul>)
}function App() {const [search, setSearch] = useState('')const [query,setQuery]=useState('')const handleChange = (e) => {//紧急setSearch(e.target.value)//将这个任务设置为非紧急startTransition(() => { setQuery(e.target.value)})}return (<div>Hello App<input type="text" value={search} onChange={handleChange} /><List query={ query} /></div>)
}
export default App

设计成非紧急任务以后，就先在输入框流畅的显示输入的字符串，再染色

如果两个都是紧急任务的话，就得等两个都完成

useTransition与useDeferredValue

在加载的时候显示loading

import { useState,memo,useMemo, useCallback, startTransition ,useTransition} from 'react'function List({ query}) {const items = []const word = 'hello World'if (query !== '' && word.includes(query)) {const arr = word.split(query)for (let i = 0; i < 1000; i++) {items.push(<li key={i}>{arr[0]}<span style={{color:'red'}}>{query}</span></li>)}} else {for(let i=0;i<1000;i++){items.push(<li key={i}>{ word}</li>)}}return (<ul>{items}</ul>)
}function App() {const [search, setSearch] = useState('')const [query, setQuery] = useState('')const [pending, startTransition] = useTransition()const handleChange = (e) => {//紧急setSearch(e.target.value)//将这个任务设置为非紧急startTransition(() => { setQuery(e.target.value)})}return (<div>Hello App<input type="text" value={search} onChange={handleChange} />{pending && <div>loading...</div>}<List query={ query} /></div>)
}
export default App

useDeferredValue的使用

import { useState,memo,useMemo, useCallback, startTransition ,useTransition, useDebugValue, useDeferredValue} from 'react'function List({ query}) {const items = []const word = 'hello World'if (query !== '' && word.includes(query)) {const arr = word.split(query)for (let i = 0; i < 1000; i++) {items.push(<li key={i}>{arr[0]}<span style={{color:'red'}}>{query}</span></li>)}} else {for(let i=0;i<1000;i++){items.push(<li key={i}>{ word}</li>)}}return (<ul>{items}</ul>)
}function App() {const [search, setSearch] = useState('')const query = useDeferredValue(search)const handleChange = (e) => {//紧急setSearch(e.target.value)}return (<div>Hello App<input type="text" value={search} onChange={handleChange} /><List query={query} /></div>)
}
export default App

useId生成唯一id值

很少用，会在一些无障碍的操作用到

如果两次调用同一个组件，会发现这两个组件的id一样

function MyInput() {return (<div><label>密码：<input type="password" aria-describedby="password" /></label><p id="password">密码至少包含18个字符</p></div>)
}function App() {return (<div>Hello App<MyInput /><MyInput /></div>);
}export default App;

id相同👇但是最好不应该相同

import { useId } from 'react-id-generator'function MyInput() {const password = useId()return (<div><label>密码：<input type="password" aria-describedby={password} /></label><p id={password}>密码至少包含18个字符</p></div>)
}function App() {return (<div>Hello App<MyInput /><MyInput /></div>);
}export default App;

生成两个不同的id

千峰React：Hooks（下）

useLayoutEffect useLayoutEffect在useEffect之前触发这样会闪屏，因为是异步的，两次都渲染了 import {useEffect,useState } from react;function App() {const [msg,setMsg] useState(hello App)useEffect(() > {setMsg(hello useEffect)});retu…...

编程日记 2025/9/13 6:14:57

突破网络壁垒：实现 Mac SSH 访问 Windows WSL Ubuntu 的最佳实践20250301

突破网络壁垒：实现 Mac SSH 访问 Windows WSL Ubuntu 的最佳实践背景与痛点在现代开发环境中，开发者通常会面临不同操作系统之间的协同工作。例如： 主要开发环境位于 Windows 的 WSL Ubuntu 子系统需要从局域网内的 Mac 设备进行远程访问…...

编程日记 2025/9/11 19:41:29

【开源-鸿蒙土拨鼠大理石系统】鸿蒙 HarmonyOS Next App+微信小程序+云平台

✨本人自己开发的开源项目：土拨鼠充电系统 ✨踩坑不易，还希望各位大佬支持一下，在GitHub给我点个 Start ⭐⭐👍👍 ✍GitHub开源项目地址👉：https://github.com/lusson-luo/HarmonyOS-groundhog-…...

编程日记 2025/9/12 7:02:38

RAG 阿里云

RAG-阿里云Spring AI Alibaba官网官网 RAG-阿里云Spring AI Alibaba官网官网 AI应用跑起来，取消一下航班的操作666...

编程日记 2025/9/12 2:00:33

python -ssh学习

def exe_sshcmd(ip,username,userpswd,port,cmd): """ 功能：SSH登录到指定设备，并执行对应的命令入参：前四项为ssh登录shell的ip和port，具备管理员权限的用户名和密码， cmd可以…...

编程日记 2025/9/13 6:12:26

【Java学习】内部类

面向对象系列六一、类级别 1.静态成员 2.非静态成员与方法二、类的创建与成员管理 1.类的创建 2.类的成员管理三、常见的内部类 1.非静态内部类 2.静态内部类 3.匿名内部类 4.局部内部类一、类级别 1.1静态成员静态成员是类级别的是能一路直属都是在类层面的&…...

编程日记 2025/9/13 6:12:25

养生，开启健康生活之门

在这个快节奏的时代，人们在忙碌奔波中，往往忽略了自身健康。养生保健，不再是老年人的专属，而是各个年龄段维持良好生活状态的关键，它是我们开启健康生活的一把钥匙。规律作息是养生的基石。人体就像一台精密的仪器&am…...

编程日记 2025/9/10 8:55:43

1-3压缩命令

文章目录 1. tar1.1 压缩（.tar.gz .tgz .tar.bz2 ）1.2 解压缩(.tar.gz .tgz .tar.bz2 ) 2.zip2.1 压缩(.zip)2.2 解压缩 3.xz3.1 压缩（.tar.xz）3.2 解压缩 1. tar 1.1 压缩（.tar.gz .tgz .tar.bz2 ） c…...

编程日记 2025/9/12 15:30:24

Dify使用和入门

第一步：了解 Dify 在开始之前，先简单了解一下 Dify 是什么： Dify 是一个开源的 LLM 应用开发平台，专注于帮助开发者快速构建生产级的生成式 AI 应用。它支持知识库集成、RAG（检索增强生成）技术、复杂工作…...

编程日记 2025/9/12 21:49:17

AcWing 5933：爬楼梯 ← 递归 / 递推 / 高精度

【题目来源】 https://www.acwing.com/problem/content/5936/ 【题目描述】树老师爬楼梯，他可以每次走 1 级或者 2 级，输入楼梯的级数，求不同的走法数。例如：楼梯一共有 3 级，他可以每次都走一级，或者第…...

编程日记 2025/9/13 6:12:26

WebGL 渲染器 WebGLRenderer

目录 Three.js封装的渲染器 .domElement属性 .setSize(width, height)方法帧缓冲区的相关封装渲染器方法.clear(color,depth,stencil) 渲染器方法.clearDepth() 渲染器属性.autoClear Three.js封装的渲染器 .domElement属性如果想通过WebGL渲染一个三维场景&#…...

编程日记 2025/9/11 1:25:32

基于Three.js的3D赛车游戏开发实战详解

目录一、项目效果预览二、核心技术架构2.1 三维场景构建2.2 赛道与车辆模型2.3 光照系统三、核心运动系统3.1 车辆运动控制3.2 物理模拟公式3.3 边界限制四、摄像机控制系统4.1 第三人称视角数学原理4.2 鼠标交互实现五、星空背景特效5.1 点云生成算法5.2 动态闪烁效果六、性能…...

编程日记 2025/9/10 1:41:24

⭐算法OJ⭐位操作实战【计数】（C++ 实现）

191. Number of 1 Bits Given a positive integer n, write a function that returns the number of set bits in its binary representation (also known as the Hamming weight). int hammingWeight(uint32_t n) {int count 0;while (n) {count n & 1; // 检查最低位…...

编程日记 2025/9/11 3:13:59

【通俗讲解电子电路】——从零开始理解生活中的科技(一)

导言：电子电路为什么重要？ ——看不见的“魔法”，如何驱动你的生活？ 清晨，当你的手机闹钟响起时，你可能不会想到，是电子电路在精准控制着时间的跳动；当你用微波炉加热早餐时&#…...

编程日记 2025/9/11 10:14:07

浏览器JS打不上断点，一点就跳到其他文件里。浏览器控制台 js打断点，指定的位置打不上断点，一打就跳到其他地方了。

关闭JavaScript 源代码映射，F12开发者模式设置->偏好设置->源代码/来源->JavaScript 源代码映射。肯定不是这个原因导致的，但这个办法可以暂时解决问题，点完这个东西就隐藏了webpack，有懂的来讲讲。又浪费一个小时…...

编程日记 2025/9/13 1:29:29

浅谈人工智能之Windows安装llama factory

浅谈人工智能之Windows安装llama factory Llama Factory 是一个强大的工具，旨在帮助用户轻松管理和优化Llama模型的训练和部署。在某些情况下，您可能需要在部分互联网连接的环境中安装和使用Llama Factory。本文将详细介绍如何在Windows系统上这种情况下…...

编程日记 2025/9/13 0:40:05

mac电脑中使用无线诊断.app查看连接的Wi-Fi带宽

问题需要检查连接到的Wi-Fi的AP硬件支持的带宽。步骤 1.按住 Option 键，然后点击屏幕顶部的Wi-Fi图标；2.从下拉菜单中选择 “打开无线诊断”（Open Wireless Diagnostics）；3.你可能会看到一个提示窗口，…...

编程日记 2025/9/13 0:00:48

Python--内置模块和开发规范（下）

2. 开发规范 2.1 单文件应用文件结构示例 # 文件注释 import os import jsonDB_PATH "data.json" # 常量放顶部def load_data():"""函数注释：加载数据"""if os.path.exists(DB_PATH):with open(DB_PATH, "r"…...

编程日记 2025/9/12 2:18:27

vue3配置端口，比底部vue调试

import { fileURLToPath, URL } from ‘node:url’ import { defineConfig } from ‘vite’ import vue from ‘vitejs/plugin-vue’ import vueJsx from ‘vitejs/plugin-vue-jsx’ // 关闭vue底部调试模式 // import vueDevTools from ‘vite-plugin-vue-devtools’ // htt…...

编程日记 2025/9/12 1:24:22

代码随想录day51

647. /** lc appleetcode.cn id647 langcpp** [647] 回文子串*/// lc codestart #include<iostream> #include<vector> #include<string> using namespace std; class Solution { public:int countSubstrings(string s) {vector<vector<bool>> …...

编程日记 2025/9/13 6:14:57

B2B2C多语言电商系统代销逻辑设计和开发

随着全球电商市场的快速发展，B2B2C（Business-to-Business-to-Consumer）模式逐渐成为企业拓展业务的重要方式。特别是在多语言、多文化的国际市场环境中，B2B2C多语言电商系统的代销功能为企业提供了灵活的业务模式，帮助…...

编程日记 2025/9/8 15:06:38

示波器探头衰减值：简单来说就是“信号缩小器

一、什么是衰减值衰减值就是探头把信号“缩小”多少倍再传给示波器。比如： 1X衰减：信号原样传输（不缩小），适合测小电压（比如手机电池3.7V）。 10X衰减：信号缩小10倍，适…...

编程日记 2025/9/10 11:46:38

Nginx系列06（Nginx 缓存配置、SSL/TLS 配置）

目录 Nginx 缓存配置 SSL/TLS 配置 Nginx 缓存配置概念：Nginx 缓存配置允许服务器将频繁访问的资源（如网页、图片、脚本等）存储在内存或磁盘中，当再次接收到相同请求时，直接从缓存中读取并返回，减少对后…...

编程日记 2025/9/13 0:30:57

JavaScript——前端基础3

目录 JavaScript简介优点可做的事情运行第一个JavaScript程序搭建开发环境安装的软件操作在浏览器中使用JavaScript文件分离JS 使用node运行JS文件语法变量与常量原生数据类型模板字符串字符串的内置方法数组对象对象数组和JSON if条件语…...

编程日记 2025/9/12 16:02:44

操作系统知识点12

1.在操作系统的结构设计中，采用层次结构的操作系统其最大优点是把整体问题局部化 2.非特权指令是指操作系统和用户均可以使用的指令 3.向处理器发出的中断信号称为中断请求 4.轮转法RR是单纯基于时间片考虑的 5.当进程处于就绪状态时，表示进程已获得…...

编程日记 2025/9/13 4:09:23

(七)趣学设计模式之适配器模式！

目录一、啥是适配器模式？二、为什么要用适配器模式？三、适配器模式的实现方式1. 类适配器模式（继承插座 👨‍👩‍👧‍👦）2. 对象适配器模式（插座转换器 &#x1f50c…...

编程日记 2025/9/8 6:53:02

RBF神经网络+NSGAII多目标优化算法，工艺参数优化、工程设计优化（Matlab）

目录效果一览基本介绍程序设计参考资料效果一览基本介绍 1.RBF神经网络NSGAII多目标优化算法（Matlab完整源码和数据） 多目标优化是指在优化问题中同时考虑多个目标的优化过程。在多目标优化中，通常存在多个冲突的目标，即改善一…...

编程日记 2025/9/8 22:27:57

IP段转CIDR：原理Java实现

🧑 博主简介：CSDN博客专家，历代文学网（PC端可以访问：https://literature.sinhy.com/#/?__c1000，移动端可微信小程序搜索“历代文学”）总架构师，15年工作经验，精通Java编…...

编程日记 2025/9/11 9:31:39

工会考试知识点分享

工会考试涵盖工会基础知识、劳动法及相关法律法规、时政等内容，以下是一些常见的知识点分享： 工会基础知识工会的性质与职能：工会是职工自愿结合的工人阶级的群众组织，基本职责是维护职工合法权益，同时还具有组织、…...

编程日记 2025/9/11 17:35:38

Java进阶——Stream流以及常用方法详解

本文详细介绍了 Java Stream 流的重要知识点。包括数据源与操作分离（不存储数据，不可复用）、惰性求值与短路优化；以及流的创建方式，如集合创建、数组 / 值创建、文件创建；然后介绍中间操作，像过…...

编程日记 2025/9/10 15:13:23

数据如何安全“过桥”？分类分级与风险评估，守护数据流通安全

信息化高速发展，数据已成为企业的核心资产，驱动着业务决策、创新与市场竞争力。随着数据开发利用不断深入，常态化的数据流通不仅促进了信息的快速传递与共享，还能帮助企业快速响应市场变化，把握商业机遇，实…...

编程日记 2025/9/12 9:11:11

Kubernetes LimitRange对于pod 的 update 事件会不会处理？

在 Kubernetes 中，LimitRange 是一个用于限制命名空间中 Pod 或容器资源使用的对象。它主要限制资源请求（requests）和资源限制（limits），如 CPU 和内存。LimitRange 影响的是 Pod 或容器的创建（c…...

编程日记 2025/9/11 16:34:40

服务器禁止操作汇总（Server Prohibits 0peration Summary）

服务器禁止操作汇总一、禁忌操作TOP10 1. 直接断电关机 💥 血泪案例：某物流公司运维拔电源强制关机，导致数据库事务中断，20万订单状态丢失。 📌 技术解析： • 直接断电可能引发： ✅ 文件系统…...

编程日记 2025/9/8 0:22:42

Android Studio 新版本Gradle通过JitPack发布Maven仓库示例

发布本地仓库示例：https://blog.csdn.net/loutengyuan/article/details/145938967 以下是基于 Android Studio 24.2.2（Gradle 8.10.2 AGP 8.8.0 JDK17） 的通过JitPack发布Maven仓库示例，包含aar和jar的不同配置： 1.…...

编程日记 2025/9/11 12:41:59

Spring Boot 测试：单元、集成与契约测试全解析

一、Spring Boot 分层测试策略 Spring Boot 应用采用经典的分层架构，不同层级的功能模块对应不同的测试策略，以确保代码质量和系统稳定性。 Spring Boot 分层架构： Spring Boot分层架构 A[客户端] -->|HTTP 请求| B[Controller 层] …...

编程日记 2025/9/11 0:42:43

一个便捷的web截图库~

随着时间的发展，前端开发的范围越来越广，能够实现的功能也越来越多，要实现的功能也五花八门，今天就给大家介绍一个web截图库,让前端也能实现截图功能—— js-web-screen-shot js-web-screen-shot js-web-screen-shot 是一个基于 …...

编程日记 2025/9/8 13:34:09

【HTML— 快速入门】HTML 基础

准备工作 vscode下载百度网盘 Subline Text 下载 Sublime Text下载百度网盘 vscode 下载 Sublime Text 是一款轻量好用的文本编辑器，我们在写前端代码时，使用 Sublime Text 打开比使用记事本打开，得到的代码体验更好，比 vscode…...

编程日记 2025/9/9 3:25:33

github操作

在本地创建一个 Git 仓库并将其上传到 GitHub 的整个流程可以分为以下几个步骤。以下是详细的说明和对应的命令： 1. 安装 Git 确保你的系统已经安装了 Git。如果未安装，可以通过以下方式安装： Windows: 下载 Git for Windows 并安装。macOS…...

编程日记 2025/9/8 18:51:45

基于ArcGIS Pro、R、INVEST等多技术融合下生态系统服务权衡与协同动态分析实践应用

文章目录前言第一章、生态系统服务第二章、平台基础一、ArcGIS Pro介绍二、R环境配置与基础操作第三章、数据获取与预处理第四章、生态系统服务估算第五章、生态系统服务权衡与协同第六章、空间统计分析第七章、论文撰写与图表复现了解更多 ————————————————…...

编程日记 2025/9/10 9:54:55

Python Cookbook-2.18 从指定的搜索路径寻找文件

任务给定一个搜索路径(一个描述目录信息的字符串)，需要根据这个路径和请求的文件名找到第一个符合要求的文件。解决方案需要循环指定的搜索路径中的目录: import os def search_file(filename,search path，pathsepos.pathsep): """…...

编程日记 2025/9/7 18:03:22

遗传算法详解及在matlab中的使用

遗传算法分析一遗传算法概述1 算法概念2 基本特点3 启发式算法二原理与方法1 实现步骤1.1 个体编码1.2 种群初始化1.3 适应度计算1.4 选择运算1.5 交叉运算1.6 变异运算 2 总结三应用实例1 GA工具使用教程2 设置目标函数3 搜索最小值4 搜索最大值一遗传算法概述本章简…...

编程日记 2025/9/11 21:41:24

智能AI替代专家系统(ES)、决策支持系统(DSS)？

文章目录前言一、专家系统（ES）是什么？二、决策支持系统（DSS）是什么？1.决策支持系统定义2.决策系统的功能与特点3.决策支持系统的组成三、专家系统（ES）与决策支持系统（D…...

编程日记 2025/9/4 21:45:34

活在AI原生时代的05后，开始用AI创业

大家好，我是Shelly，一个专注于输出AI工具和科技前沿内容的AI应用教练，体验过300款以上的AI应用工具。关注科技及大模型领域对社会的影响10年。关注我一起驾驭AI工具，拥抱AI时代的到来。人工智能&AIGC术语100条 Shelly聊AI-重…...

编程日记 2025/9/8 6:24:51

【官方配图】win10/win11 安装cuda 和 cudnn

文章目录参考资料1.安装cuda toolkit1. 下载安装包2.安装验证 2. 安装cudnn下载cudnn安装包安装cudnn安装后的配置参考资料官方nvidia安装cuda官方nvidia安装cudnn 1.安装cuda toolkit 1. 下载安装包下载地址 https://developer.nvidia.com/cuda-downloads?target_osW…...

编程日记 2025/9/9 8:39:05

释放微软bing的力量：深度剖析其主要功能

在浩瀚无垠的互联网海洋中，搜索引擎就如同指南针，引领我们找到所需要的信息。微软必应凭借其一系列强大功能，在搜索引擎领域脱颖而出，成为极具竞争力的一员。在这篇博客文章中，我们将深入探讨微软必应的主要功能，这些功能使其独具特色，成为全球用户的得力工具。 1. 智能…...

编程日记 2025/9/8 0:37:57

【Nginx 】Nginx 部署前端 vue 项目

1. 项目打包 1.1 安装依赖在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行npm install命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官…...

编程日记 2025/9/10 1:41:26

DO-254航空标准飞行器电机控制器设计注意事项

DO-254航空标准飞行器电机控制器设计注意事项 1.核心要求1.1 设计保证等级（DAL）划分1.2生命周期管理1.3验证与确认2.电机控制器硬件设计的关键注意事项2.1需求管理与可追溯性2.2冗余与容错设计2.3验证与确认策略2.4元器件选型与管理2.5环境适应性设计2.6文档与配置管理3.应用…...

编程日记 2025/9/12 19:28:31