【React Hooks原理 - useSyncExternalStore】

概述

在React项目中说到状态管理,我们第一时间想到的就是使用useState、useReducer这种Hooks来进行状态管理。但是这种是针对React内部的状态,如果有时候我们需要订阅外部的状态并影响React组件的更新的话,那通过这种内部状态管理API显然不能满足了,这时候就需要使用本文的主角useSyncExternalStore这个Hook了。这个API是React18提供的一个内置API,赋予了React能订阅外部状态的能力,当订阅的外部状态发生改变时,会触发React的重新渲染。本文将会从一下几个方面来逐步介绍该API的使用和原理,有需求的同学自行跳转至感兴趣的部分。

  • 基础使用
  • 源码解析
    • Mount首次渲染时
    • Update 更新渲染时

基础使用

函数定义

先看定义,useSyncExternalStore接受三个参数:subscribegetSnapshotgetServerSnapshot然后返回一个数据快照。

export function useSyncExternalStore<T>(subscribe: (() => void) => () => void,getSnapshot: () => T,getServerSnapshot?: () => T,
): T {const dispatcher = resolveDispatcher();return dispatcher.useSyncExternalStore(subscribe,getSnapshot,getServerSnapshot,);
}

详细说明如下:

  • subscribe: 接收一个订阅函数,并返回一个取消订阅函数,该函数主要用于订阅外部store状态,订阅外部store的哪些状态取决于subscribe函数的实现。当订阅的状态值变化时,会触发组件的重现渲染。
  • getSnapshot:一个用于获取当前状态快照的函数,React组件每次渲染都会执行该函数,然后获得当前订阅状态的快照,并将这个快照作为useSyncExternalStore函数返回值
  • getServerSnapshot: 返回订阅状态的初始快照,它只会在服务端渲染(SSR)时,以及在客户端(浏览器端)进行服务端渲染内容的 hydration 时被用到。
  • 返回值是一个数据快照,可以理解为就是getSnapshot的执行结果

PS: 由于getSnapshot会在每次组件渲染时都会执行,所以一般将这个函数定义在组件外部或者使用useCallback包裹,避免不必要的渲染。

想了解为什么使用useCallback包裹能避免重复渲染的可以查看这篇文章:【React Hooks原理 - useCallback、useMemo】

由于服务端渲染的是静态页面,不能进行动态交互,所以在React项目中会通过hydration(水合阶段),将其赋予动态交互能力,具体流程本文最后题外话会简单介绍。

语法使用

上面主要介绍了useSyncExternalStore函数定义,这小节主要通过举例Demo的形式让我们初步了解该函数的运用,并方便下面源码解析的理解。(由于第三个参数getServerSnapshot用于SSR,所以本文不做介绍,有兴趣的同学可以查看其他文章了解)

外部第三方Store定义:

  • 这里要注意subscribegetSnapshot这两个函数会在useSyncExternalStoreHook中调用并注入React自己的listener函数,所以这两个函数必须在第三方Store中暴露,否则不能正确使用useSyncExternalStore功能。
const store = {// 外部状态state: {todos: [],user: { name: 'Alice', age: 30 }},// 监听状态变化listeners: new Set(),// 订阅状态函数subscribe(listener) {this.listeners.add(listener);return () => this.listeners.delete(listener);},// 获取快照函数getSnapshot() {return this.state;},// 状态更新后,通知所有注入的监听器并执行notify() {this.listeners.forEach(listener => listener());},// 更新todos状态updateTodos(newTodos) {this.state.todos = newTodos;this.notify();},// 更新user状态updateUser(newUser) {this.state.user = newUser;this.notify();}
};

React项目代码:

import React from 'react';
import { useSyncExternalStore } from 'react';const todosStore = {subscribe(listener) {return store.subscribe(() => {const { todos } = store.getSnapshot();listener(todos);});},getSnapshot() {const { todos } = store.getSnapshot();return todos;}
};const TodosComponent = () => {const todos = useSyncExternalStore(todosStore.subscribe.bind(todosStore),todosStore.getSnapshot.bind(todosStore));return (<div><h1>Todos</h1><ul>{todos.map((todo, index) => (<li key={index}>{todo}</li>))}</ul></div>);
};

