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

16.React学习笔记.React更新机制

一. 发生更新的时机以及顺序##

image.png
  1. props/state改变
  2. render函数重新执行
  3. 产生新的VDOM树
  4. 新旧DOM树进行diff
  5. 计算出差异进行更新
  6. 更新到真实的DOM

二. React更新流程##

React将最好的O(n^3)的tree比较算法优化为O(n)。

  • 同层节点之间相互比较,不跨节点。
  • 不同类型的节点,产生不同的树结构:如果该节点不同,会将旧tree中该节点的子树全部删掉。直接生成新的子树,挂载到DOM中。
  • 开发中,可以通过key来指定哪些节点在不同的渲染下保持稳定。

三. 不同情况##

情况一:对比不同类型的元素
当节点为不同的元素,React会拆卸原有的树,并且建立起新的树。

  • 当一个元素改变,会触发一个完整的重建流程。
  • 卸载一棵树时,对应的DOM节点也会被销毁,组件实例将执行componentWillUnmount()方法。
  • 建立一棵新树时,对应得DOM节点会被创建以及插入到DOM中,组件实例将执行componentWillMount()方法,紧接着componentDidMount()方法。
  • 子树销毁,元素不会复用。####

情况二:对比同一类型的元素

  • 当对比两个相同类型的React元素时,React会保留DOM节点,仅比对及更新有改变的属性, 比如下面例子:
image.png
  • React知道只需要修改DOM元素上的className属性。

image.png

-当 更新style属性时,React仅更新有所改变的属性,没有变化的属性不会变。

  • 如果是同类型的组件元素:组件会保持不变,React会更新该组件的props,并且调用componentWillReceiveProps()和componentWillUpdate()方法;
  • 下一步,调用render()方法,diff算法将在之前的结果以及新的结果中进行递归。

情况三:对子节点进行递归

image.png
  • 默认条件下,当递归DOM节点的子元素时,React会同时遍历两个子元素的列表;当产生差异时,生成一个mutation。
  • 如上图,前两个比较相同,不会有mutation。
  • 最后一个比较,产生一个mutation,将其插入到新的DOM树中即可。
  • 当然这是理想情况
image.png

如果我们在中间插入一条数据:

  • React会对每一个子元素产生一个mutation,而不是保持其不变。
  • 这种方式会有一定的性能问题。

所以这时需要key来优化###

四. key优化##

  1. 在尾部添加数据
  • 有无key意义并不大。
  1. 在前面插入数据
  • 这种情况,在没有key的情况下,所有li都需要进行修改。
  • 当子元素拥有key时,React使用key来匹配原有树上的子元素以及最新树上的子元素:这种情况下:原有的元素只是发生了位移。
  render() {return (<div><h2>电影列表</h2><ul>{this.state.movies.map((item,index) => {return <li key={item}>{item}</li>})}</ul><button onClick={e => this.insertMovie()}>添加电影</button></div>)}
  1. key的注意事项:
  • key应该是唯一的。
  • key不要使用随机数(随机数在下一次render时,会重新生成一个数字)。
  • 使用index作为key,对性能是没有优化的,id比较合适。

五. 组件嵌套的render调用##

import React, { Component } from 'react'// Header
function Header() {console.log("Header被调用");return <h2>我是Header组件</h2>
}// Banner
class Banner extends Component {render() {console.log('Banner的render函数被调用');return <h3>我是bannner组件</h3>}
}function ProductList() {console.log("ProductList被调用");return (<ul><li>商品列表1</li><li>商品列表2</li><li>商品列表3</li><li>商品列表4</li><li>商品列表5</li></ul>)
}
// Main
class Main extends Component {render() {console.log('Main render函数被调用');return (<div><Banner /><ProductList /></div >)}
}
// Footer
function Footer() {console.log("Footer被调用");return <h2>我是Footer组件</h2>
}export default class App extends Component {constructor(props) {super(props);this.state = {counter: 0,}}render() {console.log('App render函数被调用');return (<div><h2>当前计数:{this.state.counter}</h2><button onClick={e=>this.increment()}>+1</button><Header /><Main /><Footer /></div>)}increment(){this.setState({counter: this.state.counter + 1})}
}
  • 调用一个无关的函数,界面改变时,按理来说不应该让别的没有改变的东西重新render。
  • 这个例子中我们在前面插入了一个<h2>和<button>标签,现在点击按钮时全局都会重新渲染。
  • 现在对其进行优化

