React16源码: React中的completeUnitOfWork的源码实现

completeUnitOfWork


1 ）概述

  • 各种不同类型组件的一个更新过程对应的是在执行 performUnitOfWork 里面的 beginWork 阶段
  • 它是去向下遍历一棵 fiber 树的一侧的子节点，然后遍历到叶子节点为止，以及 return 自己 child 的这种方式
  • 在 performUnitOfWork 里面，还有一个方法叫做 completeUnitOfWork
  • 在 completeUnitOfWork 中会根据是否有中断，调用不同的一个处理方法
  • 什么叫中断呢？
    • 就是我们在渲染一个组件的时候，出现了错误的场景进行处理
    • 或者优先级被更高优先级打断，低优先级转移到下一次处理
  • 在 renderRoot 当中, 使用try catch去调用 workLoop 去循环每一个节点的
  • workLoop 里面调用的就是 performUnitOfWork
  • 在 performUnitOfWork 里面调用了 beginWork
  • 它里面就是执行各种不同组件的一个update的一个过程
  • 在后面 completeUnitOfWork ，是处理到一侧的子节点遍历到最下层的时候，它没有子节点可以返回了
  • 因为 beginWork 里面调用了各种update，它们都是return自己的child
  • 比如说，有这么一棵 fiber 树的一个情况的时候
  • 我们先去对 RootFiber 执行了 beginWork，然后执行了之后 return 的是它的 child，也就是 App
  • 一层一层这么执行下来之后，到了有分叉节点，也就是说一个节点，下面有多个子节点的情况
  • 它 return 的还是它的第一个 child 节点，所以这个时候，后面的节点是没有被执行到更新的
  • 因为 inpput 它返回了之后，返回的是它里面的 input child 这个节点
  • 到这里为止，这个 dom 的 input 节点，已经没有child了，这个时候就 return null
  • 因为它的 child是 null，所以在这里首先执行的是 beginWork
  • 如果有child，它就会一直往child方向进行一个查找
  • 等到 next 等于 null 的情况的时候，就会去执行 completeUnitOfWork
  • completeUnitOfWork 就是对当前这个input界定 执行它的complete，具体执行什么
  • 在 beginWork 的过程当中，如果我们去update某一个节点的时候，有报错了
  • 或者是 throw 了一个 promise, 就是 suspend 的情况, 它会执行一定的标记
  • 在 renderRoot 当中，我们可以看到它如果有报错，它的catch是要在 renderRoot 里面被捕获的这个错误
  • 对这个错误补获之后，它是有一定的处理的, 处理完之后，它仍然处于这个 while 循环当中，它里面并没有 break
    • 位置: packages/react-reconciler/src/ReactFiberScheduler.js#L1276
  • 这个时候它还是会往下进行一个执行的,只不过它会在里面给我们当前这个节点去执行一个标记
  • 在 completeUnitOfWork 的阶段，会对有各种不同标记的一个节点，执行不同的方法
  • 主要的是我们正常流程走的是叫 completeWork 这么一个方法
  • 而对于有异常的节点，它的一个流程是调用一个叫 unwindWork 的方法
  • 然后会判断是否有兄弟节点来执行不同的操作
    • 比如执行到上图 input 这个节点的 completeUnitOfWork之后，它没有兄弟节点
    • 它直接去执行它的父节点，也就是 Input 组件的 completeUnitOfWork
    • 在这里，我们发现它是有兄弟节点的，因为第一次update的过程，是往下的
    • 对于旁边的 List 节点是没有任何更新的, 这个时候我们就会返回它的兄弟节点 List
  • 对于这个兄弟节点, 继续对它执行一个update的一个过程，也就是 beginWork 的一个过程
  • 这就是在 completeUnitOfWork 里面非常重要的一个判断条件
    • 就是如果有兄弟节点，它会直接返回这个兄弟节点
  • 完成节点之后要赋值整个effect链
    • effect是非常重要的，后面即将要把所有的更新结束的节点，挂载到真正的dom上面
    • 这一个阶段叫做commit阶段，它要去执行每一个节点不同的跟dom有关的操作
    • 在前面 beginWork 和 completeUnitOfWork，对每一个节点的更新过程标记了
    • 有哪些 SideEffect 最终要被commit的一个过程
    • 在 completeUnitOfWork 里面会完成这一步，把所有的effect节点进行一个串联
    • 让 commitWork 的阶段可以非常方便的根据这个链去执行每一个节点的最终的操作