由于外部状态暴露的subscribe只注入了监听器并返回一个销毁注册的函数,默认是订阅所有外部状态,在这里我们demo主要是订阅其中部分状态即todos,所以在React项目中自定义了subscribe并解析todos进行订阅,以及自定义getSnapshot函数只获取todos的状态信息,即useSyncExternalStoreHook返回的数据。

可以理解为我们在React项目 - 外部状态的连接中添加了一个节点用于处理自定义订阅和消费状态,即React项目 - CustomFn(todosStore) - 外部状态

至此基本使用我们已经介绍差不多了,接下来进入源码解析阶段,由于下面会引用这个Demo例子帮助理解,所以还请务必先浏览器下Demo。

源码解析

同大多数Hooks一样,该Hook也主要从首次挂载Mount、以及更新渲染Update两个阶段来介绍。

Mount首次渲染

通过上面介绍我们知道useSyncExternalStoreHook接收三个参数并当前当前的数据快照,下面从mountSyncExternalStore这个入口函数出发:

mountSyncExternalStore函数:

function mountSyncExternalStore<T>(subscribe: (() => void) => () => void,getSnapshot: () => T,getServerSnapshot?: () => T
): T {// 获取当前fiber即workInProgress中的fiber节点const fiber = currentlyRenderingFiber;// 创建Hook并挂载在fiber.memoizedState上const hook = mountWorkInProgressHook();// 保存数据快照let nextSnapshot;// 是否是水合阶段SSRconst isHydrating = getIsHydrating();if (isHydrating) {// 如果是SSR的水合阶段,则getServerSnapshot参数必传,否则报错if (getServerSnapshot === undefined) {throw new Error("Missing getServerSnapshot, which is required for " +"server-rendered content. Will revert to client rendering.");}// 由于此时是首次挂载,SSR时使用getServerSnapshot服务器的初始值作为返回状态nextSnapshot = getServerSnapshot();} else {// 客户端渲染时,执行第二个参数获取当前外部状态快照nextSnapshot = getSnapshot();// 获取当前渲染fiber的根root节点const root: FiberRoot | null = getWorkInProgressRoot();if (root === null) {throw new Error("Expected a work-in-progress root. This is a bug in React. Please file an issue.");}// 获取root节点的优先级const rootRenderLanes = getWorkInProgressRootRenderLanes();// 判断当前构建的fiber树是否是阻断性渲染// 当阻塞渲染时跳过一致性校验是处于性能考虑,避免后续复杂的对比计算if (!includesBlockingLane(root, rootRenderLanes)) {// 一致性检查是为了保证当前渲染的状态和外部状态是一致的,如果外部状态更新,当一致性检查不一致时会重新渲染组件// 这个函数只是将新旧状态保存在了updateQueue.stores中,后续在协调阶段的isRenderConsistentWithExternalStores函数中进行处理pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);}}// 保存当前的数据快照,更新渲染是会通过memoizedState获取上一次的值hook.memoizedState = nextSnapshot;// 记录本次渲染的状态值和获取最新状态的函数,用于后面新旧值对比更新const inst: StoreInstance<T> = {value: nextSnapshot,getSnapshot,};// 将状态信息保存到hook链表中,后续更新hook.queue = inst;// subscribeToStore处理subscribe逻辑mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]);// 添加flagfiber.flags |= PassiveEffect;// 将副作用添加到fiber的更新队列updateQueue中pushEffect(HookHasEffect | HookPassive,updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),createEffectInstance(),null);// 返回当前快照return nextSnapshot;
}