六. 组件嵌套的render调用的优化##

  • 调用完setState后,不想render时阻断其渲染。
  • 使用shouldComponentUpdate() {}这个生命函数,默认情况下其返回true,也就是重新渲染;手动设置为false后,将不会重新渲染,但不影响初始化的渲染。
  • 我们的目的是:想要阻断时阻断(事件发生后与界面没有依赖),不想阻断时渲染,如下代码。
  shouldComponentUpdate(nextProps, nextState){if(this.state.counter !== nextState.counter){return true;}return false;}

以上为简单情况,当组件变多后,情况将很复杂,函数/类组件都需要考虑到###

  • 每个类都设置该生命周期函数太麻烦。

  • 我们通过继承PureComponent而不是Component来进行简化,其会对state和props进行比较来决定是否重新render。

  • shouldComponentUpdate在源码中进行更新时,决定是否需要render。

  • 回溯到源码ReactFiberClassComponent中时,有如下方法:

function checkShouldComponentUpdate(workInProgress,ctor,oldProps,newProps,oldState,newState,nextContext,
) {const instance = workInProgress.stateNode;
// 判断有无该生命周期函数if (typeof instance.shouldComponentUpdate === 'function') {    
startPhaseTimer(workInProgress, 'shouldComponentUpdate');
// -----------------
// 核心代码const shouldUpdate = instance.shouldComponentUpdate(newProps,newState,nextContext,);stopPhaseTimer();return shouldUpdate;}
// -----------------if (ctor.prototype && ctor.prototype.isPureReactComponent) {return (!shallowEqual(oldProps, newProps) || !shallowEqual(oldState, newState));}return true;
}
  • 该方法最终返回true/false。
  • 这个对应React中PureComponent的特点
    image.png
  • 其中isPureReactComponent属性对应上面放出来源代码中对原型中isPureReactComponent属性的判断。
  • 如果有isPureReactComponent属性,则对oldProps,oldState和newProps,newState进行一个浅层比较。
  • 通过浅层比较来判断是否发生了改变。

追溯到shallowEqual方法源码中

import is from './objectIs';const hasOwnProperty = Object.prototype.hasOwnProperty;/*** Performs equality by iterating through keys on an object and returning false* when any key has values which are not strictly equal between the arguments.* Returns true when the values of all keys are strictly equal.*/
function shallowEqual(objA: mixed, objB: mixed): boolean {if (is(objA, objB)) {return true;}if (typeof objA !== 'object' ||objA === null ||typeof objB !== 'object' ||objB === null) {return false;}const keysA = Object.keys(objA);const keysB = Object.keys(objB);if (keysA.length !== keysB.length) {return false;}// Test for A's keys different from B.for (let i = 0; i < keysA.length; i++) {if (!hasOwnProperty.call(objB, keysA[i]) ||!is(objA[keysA[i]], objB[keysA[i]])) {return false;}}return true;
}export default shallowEqual;
  • 先判断两个对象,相同则true,返回后取反,表示不需要更新。
  • 接着分别判断两个对象,不是对象或者为null时返回false,强制刷新
  • 然后将两个对象中的keys取出来,若长度不想等则返回false,若相等,则对其中属性进行比较,不相等则返回false进行刷新。

这就回到我们案例中,只有App,Header,Footer的render被调用。

  • PureComponent对props和state进行shallowEqual 。
  • Main,Banner,ProductList没有依赖任何props/state,所以没有重新渲染。
  • 开发中只需要shallowEqual深层比较非常浪费性能。
  • PureComponent可以解决类组件的render调用,但解决不了函数式组件

七. memo的使用,优化函数式组件##

memo为高阶组件。

const MemoHeader = memo(function Header() {console.log("Header被调用");return <h2>我是Header组件</h2>
})
image.png
  • 我们将原来的函数组件传入memo函数中,生成一个新的组件类型。
  • 将Footer也进行转换,这样只有App重新渲染了,
  • 但我们没有更改ProductList,其也没有重新渲染,原因是在Main中,重新渲染已经被阻止了
  • 为了以防万一,也可以用memo优化。