2 ） 源码

定位到 packages/react-reconciler/src/ReactFiberScheduler.js#L939
找到 completeUnitOfWork

// 这个API 是在 workInProgress 的基础上进行的一个操作
function completeUnitOfWork(workInProgress: Fiber): Fiber | null {// Attempt to complete the current unit of work, then move to the// next sibling. If there are no more siblings, return to the// parent fiber.// 进来首先就是一个 while true 的一个循环while (true) {// The current, flushed, state of this fiber is the alternate.// Ideally nothing should rely on this, but relying on it here// means that we don't need an additional field on the work in// progress.// 对于这个循环, 它首先获取currentconst current = workInProgress.alternate;if (__DEV__) {ReactCurrentFiber.setCurrentFiber(workInProgress);}// 然后 获取 returnFiber 和 siblingFiber，也就是它的父节点以及它的兄弟节点// 这个在后面我们判断是否要返回兄弟节点的时候就会用到const returnFiber = workInProgress.return;const siblingFiber = workInProgress.sibling;// 这里首先一进来就有一个大的判断，它是一个整个方法里面最大的一个判断// Incomplete 就是这个节点它是出现了错误，然后被捕获的, 并标记这个 sideEffect// 逻辑与操作来判断某一个属性上面它是否有某一个特性的一个方式if ((workInProgress.effectTag & Incomplete) === NoEffect) {if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {// Don't replay if it fails during completion phase.mayReplayFailedUnitOfWork = false;}// This fiber completed.// Remember we're completing this unit so we can find a boundary if it fails.nextUnitOfWork = workInProgress;if (enableProfilerTimer) {if (workInProgress.mode & ProfileMode) {startProfilerTimer(workInProgress);}nextUnitOfWork = completeWork(current,workInProgress,nextRenderExpirationTime,);if (workInProgress.mode & ProfileMode) {// Update render duration assuming we didn't error.stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);}} else {nextUnitOfWork = completeWork(current,workInProgress,nextRenderExpirationTime,);}if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {// We're out of completion phase so replaying is fine now.mayReplayFailedUnitOfWork = true;}stopWorkTimer(workInProgress);resetChildExpirationTime(workInProgress, nextRenderExpirationTime);if (__DEV__) {ReactCurrentFiber.resetCurrentFiber();}if (nextUnitOfWork !== null) {// Completing this fiber spawned new work. Work on that next.return nextUnitOfWork;}// 接下去这个个判断，是要构造一个所有 有 SideEffect 的节点的一个链状的结构// 这个链状结构最终是用于 commitWork 的时候用来进行对这些有 SideEffect的节点进行 commit 的一个操作,// 这边它的一个判断条件，returnFiber不等于null，并且returnFiber它不是一个 Incomplete 的一个节点// 因为对于一个 Incomplete 的节点，它唯一可以具有的一个SideEffect，就是这个节点已经被捕获了// 因为对于有 Incomplete 错误的节点是不会渲染正常的子节点的if (returnFiber !== null &&// Do not append effects to parents if a sibling failed to complete(returnFiber.effectTag & Incomplete) === NoEffect) {// Append all the effects of the subtree and this fiber onto the effect// list of the parent. The completion order of the children affects the// side-effect order.// 对于正常的一个情况, 首先要判断一下 returnFiber.firstEffect 是否等于 null// 符合判断就代表 现在这个 returnFiber 上还没有记录任何它的子节点的有副作用的子节点// 这个时候, 直接把当前节点的firstEffect赋值给 returnFiber.firstEffect// 因为它之前是没有任何一个的嘛，我们这边真正要做的是把当前节点的 firstEffect 到 lastEffect的一个链条// 这个单项链表，给它挂载到它的父节点的同样的一个 firstEffect到lastEffect的单项链表的最后if (returnFiber.firstEffect === null) {returnFiber.firstEffect = workInProgress.firstEffect;}// 就是下面这一段判断，就是来做这个事情的, 如果returnFiber.lastEffect不等于null，那说明它已经有了// 那么对于returnFiber上面有记录过别的 SideEffect 的节点之后// 我们当前节点是挂载到整个 SideEffect 链的最后，就是下面这样，就是把它连到最后的上面if (workInProgress.lastEffect !== null) {if (returnFiber.lastEffect !== null) {returnFiber.lastEffect.nextEffect = workInProgress.firstEffect;}// 还要操作如下，因为它的这个(returnFiber.lastEffect)指针目前还指向它原来的那个lastEffect// 在 赋值 nextEffect之后，它的最后一个就是这个链的最后一个已经变成 workInProgress.lastEffect，所以这边要执行这么一个操作// 当然这个条件是要建立在 workInProgress.lastEffect 是有值的情况// 这是把它们各自的firsteffect到lasteffect，这个链给它进行一个串联的过程returnFiber.lastEffect = workInProgress.lastEffect;}// If this fiber had side-effects, we append it AFTER the children's// side-effects. We can perform certain side-effects earlier if// needed, by doing multiple passes over the effect list. We don't want// to schedule our own side-effect on our own list because if end up// reusing children we'll schedule this effect onto itself since we're// at the end.// 对于returnFiber来说，当前这个节点也可能是有副作用的，那么这边就接下去就会做这个操作// 如果当前节点的 effectTag  > PerformedWork 的，因为 PerformedWork 是一个给 DEVTool 用的一个 sideEffect// 对于真正的react更新是没有任何意义的, 所以如果它仅仅只有 PerformedWork ，它就不是一个有效的 SideEffect 的节点const effectTag = workInProgress.effectTag;// Skip both NoWork and PerformedWork tags when creating the effect list.// PerformedWork effect is read by React DevTools but shouldn't be committed.if (effectTag > PerformedWork) {// 如果它有 SideEffect，就把当前节点作为父节点的 SideEffect 链的最后一个给它挂载上去// 或者如果是当前父节点没有任何记录的 SideEffect，它就是第一个if (returnFiber.lastEffect !== null) {returnFiber.lastEffect.nextEffect = workInProgress;} else {returnFiber.firstEffect = workInProgress;}returnFiber.lastEffect = workInProgress;}}if (__DEV__ && ReactFiberInstrumentation.debugTool) {ReactFiberInstrumentation.debugTool.onCompleteWork(workInProgress);}if (siblingFiber !== null) {// If there is more work to do in this returnFiber, do that next.return siblingFiber;} else if (returnFiber !== null) {// If there's no more work in this returnFiber. Complete the returnFiber.workInProgress = returnFiber;continue;} else {// We've reached the root.return null;}} else {if (enableProfilerTimer && workInProgress.mode & ProfileMode) {// Record the render duration for the fiber that errored.stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false);// Include the time spent working on failed children before continuing.let actualDuration = workInProgress.actualDuration;let child = workInProgress.child;while (child !== null) {actualDuration += child.actualDuration;child = child.sibling;}workInProgress.actualDuration = actualDuration;}// This fiber did not complete because something threw. Pop values off// the stack without entering the complete phase. If this is a boundary,// capture values if possible.const next = unwindWork(workInProgress, nextRenderExpirationTime);// Because this fiber did not complete, don't reset its expiration time.if (workInProgress.effectTag & DidCapture) {// Restarting an error boundarystopFailedWorkTimer(workInProgress);} else {stopWorkTimer(workInProgress);}if (__DEV__) {ReactCurrentFiber.resetCurrentFiber();}if (next !== null) {stopWorkTimer(workInProgress);if (__DEV__ && ReactFiberInstrumentation.debugTool) {ReactFiberInstrumentation.debugTool.onCompleteWork(workInProgress);}// If completing this work spawned new work, do that next. We'll come// back here again.// Since we're restarting, remove anything that is not a host effect// from the effect tag.next.effectTag &= HostEffectMask;return next;}if (returnFiber !== null) {// Mark the parent fiber as incomplete and clear its effect list.returnFiber.firstEffect = returnFiber.lastEffect = null;returnFiber.effectTag |= Incomplete;}if (__DEV__ && ReactFiberInstrumentation.debugTool) {ReactFiberInstrumentation.debugTool.onCompleteWork(workInProgress);}// 存在 sibling 节点， 注意这边是return，也就是跳出while循环if (siblingFiber !== null) {// If there is more work to do in this returnFiber, do that next.return siblingFiber;} else if (returnFiber !== null) {// If there's no more work in this returnFiber. Complete the returnFiber.// 如果returnFiber不等于null，那么 workInProgress = returnFiber// 比如对于最上面示例图的 input节点，它的 completeUnitOfWork// 如果它没有兄弟节点，那么它就继续执行Input的 completeUnitOfWork// 这个循环是在 completeUnitOfWork 内部进行的一个过程workInProgress = returnFiber;continue;} else {// 如果 returnFiber 也等于null，那么它直接 return null// 说明已经到达顶点了，就到达 RootFiber 了，我们的更新过程呢已经完成了// 只需要在接下去 commitRoot 就可以了return null;}}}// Without this explicit null return Flow complains of invalid return type// TODO Remove the above while(true) loop// eslint-disable-next-line no-unreachablereturn null;
}
  • 对于这个while循环里面，其实它的所有代码都是在if else里面的
  • if else它们最大的一个区别是什么呢？
    • 在if里面我们可以看这边这个特殊情况
    • 就是 nextUnitOfWork 等于 completeWork，然后传入一些属性
    • 对于 else 的情况，这边调用了 next = unwindWork
    • 这就是对于一个是否有抛出过错误的一个节点，执行的一个不同的操作
  • completeWork，是没有任何一个错误的一个节点，它的一个complete的一个过程
    • 调用了completework，就是把这个节点的更新给它完成了
  • unwindWork 是有节点的错误，被捕获，如何去处理的一个过程
  • 在上面的 SideEffect 到底有什么意义呢？
  • 比如有如下场景：
    • 有个列表上有值为 1, 2, 3的三个节点
    • 点击 button 按钮，会让上面三个节点内的值乘上自身
    • 对于2,3是4和9，对于1还是1
    • 这里 1 是一个没有变化的过程
    • 按照正常逻辑来说，只需要更新原本值是 2 和 3 的节点
    • 实际上 react 里面也是这样做的
  • 参考demo如下
    import React, { Component } from 'react'