从上面代码及注释中,相比我们初步了解了mountSyncExternalStore的作用: 主要就是创建了hook、effect、updateQueue等初始化工作。在其中引入了其他几个函数,这里我们展开说说:

  • mountWorkInProgressHook函数在其他介绍其他Hook的时候已经介绍,所以这里不再赘述,作用就是创建一个初始Hook并绑定到fiber上

  • getIsHydrating函数主要是判断当前是否是SSR的水合阶段,这里也不做介绍

  • getWorkInProgressRoot函数用于返回当前渲染的workInProgress树的根节点

    export function getWorkInProgressRoot(): FiberRoot | null {return workInProgressRoot;
    }
    
  • getWorkInProgressRootRenderLanes函数返回当前渲染树的渲染优先级

    export function getWorkInProgressRootRenderLanes(): Lanes {return workInProgressRootRenderLanes;
    }
    

    Scheduler关于优先级设置,可以查看这篇文章:【React源码 - 调度任务循环EventLoop】

    React 使用“lanes”来表示不同的优先级,它们分为以下几种类型:

    • Blocking Lane:代表需要尽快完成的任务,但可以稍微延迟的更新。
    • Urgent Lane:需要立即处理的任务,如用户输入。
    • Normal Lane:普通优先级的任务。
    • Idle Lane:低优先级的任务,可以在空闲时间处理。
  • 通过if (!includesBlockingLane(root, rootRenderLanes))根据优先级判断是否需要进行一致性,主要是为了优化性能,出于以下考虑:

    • 性能考虑:阻塞优先级的任务需要尽快完成,跳过一致性检查可以减少渲染过程中的开销。
    • 状态一致性:非阻塞优先级的任务需要确保渲染的状态与外部状态一致,所以需要进行一致性检查。
  • pushStoreConsistencyCheck函数用于对比新旧状态的一致性校验,当前渲染会非阻塞级渲染时则会进行一致性校验,如果外部状态更新,则会重新渲染组件以便显示最新的状态。

    function pushStoreConsistencyCheck<T>(fiber: Fiber,getSnapshot: () => T,renderedSnapshot: T
    ): void {// 添加一致性校验Flagfiber.flags |= StoreConsistency;// 保存当前状态快照以及获取快照的函数const check: StoreConsistencyCheck<T> = {getSnapshot,value: renderedSnapshot,};// 获取fiber.updateQueue更新队列let componentUpdateQueue: null | FunctionComponentUpdateQueue =(currentlyRenderingFiber.updateQueue: any);// 当前没有更新任务时,创建更新队列并将保存值的对象check以数组形式绑定在storesif (componentUpdateQueue === null) {componentUpdateQueue = createFunctionComponentUpdateQueue();currentlyRenderingFiber.updateQueue = (componentUpdateQueue: any);componentUpdateQueue.stores = [check];} else {// 有更新任务时,直接绑定storesconst stores = componentUpdateQueue.stores;if (stores === null) {componentUpdateQueue.stores = [check];} else {stores.push(check);}}
    }
    

    这个函数只是将新旧状态保存在了updateQueue.stores中,后续在协调阶段的isRenderConsistentWithExternalStores函数中会进行处理。协调阶段中进入fiber构造前:
    performConcurrentWorkOnRoot -> isRenderConsistentWithExternalStores,在isRenderConsistentWithExternalStores中会循环遍历每个fiber节点并根据flag是否包含StoreConsistency进行一致性校验,如果两次对比不一致则调用 scheduleUpdateOnFiber 函数发起更新调度申请

    if (node.flags & StoreConsistency) {
    // 获取更新任务const updateQueue: FunctionComponentUpdateQueue | null =(node.updateQueue: any);if (updateQueue !== null) {// 获取上面保存的新旧外部状态const checks = updateQueue.stores;if (checks !== null) {for (let i = 0; i < checks.length; i++) {const check = checks[i];const getSnapshot = check.getSnapshot;const renderedValue = check.value;try {// 执行getSnapshot函数获取最新的外部状态,并和组件内的状态对比if (!is(getSnapshot(), renderedValue)) {// Found an inconsistent store.return false;}} catch (error) {// If `getSnapshot` throws, return `false`. This will schedule// a re-render, and the error will be rethrown during render.return false;}}}}
    }
    
  • mountEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe]); 这个代码就是处理subscribe来传入React自身的listener用于状态更新时执行触发组件更新的函数。在这里通过bind绑定了subscribeToStoresubscribe进行处理.

    使用mountEffect订阅是因为其能保证只在挂载和依赖更新时触发,并且会在组件卸载时执行清除函数,mountEffect其实是useEffect这个Hook在首次挂载时执行的函数,具体关于mountEffect函数请查看这篇文章:【React Hooks原理 - useEffect、useLayoutEffect】

  • subscribeToStore函数主要就是当状态改变之后,强制组件重新渲染

    // 对比外部状态和组件内部状态是否一致
    function checkIfSnapshotChanged<T>(inst: StoreInstance<T>): boolean {const latestGetSnapshot = inst.getSnapshot;const prevValue = inst.value;try {const nextValue = latestGetSnapshot();return !is(prevValue, nextValue);} catch (error) {return true;}
    }// 当状态不一致时,强制组件更新
    function subscribeToStore<T>(fiber: Fiber,inst: StoreInstance<T>,subscribe: (() => void) => () => void
    ): any {const handleStoreChange = () => {// 对比外部状态是否改变if (checkIfSnapshotChanged(inst)) {// 外部状态改变和组件内不一致则强制刷新,类似我们使用的forceUpdate()forceStoreRerender(fiber);}};// Subscribe to the store and return a clean-up function.return subscribe(handleStoreChange);
    }// 直接调用scheduleUpdateOnFiber发起调度
    function forceStoreRerender(fiber: Fiber) {const root = enqueueConcurrentRenderForLane(fiber, SyncLane);if (root !== null) {scheduleUpdateOnFiber(root, fiber, SyncLane); // 发送更新调度申请,scheduleUpdateOnFiber 负责标记需要更新的 Fiber 节点,并将其放入调度队列中,等待调度器(Scheduler)来确定何时执行这些更新。}
    }
    

至此在首次挂载阶段的所有源码流程我们都介绍完了,在这里简单小节一下:在使用useSyncExternalStore时,React就会通过subscribe来订阅外部状态,并对subscribe进行处理,传递一个对比状态更新组件的函数handleStoreChange,一旦外部状态更新(对比组件内部和通过getSnapshot获取最新外部状态),React中通过一致性判断不一致时就会发起更新调度。

Update更新渲染

当外部状态改变时,比如通过store.updateTodos(newValue)修改订阅的数据之后,外部Store会通知执行所有添加的listener,即在Mount阶段注入的handleStoreChange函数,并触发组件更新进入更新渲染阶段。在更新阶段是从updateSyncExternalStore入口函数开始的,下面看代码:

function updateSyncExternalStore<T>(subscribe: (() => void) => () => void,getSnapshot: () => T,getServerSnapshot?: () => T,
): T {// 获取渲染的fiberconst fiber = currentlyRenderingFiber;// 复用现有链表,性能优化,减少重复创建Hook链表的性能消耗,复用workInProgress中的链表或者克隆current当前页面显示的fiber链表// 并将本次更新对象添加到更新队列中const hook = updateWorkInProgressHook();let nextSnapshot;const isHydrating = getIsHydrating();// 是否是SSR水合阶段if (isHydrating) {// getServerSnapshot不传则报错if (getServerSnapshot === undefined) {throw new Error('Missing getServerSnapshot, which is required for ' +'server-rendered content. Will revert to client rendering.',);}nextSnapshot = getServerSnapshot();} else {nextSnapshot = getSnapshot();}// 通过hook.memoizedState获取上一次渲染缓存的值const prevSnapshot = (currentHook || hook).memoizedState;// 通过Object.is判断状态是否改变const snapshotChanged = !is(prevSnapshot, nextSnapshot);if (snapshotChanged) {// 如果改变就更新换成值,然后触发组件更新hook.memoizedState = nextSnapshot;markWorkInProgressReceivedUpdate();}// 获取hook的更新队列(链表的头节点)const inst = hook.queue;// 组件更新渲染时执行updateEffect(subscribeToStore.bind(null, fiber, inst, subscribe), [subscribe,]);// 当getSnapshot or subscribe改变时,就需要提交更新,这里getSnapshot比较的是函数引用,对应上面提到了避免多次渲染,将其放在组件外或者使用useCallback包裹if (inst.getSnapshot !== getSnapshot ||snapshotChanged ||// 过滤一些异常情况,性能优化(workInProgressHook !== null &&workInProgressHook.memoizedState.tag & HookHasEffect)) {// 添加flagfiber.flags |= PassiveEffect;// 添加副作用到fiber中,后续在协调时会遍历fiber并处理其副作用列表pushEffect(HookHasEffect | HookPassive,updateStoreInstance.bind(null, fiber, inst, nextSnapshot, getSnapshot),createEffectInstance(),null,);// 获取root节点const root: FiberRoot | null = getWorkInProgressRoot();if (root === null) {throw new Error('Expected a work-in-progress root. This is a bug in React. Please file an issue.',);}// 对于非阻塞渲染需要进行一致性校验if (!isHydrating && !includesBlockingLane(root, renderLanes)) {pushStoreConsistencyCheck(fiber, getSnapshot, nextSnapshot);}}// 返回当前数据快照return nextSnapshot;
}

从代码能看出其中有一些代码和首次渲染时mountSyncExternalStore函数一致,相信经过上面的介绍和代码注释,相比已经能理解更新过程了,

所以在这里小节一下,虽然 Mount 和 Update 阶段的逻辑非常相似,但它们的主要区别在于:

  • 初始化 vs 更新:
    Mount 阶段初始化各种 Hook 对象和状态,Update 阶段复用现有的 Hook 对象和状态。
  • 订阅和副作用:
    Mount 阶段使用 mountEffect 注册订阅外部状态的副作用,Update 阶段使用 updateEffect 更新订阅副作用。
  • 一致性检查:
    两个阶段都会进行一致性检查,但在 Update 阶段会优先比较当前快照与之前的快照,并在不一致时进行副作用更新、一致性校验、更新缓存值等操作,否则会跳过更新阶段直接返回快照。

总之就是一句话: Mount主要初始化创建Hook、updateQueue、Effect,Update主要更新、复用和性能优化。

总结

一句话说明useSyncExternalStore就是赋予React具有访问外部状态并触发更新的能力。具体流程就是通过subscribe来注入React自身的监听器(listener)并订阅外部状态(全部或者部分state),当订阅状态更新时会通过注入的listener来触发React重新渲染,每次渲染之后会执行getSnapshot获取订阅的数据快照并将其结果返回。

其中React主要就是将自身的listener传递给外部状态,然后当更新外部状态时。在外部状态中当监听到状态更新时会执行所有注入的listener,然后React中的listener会获取最新的状态快照并发送更新调度进而实现组件的重现渲染。

题外话

什么是React的hydration阶段?

这个阶段主要指的是当页面使用服务器渲染(SSR)有服务端生成HTML并传回给客户端(浏览器端)显示时,由于SSR传递到客户端是静态的HTML文件,不能进行用户交互(没有事件绑定等),所以React的hydration阶段就是将静态页面转换为可交付的页面的过程。

流程介绍:

  1. 服务端渲染 (SSR):
    ○ 服务器生成 HTML 内容并将其发送到客户端。这一步骤确保页面在浏览器中快速呈现,即使在 JavaScript 尚未完全加载和执行之前,用户也可以看到页面内容。
    ○ 生成的 HTML 包含了所有需要的内容,但这些内容是静态的,无法进行任何交互操作。
  2. 客户端接收 HTML:
    ○ 浏览器接收到服务器发送的 HTML 并立即显示给用户。这时用户看到的是一个完整但静态的页面。
    ○ 由于 HTML 是静态的,用户暂时无法进行诸如点击按钮、填写表单等交互操作。
  3. 加载和执行 JavaScript:
    ○ 浏览器开始加载和执行页面中的 JavaScript 文件。React 的 JavaScript 代码被下载并执行。
    ○ 在这一步,React 会初始化并尝试将组件树与已经存在的 HTML 进行对比和合并。
  4. Hydration 过程:
    ○ React 使用 ReactDOM.hydrate 方法,将客户端的组件树与服务端渲染的 HTML 进行对比。
    ○ 这个过程包括将事件监听器绑定到已有的 DOM 元素上,使得这些元素变得可交互。
  5. 页面变为可交互:
    ○ 一旦 hydration 过程完成,页面就变成了一个完整的、可交互的 React 应用。此时,用户可以正常进行各种交互操作(如点击按钮、输入文本等)。

举例说明

假设有一个简单的计数器应用,服务端渲染了初始计数值为 0 的 HTML:

<div id="root"><div><p>0</p><button>Increment</button></div>
</div>

在客户端,React 会执行以下操作:

  1. React 组件初始化: React 使用相同的组件树进行初始化:
function Counter() {const [count, setCount] = useState(0);return (<div><p>{count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}
  1. Hydration 过程: React 将组件树与服务端的 HTML 进行对比,确保二者一致:
ReactDOM.hydrate(<Counter />, document.getElementById('root'));
  1. 绑定事件监听器: React 将 button 元素的点击事件绑定到 Increment 按钮上:
<button onClick={() => setCount(count + 1)}>Increment</button>
  1. 应用变为可交互: 现在,用户点击按钮时,计数值会增加,页面内容会更新。

总结:通过SSR传递到客户端的HTML虽然包含所有的内容,立即显示在页面,但是没有绑定事件无法交互,只是单纯的静态页面,需要执行Js文件经过hydration将绑定事件转换为可交互。而hydration 是 React 在客户端将服务端生成的静态 HTML 转变为可交互应用的过程。这个过程确保了初始页面的快速加载,同时通过绑定事件监听器和合并状态,使得页面能够响应用户的交互。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/48144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通信协议_C#实现CAN通信

CAN协议 CAN&#xff08;Controller Area Network&#xff09;即控制器局域网络。特点&#xff1a; 多主网络&#xff1a;网络上的任何节点都可以主动发送数据&#xff0c;不需要一个固定的主节点。双绞线&#xff1a;使用双绞线作为通信介质&#xff0c;支持较远的通信距离。…

时序数据库如何选型?详细指标总结!

工业物联网场景&#xff0c;如何判断什么才是好的时序数据库&#xff1f; 工业物联网将机器设备、控制系统与信息系统、业务过程连接起来&#xff0c;利用海量数据进行分析决策&#xff0c;是智能制造的基础设施&#xff0c;并影响整个工业价值链。工业物联网机器设备感知形成了…

C++那些事之依赖注入

C那些事之依赖注入 最近星球里面有个小伙伴让更新一下依赖注入&#xff0c;于是写出了这篇文章&#xff0c;来从实际的例子讲解&#xff0c;本文会讲解一些原理与实现&#xff0c;完整的实现代码懒人版放在星球中&#xff0c;我们开始正文。 大纲&#xff1a; 直接依赖接口依赖…

vue 腾讯云 javascript sdk + 简单富文本组件设计+实战

<template><div><quill-editor v-model"content" ref"myQuillEditor" :options"editorOption" change"onEditorChange"input"handleInput"></quill-editor><!-- 链接添加对话框 --><el-di…

【论文阅读笔记】In Search of an Understandable Consensus Algorithm (Extended Version)

1 介绍 分布式一致性共识算法指的是在分布式系统中&#xff0c;使得所有节点对同一份数据的认知能够达成共识的算法。且算法允许所有节点像一个整体一样工作&#xff0c;即使其中一些节点出现故障也能够继续工作。之前的大部分一致性算法实现都是基于Paxos&#xff0c;但Paxos…

前端Vue项目中腾讯地图SDK集成:经纬度与地址信息解析的实践

在前端开发中&#xff0c;我们经常需要将经纬度信息转化为具体的地址信息&#xff0c;这对于定位、地图展示等功能至关重要。Vue作为现代前端框架的代表&#xff0c;其组件化开发的特性使得我们能够更高效地实现这一功能。本文将介绍如何在Vue项目中集成腾讯地图SDK&#xff0c…

一个 基于nuxt3 + vite + ts 搭建的 网盘服务 (附带部署教程)

目录 介绍技术选型功能介绍代码地址部署安装 node 环境打包代码安装 pm2 去 后台运行代码安装一个nginx 介绍 最近 有个卖课的朋友 谈到 网盘没有目录分享的功能&#xff0c;我之前嫖了他太多课了&#xff0c;出于感激给他写个小服务。 在线地址&#xff1a; http://godboxs.c…

【ffmpeg命令】RTMP推流

文章目录 前言推流是什么RTMP协议简介RTMP的基本概念RTMP的工作原理RTMP的优缺点 ffmpeg RTMP推流推流命令综合解释ffplay播放RTMP流 总结 前言 在现代的视频直播中&#xff0c;RTMP&#xff08;Real-Time Messaging Protocol&#xff09;是一种广泛使用的流媒体传输协议。它允…

SpringMVC源码深度解析(上)

今天&#xff0c;聊聊SpringMVC框架的原理。SpringMVC属于Web框架&#xff0c;它不能单独存在&#xff0c;需要依赖Servlet容器&#xff0c;常用的Servlet容器有Tomcat、Jetty等&#xff0c;这里以Tomcat为例进行讲解。老规矩&#xff0c;先看看本项目的层级结构&#xff1a; 需…

【入门基础】java泛型和通配符详解

【入门基础】java泛型和通配符详解 文章目录 前言泛型类泛型方法泛型接口通配符&#xff08;Wildcards&#xff09;使用场景非主流用法 总结 前言 Java泛型&#xff08;Generics&#xff09;是JDK 5中引入的一个新特性&#xff0c;它提供了编译时类型安全检测机制&#xff0c;…

socket 收发TCP/UDP

一、c 个人测试记录&#xff0c;有问题还请指出&#xff0c;谢谢 参考&#xff1a;C开发基础之网络编程WinSock库使用详解TCP/UDP Socket开发_c udp使用什么库-CSDN博客 代码中Logger测试见文章&#xff1a; c中spdlog的使用/python中logger的使用-CSDN博客 1、main.cpp 收…

【体外诊断】ARM/X86+FPGA嵌入式计算机在医疗CT机中的应用

体外诊断 信迈科技提供基于Intel平台、AMD平台、NXP平台的核心板、2.5寸主板、Mini-ITX主板、4寸主板、PICO-ITX主板&#xff0c;以及嵌入式准系统等计算机硬件。产品支持GAHDMI等独立双显&#xff0c;提供丰富串口、USB、GPIO、PCIe扩展接口等I/O接口&#xff0c;扩展性强&…

前端组件化开发:以Vue自定义底部操作栏组件为例

摘要 随着前端技术的不断演进&#xff0c;组件化开发逐渐成为提升前端开发效率和代码可维护性的关键手段。本文将通过介绍一款Vue自定义的底部操作栏组件&#xff0c;探讨前端组件化开发的重要性、实践过程及其带来的优势。 一、引言 随着Web应用的日益复杂&#xff0c;传统的…

极狐GitLab如何启用和配置PlantUML?

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

深度挖掘数据,智慧决策,VeryReport报表软件引领数据分析新潮流

在当今大数据智能化时代&#xff0c;企业需要强大的报表工具来深度挖掘海量数据&#xff0c;辅助运营决策。在众多BI报表工具中&#xff0c;VeryReport报表软件脱颖而出&#xff0c;成为中国企业数据分析的首选利器。 VeryReport报表软件&#xff1a; 专业处理复杂的中国式报…

【WebRTC】Duplex通信是什么意思?

【背景】 尝试自己从零开始构建一个适用于局域网投屏的WebRTC应用&#xff0c;在学习过程中总是遇到Duplex这个词&#xff0c;而且开服务时还需要指定Duplex属性&#xff0c;所以觉得有必要了解一下什么是Duplex。 【知识】 “Full duplex”指的是一种通信模式&#xff0c;在…

设计模式七大原则(七)合成复用原则

定义 合成复用原则&#xff08;Composite/Aggregate Reuse Principle,CARP&#xff09;是指尽量使用对象组合(has-a)/ 聚合(contanis-a)&#xff0c;而不是继承关系达到软件复用的目的 类的复用一般分为两种&#xff1a;一种是组合/聚合&#xff0c;另一种则是继承。 继承复用…

如何将MP3或WAV文件解码成PCM文件

文章目录 概要整体架构流程技术细节 概要 本文介绍使用 FFmpeg&#xff0c;将MP3或WAV文件解码成PCM文件的方法。 整体架构流程 首先&#xff0c;使用的 FFmpeg 库要支持 MP3/WAV 解码功能&#xff0c;即编译的时候要加上&#xff08;编译 FFmpeg 库可以参考&#xff1a;Win…

通义千问AI模型对接飞书机器人-模型配置(2-1)

一 背景 根据业务或者使用场景搭建自定义的智能ai模型机器人&#xff0c;可以较少我们人工回答的沟通成本&#xff0c;而且可以更加便捷的了解业务需求给出大家设定的业务范围的回答&#xff0c;目前基于阿里云的通义千问模型研究。 二 模型研究 参考阿里云帮助文档&#xf…

CSRF+XSS组合攻击实战

目录 0x01安装靶场 0x02分析功能点的请求接口&#xff0c;构造恶意请求 0x03寻找xss漏洞 0x01安装靶场 下载源码&#xff0c;解压到网站根目录 1.修改数据库配置文件 打开源码&#xff0c;进入到include目录下&#xff0c;打开数据库配置文件database.inc.php 将数据库的…