理论上:建议所有类组件都用PureComponent,所有函数组件都包裹memo



喜欢的朋友记得点赞、收藏、关注哦!!!

相关文章:

16.React学习笔记.React更新机制

一. 发生更新的时机以及顺序## image.png props/state改变render函数重新执行产生新的VDOM树新旧DOM树进行diff计算出差异进行更新更新到真实的DOM 二. React更新流程## React将最好的O(n^3)的tree比较算法优化为O(n)。 同层节点之间相互比较&#xff0c;不跨节点。不同类型的节…...

React使用 useImperativeHandle 自定义暴露给父组件的实例方法(包括依赖)

关键词 React useImperativeHandle 摘要 useImperativeHandle 是 React 提供的一个自定义 Hook&#xff0c;用于在函数组件中显式地暴露给父组件特定实例的方法。本文将介绍 useImperativeHandle 的基本用法、常见应用场景&#xff0c;以及如何处理其依赖项&#xff0c;以帮…...

Vue 过渡动画实现全解析:打造丝滑交互体验

Vue 过渡动画实现全解析&#xff1a;打造丝滑交互体验 在当今竞争激烈的 Web 开发领域&#xff0c;用户体验已成为衡量项目成功与否的关键指标。过渡动画作为提升用户体验的利器&#xff0c;能让应用的交互更加丝滑流畅&#xff0c;给用户带来愉悦的使用感受。在 Vue.js 框架中…...

从 0 开始本地部署 DeepSeek:详细步骤 + 避坑指南 + 构建可视化(安装在D盘)

个人主页&#xff1a;chian-ocean 前言&#xff1a; 随着人工智能技术的迅速发展&#xff0c;大语言模型在各个行业中得到了广泛应用。DeepSeek 作为一个新兴的 AI 公司&#xff0c;凭借其高效的 AI 模型和开源的优势&#xff0c;吸引了越来越多的开发者和企业关注。为了更好地…...

Render上后端部署Springboot + 前端Vue 问题及解决方案汇总

有一个 Vue 前端 和 Spring Boot 后端的动态网页游戏&#xff0c;当前在本地的 5173 端口和运行。你希望生成一个公开链接&#xff0c;让所有点击链接的人都能访问并玩这个游戏。由于游戏原本需要在本地执行 npm install 后才能启动&#xff0c;你现在想知道在部署时是选择 Ren…...

Linux——信号的保存与处理

前言&#xff1a;本文主要介绍信号的保存与处理过程。 一、信号阻塞与信号底层逻辑 在linux下面的进程控制块(PCB),存在一个pending变量用于存放接收到的信号&#xff0c;该变量有32位&#xff0c;变量的位代表信号的类别&#xff0c;变量的值代表是否收到信号。进程会根据该变…...

【deepseek-r1本地部署】

首先需要安装ollama,之前已经安装过了&#xff0c;这里不展示细节 在cmd中输入官网安装命令&#xff1a;ollama run deepseek-r1:32b&#xff0c;开始下载 出现success后&#xff0c;下载完成 接下来就可以使用了&#xff0c;不过是用cmd来运行使用 可以安装UI可视化界面&a…...

Docker Desktop Windows 安装

一、先下载Docker desktop WIndows 下载地址 二、安装 安装超简单 一路 下一步 三、安装之后&#xff0c;桌面会出现一个 小蓝鲸图标&#xff0c;打开它 》更新至最新版本&#xff0c;不然小蓝鲸打开&#xff0c;一会就退出了。 》wsl --update &#xff08;这个有时比较慢…...

pytorch环境已安装库汇总

简略版总计&#xff1a;python pytorch nb_conda&#xff08;Jupyter Notebook的插件&#xff09; 创建环境conda create -n pytorch python3.8 conda install nb_conda命令...

基于Django以及vue的电子商城系统设计与实现

基于Django以及vue的电子商城系统设计与实现 引言 随着电子商务的快速发展&#xff0c;越来越多的企业和个人选择搭建线上商城&#xff0c;以提供更加便捷的购物体验。本文基于Python开发了一套电子商城系统&#xff0c;后端采用Django框架&#xff0c;前端使用Vue.js&#x…...