import './App.css'class List extends Component {state = {a: 1,b: 2,c: 3,}handleClick = () => {this.setState(oldState => {const { a, b, c } = oldStatereturn {a: a * a,b: b * b,c: c * c,}})}render() {const { a, b, c } = this.statereturn [<span key="a">{a}</span>,<span key="b">{b}</span>,<span key="c">{c}</span>,<button key="button" onClick={this.handleClick}>click me</button>,]}
}class Input extends Component {state = {name: 'wang',}handleChange = e => {// 这里如果使用方法设置`state`// 那么需要现在外面读取`e.target.value`// 因为在React走完整个事件之后会重置event对象// 以复用event对象，如果等到方法被调用的时候再读取`e.target.value`// 那时`e.target`是`null`this.setState({name: e.target.value,})}render() {return (<inputtype="text"style={{ color: 'red' }}onChange={this.handleChange}value={this.state.name}/>)}
}class App extends Component {render() {return (<div className="main"><Input /><List /></div>)}
}export default App
  • 这个时候我们在 浏览器中针对 react-dom.development.js 在 commitRoot 上面打了一个断点
  • 这个断点是看最终要进行commit的时候，它是如何去获取哪几个节点是要更新的
  • 也就是我们的 SideEffect 链是怎么样的一个形式, 点一下，断点被捕获，捕获了之后
  • 可以看到它接收的两个参数，一个是root，一个是finishedWork，那么它们其实是一个对应的关系
    • root.current.alternate 就等于 finishedWork
    • 因为 finishedWork 对应的是 workInProgress
    • finishedWork 上面就会记录我们当前这一次更新，它所有需要去执行的，就是要更新到dom上面的一些内容
      • 它的记录就在 firstEffect 到 lastEffect 的一个链上
      • 它这边 firstEffect 记录的 elementType 是一个 span
      • 所谓 effect 它最终是一个fiber节点，就是告诉我们哪一个fiber节点需要更新
      • 对于我们这边第二个span，它的值是要被更新成4的
      • 所以可以看到它的 firstEffect 的第一个节点是 span
      • 它的 effectTag是 4，然后它的 updateQueen 的属性里面是一个数组 updateQueue: ["children", "4"]
      • 这个大致意思可以看出，我们要把这个span标签对应的dom节点, 它的children里面显示的文字内容，从2变成4
      • 还有就是下一个节点, 也是一个span, 看 nextEffect, 它的 elementType 也是span
      • 它的 updateQueen 是 updateQueue: ["children", "9"]，也就是原值为 3 的节点
  • 对于commitWork，只会关心 firstEffect 到 lastEffect 这个链条上面的对应的 fiber 节点
    • 它只需要更新的就是这两个dom节点的children的一个变化
  • 这就是react里面的 vdom，它以最小化的程度去更新 dom
  • 而不需要对其他的任何节点再进行一个操作，以此来提升一个性能
  • 这个过程, 就是在 v16.6.3/packages/react-reconciler/src/ReactFiberScheduler.js#L1026 这个 if 里面被实现的
  • 这个 demo 示例对应最最上面的流程图来说
    • 这边点了 button之后，在这里创建了一个update
    • 就是这个List上面, 通过调用 this.setState 去创建了这个 update
    • 最终是要从 RootFiber 上面往下进行一个更新，更新到 List 中的第一个span，以及后续的span
    • 然后发现只有第2和第3个span，它们的 children从 2 变成了 4，从 3 变成了 9
    • 它们两个对应的 SideEffect 是 Update 对应值为4 (二进制的表示形式, 参考 ReactSideEffectTags.js)，它们要把内容挂载到dom上面
    • 第一个span的内容因为是1乘以1，所以它没有变化，就不需要执行真正的更新
    • 首先执行 completeUnitOfWork 的是 第一个 span, 接下去它的 sibling
    • 因为第一个 span 没有 SideEffect，在这里，它的 returnFiber 就是 List
    • 当前的 workInProgress 就是这第一个 span，这个span没有任何的 SideEffect
    • 这个 List 自己也没有 SideEffect，所以赋值List的时候，对List也是没有任何的一个更新的, 如下
      if (returnFiber.firstEffect === null) {returnFiber.firstEffect = workInProgress.firstEffect;
}
    • 这时候的 List 本身的 firstEffect 到 lastEffect是没有任何内容的，也就是null
    • 进行到第2个span节点，它自己有 SideEffect, 而它没有子节点
    • 所以它本身上面的 firstEffect到lastEffect是没有任何内容的
    • 唯一需要操作的是要把它作为List的第一个 SideEffect 增加到这个链上面
    • 因为是 Update, 值为 4 肯定是大于 Performedwork 值为 1的
      if (effectTag > PerformedWork) {if (returnFiber.lastEffect !== null) {returnFiber.lastEffect.nextEffect = workInProgress; // 情况1，标记为 L1, 以便下面引用说明} else {returnFiber.firstEffect = workInProgress; // 情况2, 标记为 L2}returnFiber.lastEffect = workInProgress; // 通用设定3，标记为 L3
}
    • 它自身(workInProgress)要作为 returnFiber 的第一个 SideEffect
    • 给它增加到 List 的firstEffect到lastEffect的链上
    • 所以returnFiber的 firstEffect 和 lastEffect，都等于这个Fiber对象(第二个span) workInProgress
    • 对应的执行语句是 L2 和 L3
    • 当第2个span执行complete完了，又要开始它的sibling, 也就是第三个span
    • 第三个span也是有更新的，所以它也要增加到 List上面
    • 这个时候List上面已经有变化，因为List.lastEffect(姑且这样表示)已经不等于null了
    • 这个时候，执行的是 else 的情况，即 L1
    • 因为在上一个节点的complete过程当中，已经指定了 firstEffect 和 lastEffect 都为 workInProgress(第2个span)
    • 所以第二个span节点的 nextEffect 指向的是第三个span的节点
    • 它们更新完之后又要更新 button，因为它没有任何的变化，所以 button 也没有更新
    • 这个时候对于List来说它的 SideEffect 链是等于 span指向span的这么一个过程
    • List的firstEffect指向第二个span对应的Fiber对象，lastEffect指向第三个span对应的Fiber对象
    • List本身执行 completeUnitOfWork 的时候，自己没有任何的更新
    • 因为它的state更新对于真正的dom操作，没有任何的关系，而且它也没有生命周期方法
    • 所以 List 后期没有任何要做的事情了, 自己本身是没有 SideEffect，只有子节点的 SideEffect
    • 在 List 执行 completeUnitOfWork 的时候, 代码中的 returnFiber 对应是 div
    • 而 workInProgress 对应的是 List, 而 List 要赋值它的 firstEffect 和 lastEffect
    • 它的链指向returnFiber, 就是要放到 returnFiber 它的链的最后面
    • returnFiber 这个 div，它目前是肯定没有任何的 SideEffect的, 所以它直接赋值成 workInProgress.firstEffect
    • 也就是说，对于 div 它的 firstEffect 跟 lastEffect 已经变成 List 的 firstEffect 跟 lastEffect
    • 因为上面节点都是没有任何更新的, 所以一层一层往上之后, 在 RootFiber 上面记录的
    • firstEffect 跟 lastEffect 也就变成了最开始的两个span
    • 所以这就是通过 completeUnitOfWork，最终能够赋值到 RootFiber 上面
    • 在它的 firstEffect 到 lastEffect，单项链表上面去记录整个应用当中
    • 所有需要去更新的最终的dom节点以及组件的fiber对象的一个过程
    • 这里涉及到后期 commitRoot 的时候, 调用这个单项链表一个过程，这里先跳过
  • 对于 unwindWork 的一个过程, 也是相似的, 先跳过 unwindWork 以及 completeWork
  • 目前只关心它的一个遍历过程，跳过具体节点做的事情, 关注它的大致流程
  • 它真正帮我们去实现了把所有需要更新的节点进行一个串联
  • 让最终 commitRoot 的时候，能够方便获取到所有需要更新的节点的一个过程

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

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

相关文章

【小白学机器学习3】关于最简单的线性回归，和用最小二次法评估线性回归效果, 最速下降法求函数的最小值

【小白学机器学习3】关于最简单的线性回归，和用最小二次法评估线性回归效果, 最速下降法求函数的最小值

目录 1 什么是回归分析 1.1 什么是线性回归 1.2非线性回归 2 数据和判断方法 2.1 原始数据 2.2 判断方法&#xff1a;最小二乘法 3 关于线性回归的实测 3.1 用直线模拟 3.2 怎么判断哪个线性模拟拟合更好呢&#xff1f; 3.2.1 判断标准 3.2.2 最小二乘法 3.2.3 高维…
阅读更多...
Consul使用详解

Consul使用详解

简介 Consul是一个由HashiCorp公司开发的开源软件&#xff0c;其发展历程可以概括为以下几个阶段&#xff1a; 初期阶段&#xff08;2014-2015年&#xff09;&#xff1a;Consul最初发布于2014年5月&#xff0c;这个版本是基于Go语言开发的&#xff0c;并提供了诸如服务发现、…
阅读更多...
旅游项目day14

旅游项目day14

其他模块数据初始化 搜索实现 请求一样&#xff0c;但是参数不一样&#xff0c;根据type划分。 后台需要提供一个搜索接口。 请求分发器&#xff1a; 全部搜索 目的地搜索 精确搜索、无高亮展示 攻略搜索 全文搜索、高亮显示、分页 游记搜搜 用户搜索 丝袜哥
阅读更多...
01 Redis的特性

01 Redis的特性

1.1 NoSQL NoSQL&#xff08;“non-relational”&#xff0c; “Not Only SQL”&#xff09;&#xff0c;泛指非关系型的数据库。 键值存储数据库 &#xff1a; 就像 Map 一样的 key-value 对。如Redis文档数据库 &#xff1a; NoSQL 与关系型数据的结合&#xff0c;最像关系…
阅读更多...
MYSQL之索引语法与使用

MYSQL之索引语法与使用

索引分类 分类 含义 特点 关键字 主键索引 针对表中主键创建的索引 默认自动创建&#xff0c;只能有一个 PRIMARY 唯一索引 …
阅读更多...
【漏洞复现】CloudPanel makefile接口远程命令执行漏洞(CVE-2023-35885)

【漏洞复现】CloudPanel makefile接口远程命令执行漏洞(CVE-2023-35885)

文章目录 前言声明一、CloudPanel 简介二、漏洞描述三、影响版本四、漏洞复现五、修复建议 前言 CloudPanel 是一个基于 Web 的控制面板或管理界面&#xff0c;旨在简化云托管环境的管理。它提供了一个集中式平台&#xff0c;用于管理云基础架构的各个方面&#xff0c;包括 &a…
阅读更多...
JVM实战篇：GC调优

JVM实战篇：GC调优

目录 一.GC调优的核心指标 1.1吞吐量&#xff08;Throughput&#xff09; 1.2延迟&#xff08;Latency&#xff09; 1.3内存使用量 二.GC调优的方法 2.1监控工具 Jstat工具 VisualVm插件 Prometheus Grafana 2.2诊断原因 GC日志 GC Viewer GCeasy 2.3常见的GC模…
阅读更多...
QT开发低功耗蓝牙BLE连接ECB02模块进行数据收发

QT开发低功耗蓝牙BLE连接ECB02模块进行数据收发

时间记录&#xff1a;2024/1/22 一、注意点 &#xff08;1&#xff09;pro文件中引入bluetooth模块 &#xff08;2&#xff09;安卓端运行时需要同步打开定位功能才能扫描到蓝牙设备 &#xff08;3&#xff09;mingw套件不能在Windows上运行&#xff0c;需要使用MSVC套件编译…
阅读更多...
Leetcode56. 合并区间

Leetcode56. 合并区间

文章目录 题目原题链接思路代码 题目 以数组intervals表示若干个区间的集合&#xff0c;其中单个区间为 intervals[i] [starti, endi] 。请你合并所有重叠的区间&#xff0c;并返回 一个不重叠的区间数组&#xff0c;该数组需恰好覆盖输入中的所有区间 。 示例 1&#xff1a; …
阅读更多...
yolov5 opencv dnn部署自己的模型

yolov5 opencv dnn部署自己的模型

yolov5 opencv dnn部署自己的模型 github开源代码地址使用github源码结合自己导出的onnx模型推理自己的视频推理条件c部署c 推理结果 github开源代码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人&#xff0c;也是上面作者推荐的…
阅读更多...
开始学习vue2基础篇（初体验）

开始学习vue2基础篇（初体验）

一、什么是VUE&#xff08;官网 &#xff1a;https://cn.vuejs.org/&#xff09; 官方给出的概念 &#xff1a;Vue (读音 /vju ː/ &#xff0c;类似于 view) 是一套用 于构建用户界面的前端框架 渐进式的 JavaScript 框架 二、VUE的特点 易用 &#xff1a;基础只需HTML、CSS、…
阅读更多...
4_机械臂运动学基础向量空间

4_机械臂运动学基础向量空间

在了解机械臂正解推导的过程中&#xff0c;几个问题一直困扰着我&#xff1a; 1、为什么3*3矩阵可以描述姿态&#xff1f;矩阵更进一步的意义是什么&#xff1f;姿态是否有其他的描述方式&#xff0c;如果有是什么&#xff1f; 2、机械臂法兰中心相对于基座的坐标&#xff0c;6…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023