Spring Boot + ShardingSphere 踩坑记

最近在准备秋招&#xff0c;偷了个轮子项目之后想改个分表&#xff0c;于是有了这篇文章。 省流&#xff1a;请使用shardingsphere-jdbc 5.5.2&#xff0c;并根据官方5.5.2版本文档进行配置&#xff0c;不要使用starter。此外&#xff0c;如果希望使用INTERVAL分片算法&#x…...

【算法学习】DFS与BFS

目录 一&#xff0c;深度优先搜索 1&#xff0c;DFS 2&#xff0c;图的DFS遍历 (1)&#xff0c;递归实现&#xff08;隐士栈&#xff09; (2)&#xff0c;显示栈实现&#xff08;非递归&#xff09; 二&#xff0c;广度优先搜索 1&#xff0c;BFS 2&#xff0c;图的BF…...

从零到一:开发并上线一款极简记账本小程序的完整流程

从零到一&#xff1a;开发并上线一款极简记账本小程序的完整流程 目录 前言需求分析与功能设计 2.1 目标用户分析2.2 核心功能设计2.3 技术栈选择 开发环境搭建 3.1 微信开发者工具安装与配置3.2 项目初始化3.3 版本控制与协作工具 前端开发 4.1 页面结构与布局4.2 组件化开发…...

centos安装Nexus Repository OSS(Maven私服)

1. 下载链接&#xff1a;https://help.sonatype.com/en/download.html 2. 注意页面下载页面中的要求&#xff1a;JDK17&#xff08;启动时提示最低JDK1.8最高JDK17&#xff0c;但是使用JDK1.8无法正常启动&#xff09; 3. mkdir /opt/nexus 将压缩包上传到该目录并解压。 tar …...

Unity使用iTextSharp导出PDF-02基础结构及设置中文字体

基础结构 1.创建一个Document对象 2.使用PdfWriter创建PDF文档 3.打开文档 4.添加内容&#xff0c;调用文档Add方法添加内容时&#xff0c;内容写入到输出流中 5.关闭文档 using UnityEngine; using iTextSharp.text; using System.IO; using iTextSharp.text.pdf; using Sys…...

CSS 属性选择器详解与实战示例

CSS 属性选择器是 CSS 中非常强大且灵活的一类选择器&#xff0c;它能够根据 HTML 元素的属性和值来进行精准选中。在实际开发过程中&#xff0c;属性选择器不仅可以提高代码的可维护性&#xff0c;而且能够大大优化页面的样式控制。本文将结合菜鸟教程的示例&#xff0c;从基础…...

【漫话机器学习系列】088.常见的输出层激活函数(Common Output Layer Activation Functions)

在神经网络中&#xff0c;输出层&#xff08;Output Layer&#xff09; 的激活函数&#xff08;Activation Function&#xff09;直接决定了模型的输出形式&#xff0c;并影响损失函数的选择及训练效果。不同的任务类型&#xff08;如分类或回归&#xff09;需要使用不同的激活…...

STM32 HAL库 UART通讯(C语言)

1、使能UART时钟和GPIO时钟(以USART1为例): __HAL_RCC_USART1_CLK_ENABLE(); // 使能USART1时钟 __HAL_RCC_GPIOA_CLK_ENABLE(); // 使能GPIOA时钟(假设使用PA9/TX, PA10/RX) 2、GPIO配置: GPIO_InitTypeDef GPIO_InitStruct = {0}; GPIO_InitStruct.P…...

【经验分享】Linux 系统安装后内核参数优化

在 Linux 系统安装后&#xff0c;进行内核优化有助于提升系统的性能、稳定性和安全性。以下是一些常见的内核优化操作&#xff1a; 修改/etc/sysctl.conf 文件 执行sysctl -p使配置生效。 kernel.shmmax 135185569792 kernel.shmall 4294967296 fs.aio-max-nr 3145728 fs.fi…...

【AI大模型】Ollama部署本地大模型DeepSeek-R1,交互界面Open-WebUI,RagFlow构建私有知识库

文章目录 DeepSeek介绍公司背景核心技术产品与服务应用场景优势与特点访问与体验各个DeepSeek-R系列模型的硬件需求和适用场景 Ollama主要特点优势应用场景安装和使用配置环境变量总结 安装open-webui下载和安装docker desktop配置镜像源安装open-webui运行和使用 RagFlow介绍主…...

【Java进阶打卡】JDBC-JDBC快速入门

【Java进阶打卡】JDBC-JDBC快速入门 概述快速入门 概述 快速入门 package com.itheima01;import java.sql.*;public class JDBC01 {public static void main(String[] args) throws ClassNotFoundException, SQLException {// 导入jar包 项目文件下面 创建libs文件夹 该ja…...

CEF132 编译指南 MacOS 篇 - depot_tools 安装与配置 (四)

1. 引言 在 CEF132&#xff08;Chromium Embedded Framework&#xff09;的编译过程中&#xff0c;depot_tools 扮演着举足轻重的角色。这套由 Chromium 项目精心打造的脚本和工具集&#xff0c;专门用于获取、管理和更新 Chromium 及其相关项目&#xff08;包括 CEF&#xff…...

缓存机制与 Redis 在高性能系统中的应用

引言 随着互联网应用日益增长&#xff0c;用户对系统的响应速度和稳定性提出了更高的要求。在高并发、大流量的场景下&#xff0c;数据库的读取压力会急剧上升&#xff0c;导致数据库的响应速度变慢&#xff0c;甚至引发性能瓶颈。为了缓解这一问题&#xff0c;缓存机制成为了…...

WinForm 防破解、反编译设计文档

一、引言 1.1 文档目的 本设计文档旨在阐述 WinForm 应用程序防破解、反编译的设计方案&#xff0c;为开发团队提供详细的技术指导&#xff0c;确保软件的知识产权和商业利益得到有效保护。 1.2 背景 随着软件行业的发展&#xff0c;软件破解和反编译现象日益严重。WinForm…...

晶闸管主要参数分析与损耗计算

1. 主要参数 断态正向可重复峰值电压 :是晶闸管在不损坏的情况下能够承受的正向最大阻断电压。断态正向不可重复峰值电压 :是晶闸管只有一次可以超过的正向最大阻断电压,一旦晶闸管超过此值就会损坏,一般情况下 反向可重复峰值电压 :是指晶闸管在不损坏的情况下能够承受的…...

基于Python的人工智能驱动基因组变异算法:设计与应用(上)

一、引言 1.1 研究目标与内容 本研究旨在设计并应用基于 Python 的人工智能驱动的基因组变异算法,以应对基因组学研究中日益增长的数据挑战,提高对基因组变异的理解和应用能力。主要研究内容包括: 数据预处理:利用 Python 的 Biopython、pandas 等库,对来自公共数据库(…...

自己部署DeepSeek 助力 Vue 开发:打造丝滑的标签页(Tabs)

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495; 目录 自己…...

Python+appium实现自动化测试

目录 一、工具与环境准备 二、开始测试 1、插上手机&#xff0c;打开usb调试&#xff0c;选中文件传输&#xff0c;我这里用华为手机为例 2、启动Appium Server GUI​编辑 3、启动 Inspector Session 4、录制脚本 使用Python和Appium进行自动化测试是一种常见的移动应用…...

解锁大语言模型潜能:KITE 提示词框架全解析

大语言模型的应用日益广泛。然而&#xff0c;如何确保这些模型生成的内容在AI原生应用中符合预期&#xff0c;仍是一个需要不断探索的问题。以下内容来自于《AI 原生应用开发&#xff1a;提示工程原理与实战》一书&#xff08;京东图书&#xff1a;https://item.jd.com/1013604…...

GPT-SWARM和AgentVerse的拓扑结构和交互机制

GPT-SWARM和AgentVerse的拓扑结构和交互机制 拓扑结构区别 GPT-SWARM:采用图结构,将语言智能体系统描述为可优化的计算图。图中的每个节点代表一个操作,如语言模型推理或工具使用等特定功能,边则描述了操作之间的信息流,代表智能体之间的通信渠道。多个智能体连接形成的复…...

undetected-chromedriver 使用教程,指定浏览器驱动和浏览器版本

前言 浏览器自动化测试&#xff0c;测试过一些网站检测 目录 前言1. 安装 undetected-chromedriver2. 基本使用示例代码&#xff1a;代码解析&#xff1a; 3. 反自动化检测绕过自定义浏览器设置示例&#xff1a;使用自定义 User-Agent示例&#xff1a;启用无头模式&#xff08…...

cmake

一. 是什么 cmake是一个跨平台的构建工具。 跨平台&#xff1a;可以在linux&#xff0c;windows&#xff0c;macos中使用。 构建工具&#xff1a;cmake不直接参与编译&#xff0c;而是生成平台相应的构建工具。比如&#xff1a;linux下的makefile&#xff0c;windows下的.sln(解…...

Linux高并发服务器开发 第十七天(管道缓存区查询大小 管道的优劣 命名管道mkfifo 建立释放映射区mmap/munmap 匿名映射 进程间的通信)

目录 1.pipe管道读写行为 1.1例题&#xff1a;实现父子进程 ls | wc -l 1.2兄弟进程 ls | wc -l 2.管道缓存区 2.1命令查询 2.2函数查询 3.pipe管道的优劣 4.命名管道 fifo 5.mmap 5.1文件进程间通信 5.2建立、释放映射区 5.3匿名映射 6.进程间通信 6.1父子进间通…...

windows系统远程桌面连接ubuntu18.04

记录一下自己在配置过程中遇到的问题&#xff0c;记录遇到的两大坑&#xff1a; windows系统通过xrdp远程桌面连接ubuntu18.04的蓝屏问题。参考以下第一章解决。 同一局域网内网段不同的连接问题。参考以下第三章解决&#xff0c;前提是SSH可连。 1. 在ubuntu上安装xrdp 参考&…...

SQLMesh系列教程-2:SQLMesh入门项目实战(下篇)

上篇我介绍了环境搭建、duckdb数据准备、sqlmesh数据模型、plan命令运行。本文继续介绍审计、测试、生成血缘关系以及python模型等。 有两种方法可以在SQLMesh中创建宏。一种方法是使用Python&#xff0c;另一种方法是使用Jinja。这里我们创建Python宏。让我们构建简单的Python…...

ThinkPHP8视图赋值与渲染

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 在控制器操作中&#xff0c;使用view函数可以传入视图…...

tkinter-TinUI-xml实战(12)应用组启动器

tkinter-TinUI-xml实战&#xff08;12&#xff09;应用组启动器 引言主界面单独条目 编辑框命令行指令子任务指令 演示题外话 引言 应用快捷启动器有很多现成软件&#xff0c;但是大多都是将常用软件分类&#xff0c;或者建立一个个包含一套工作、学习环境的软件类区&#xff…...

MySQL隐式转换介绍、常见场景和导致问题、示例代码

概述 MySQL 中的 隐式类型转换 是指在某些操作中&#xff0c;MySQL 会自动将数据的类型转换为另一种类型&#xff0c;以便完成操作。虽然这种特性在某些情况下很方便&#xff0c;但也可能导致性能问题、数据丢失或意外的查询结果。 1. 什么是隐式类型转换&#xff1f; 隐式类…...

Quartz定时任务

官网&#xff1a;http://www.quartz-scheduler.org/ OpenSymphony 开源组织在Job scheduling领域的一个开源项目&#xff0c;基于java实现的任务调度框架 设计模式&#xff1a;Builder模式、Factory模式、组件模式、链式编程 核心概念&#xff1a; 任务Job 想要实现的任务…...

【C++八股】静态局部变量/全局变量/局部变量的区别和使用场景

1. 静态局部变量 (Static Local Variable) 作用域&#xff1a;静态局部变量的作用域仅限于函数或代码块内部&#xff0c;就像普通局部变量一样&#xff0c;但其生命周期不同。生命周期&#xff1a;静态局部变量的生命周期是整个程序的运行期间&#xff0c;它只会在第一次调用时…...

飞算 JavaAI:加速 AI + 行业趋势的智能化进程

在数字化浪潮奔涌的当下&#xff0c;“AI 行业” 已然成为不可逆的发展趋势&#xff0c;各行业都在积极探索 AI 技术与自身业务的融合&#xff0c;期望借此实现创新突破与转型升级。在这一进程中&#xff0c;飞算 JavaAI凭借其卓越的技术实力和独特的功能优势&#xff0c;为加…...

【Elasticsearch入门到落地】7、文档操作

接上篇《6、索引库的操作》 上一篇我们学习了ElasticSearch的索引库的操作&#xff0c;以及mapping映射属性以及CRUD操作。本篇我们来学习文档的薪资、查询、删除和修改操作。 上一篇我们建立了索引库&#xff0c;库有了我们就可以往里面添加数据了&#xff0c;然后对文档进行…...

【算法】【双指针】acwing算法基础 2816. 判断子序列

题目 给定一个长度为 n 的整数序列 a1,a2,…,an 以及一个长度为 m 的整数序列 b1,b2,…,bm。 请你判断 a 序列是否为 b 序列的子序列。 子序列指序列的一部分项按原有次序排列而得的序列&#xff0c;例如序列 {a1,a3,a5} 是序列 {a1,a2,a3,a4,a5} 的一个子序列。 输入格式 第一…...

【Unity3D】Jenkins Pipeline流水线自动构建Apk

目录 一、准备阶段 二、创建Pipeline流水线项目 三、注意事项 一、准备阶段 1、安装tomcat 10.0.5 Index of apache-local/tomcat/tomcat-10 2、安装jdk 17 Java Archive Downloads - Java SE 17.0.13 and later 3、下载Jenkins 2.492.1 (.war)包 War Jenkins Packa…...

Openssl的使用,CA证书,中间证书,服务器证书的生成与使用

证书教程 1、Openssl相关文档2、生成证书命令初步解释3、准备openssl的配置文件 openssl.cnf4、证书生成4.1、生成根证书、CA根证书、自签名证书4.2、生成服务器证书4.3、生成中间证书4.3、使用中间证书生成服务器证书5、使用openssl操作证书5.1 查看证书内容5.2 进行证书测试5…...

HCIA项目实践--静态路由的综合实验

八 静态路由综合实验 &#xff08;1&#xff09;划分网段 # 192.168.1.0 24#分析&#xff1a;每个路由器存在两个环回接口&#xff0c;可以把两个环回接口分配一个环回地址&#xff0c;所以是四个环回&#xff0c;一个骨干&#xff0c;这样分配&#xff0c;不会出现路由黑洞#19…...

VSCode中出现“#include错误,请更新includePath“问题,解决方法

1、出现的问题 在编写C程序时&#xff0c;想引用头文件但是出现如下提示&#xff1a; &#xff08;1&#xff09;首先检查要引用的头文件是否存在&#xff0c;位于哪里。 &#xff08;2&#xff09;如果头文件存在&#xff0c;在编译时提醒VSCode终端中"#include错误&am…...

鸿蒙HarmonyOS NEXT开发:优化用户界面性能——组件复用(@Reusable装饰器)

文章目录 一、概述二、原理介绍三、使用规则四、复用类型详解1、标准型2、有限变化型2.1、类型1和类型2布局不同&#xff0c;业务逻辑不同2.2、类型1和类型2布局不同&#xff0c;但是很多业务逻辑公用 3、组合型4、全局型5、嵌套型 一、概述 组件复用是优化用户界面性能&#…...

如何使用deepseek等AI工具辅助web后端工作的开发

使用DeepSeek等AI工具辅助Web后端开发可以显著提升效率,以下是具体应用场景和操作指南: 一、核心开发场景 代码生成与补全示例场景:快速生成CRUD接口 操作:输入提示词 用Node.js Express框架编写用户管理模块,要求: - RESTful API设计 - 包含创建/查询/更新/删除接口 - …...

嵌入式音视频开发(一)ffmpeg框架及内核解析

系列文章目录 嵌入式音视频开发&#xff08;零&#xff09;移植ffmpeg及推流测试 嵌入式音视频开发&#xff08;一&#xff09;ffmpeg框架及内核解析 文章目录 系列文章目录前言一、ffmpeg的内核1.1 框架解析1.2 内核解析1.3 FFmpeg内部数据流1.3.1 典型的解码流程1.3.2 典型的…...