【React系列】Hook（二）高级使用

本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)

一. Hook高级使用

1.1. useReducer

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。

useReducer仅仅是useState的一种替代方案：

  • 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
  • 或者这次修改的state需要依赖之前的state时，也可以使用；

单独创建一个reducer/counter.js文件：

export function counterReducer(state, action) {switch(action.type) {case "increment":return {...state, counter: state.counter + 1}case "decrement":return {...state, counter: state.counter - 1}default:return state;}
}

home.js:

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'export default function Home() {const [state, dispatch] = useReducer(counterReducer, {counter: 100});return (<div><h2>当前计数: {state.counter}</h2><button onClick={e => dispatch({type: "increment"})}>+1</button><button onClick={e => dispatch({type: "decrement"})}>-1</button></div>)
}

我们来看一下，如果我们创建另外一个profile.js也使用这个reducer函数，是否会进行数据的共享：

import React, { useReducer } from 'react'
import { counterReducer } from '../reducer/counter'export default function Profile() {const [state, dispatch] = useReducer(counterReducer, {counter: 0});return (<div><h2>当前计数: {state.counter}</h2><button onClick={e => dispatch({type: "increment"})}>+1</button><button onClick={e => dispatch({type: "decrement"})}>-1</button></div>)
}

数据是不会共享的，它们只是使用了相同的counterReducer的函数而已。

所以，useReducer只是useState的一种替代品，并不能替代Redux。

1.2. useCallback

useCallback实际的目的是为了进行性能的优化。

如何进行性能的优化呢？

  • useCallback会返回一个函数的 memoized（记忆的） 值；
  • 在依赖不变的情况下，多次定义的时候，返回的值是相同的；
const memoizedCallback = useCallback(() => {doSomething(a, b);},[a, b]
);

我们来看下面一段很有趣的代码：

import React, { memo, useState, useCallback } from 'react'export default function CallbackHookDemo() {const [count, setCount] = useState(0);const increment1 = useCallback(function increment() {setCount(count + 1);}, []);const increment2 = function() {setCount(count + 1);}return (<div><h2>当前计数: {count}</h2><button onClick={increment1}>+1</button><button onClick={increment2}>+1</button></div>)
}
  • increment1在每次函数组件重新渲染时，会返回相同的值；
  • increment2每次定义的都是不同的值；

问题：是否increment1会比increment2更加节省性能呢？

  • 事实上，经过一些测试，并没有更加节省内存，因为useCallback中还是会传入一个函数作为参数；
  • 所以并不存在increment2每次创建新的函数，而increment1不需要创建新的函数这种性能优化；

那么，为什么说useCallback是为了进行性能优化呢？

我们来对上面的代码进行改进：

import React, { memo, useState, useCallback } from 'react';const CounterIncrement = memo((props) => {console.log("CounterIncrment被渲染:", props.name);return <button onClick={props.increment}>+1</button>
})export default function CallbackHookDemo() {const [count, setCount] = useState(0);const increment1 = useCallback(function increment() {setCount(count + 1);}, []);const increment2 = function() {setCount(count + 1);}return (<div><h2>当前计数: {count}</h2>{/* <button onClick={increment1}>+1</button><button onClick={increment2}>+1</button> */}<CounterIncrement increment={increment1} name="increment1"/><CounterIncrement increment={increment2} name="increment2"/></div>)
}
  • 在上面的代码中，我们将回调函数传递给了子组件，在子组件中会进行调用；
  • 在发生点击时，我们会发现接受increment1的子组件不会重新渲染，但是接受increment2的子组件会重新渲染；
  • 所以useCallback最主要用于性能渲染的地方应该是和memo结合起来，决定子组件是否需要重新渲染；

1.3. useMemo

useMemo实际的目的也是为了进行性能的优化。

如何进行性能的优化呢？

  • useMemo返回的也是一个 memoized（记忆的） 值；
  • 在依赖不变的情况下，多次定义的时候，返回的值是相同的；
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

我们来看一个案例：

import React, { useState, useMemo } from 'react';function calcNum(count) {let total = 0;for (let i = 0; i < count; i++) {total += i;}console.log("计算一遍");return total
}export default function MemoHookDemo() {const [count, setCount] = useState(10);const [isLogin, setIsLogin] = useState(true);const total = calcNum(count);return (<div><h2>数字和: {total}</h2><button onClick={e => setCount(count + 1)}>+1</button>{isLogin && <h2>Coderwhy</h2>}<button onClick={e => setIsLogin(!isLogin)}>切换</button></div>)
}
  • 无论我们点击了是 +1还是 切换 案例都会重新计算一次；
  • 事实上，我们只是希望在count发生变化时重新计算；

这个时候，我们可以使用useMemo来进行性能的优化：

import React, { useState, useMemo } from 'react';function calcNum(count) {let total = 0;for (let i = 0; i < count; i++) {total += i;}console.log("计算一遍");return total
}export default function MemoHookDemo() {const [count, setCount] = useState(10);const [isLogin, setIsLogin] = useState(true);const total = useMemo(() => {return calcNum(count);}, [count]);return (<div><h2>数字和: {total}</h2><button onClick={e => setCount(count + 1)}>+1</button>{isLogin && <h2>Coderwhy</h2>}<button onClick={e => setIsLogin(!isLogin)}>切换</button></div>)
}

当然，useMemo也可以用于子组件的性能优化：

import React, { useState, useMemo, memo } from 'react';function calcNum(count) {let total = 0;for (let i = 0; i < count; i++) {total += i;}console.log("计算一遍");return total
}const ShowCounter = memo((props) => {console.log("重新渲染");return <h1>Counter: {props.total}</h1>
})const ShowInfo = memo((props) => {console.log("ShowInfo重新渲染");return <h1>信息: {props.info.name}</h1>
})export default function MemoHookDemo() {const [count, setCount] = useState(10);const [isLogin, setIsLogin] = useState(true);const total = useMemo(() => {return calcNum(count);}, [count]);const info = useMemo(() => {return {name: "why"}}, [])return (<div><h2>数字和: {total}</h2><ShowCounter total={total} /><ShowInfo info={info}/><button onClick={e => setCount(count + 1)}>+1</button>{isLogin && <h2>Coderwhy</h2>}<button onClick={e => setIsLogin(!isLogin)}>切换</button></div>)
}
  • ShowCounter子组件依赖的是一个基本数据类型，所以在比较的时候只要值不变，那么就不会重新渲染；
  • ShowInfo接收的是一个对象，每次都会定义一个新的对象，所以我们需要通过useMemo来对其进行优化；

1.4. useRef

useRef返回一个ref对象，返回的ref对象在组件的整个生命周期保持不变。

最常用的ref是两种用法：

  • 用法一：引入DOM（或者组件，但是需要是class组件）元素；
  • 用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；

用法一：引用DOM

import React, { useRef } from 'react';export default function RefHookDemo() {const inputRef = useRef();const titleRef = useRef();const handleOperating = () => {titleRef.current.innerHTML = "我是coderwhy";inputRef.current.focus();}return (<div><input type="text" ref={inputRef}/><h2 ref={titleRef}>默认内容</h2><button onClick={e => handleOperating()}>操作</button></div>)
}

用法二：使用ref保存上一次的某一个值

  • useRef可以想象成在ref对象中保存了一个.current的可变盒子；
  • useRef在组件重新渲染时，返回的依然是之前的ref对象，但是current是可以修改的；
import React, { useState, useEffect, useRef } from 'react';let preValue = 0;export default function RefHookDemo02() {const [count, setCount] = useState(0);const countRef = useRef(count);useEffect(() => {countRef.current = count;}, [count]);return (<div><h2>前一次的值: {countRef.current}</h2><h2>这一次的值: {count}</h2><button onClick={e => setCount(count + 1)}>+1</button></div>)
}

1.5. useImperativeHandle

useImperativeHandle并不是特别好理解，我们一点点来学习。

我们先来回顾一下ref和forwardRef结合使用：

  • 通过forwardRef可以将ref转发到子组件；
  • 子组件拿到父组件中创建的ref，绑定到自己的某一个元素中；
import React, { useRef, forwardRef } from 'react';const HYInput = forwardRef(function (props, ref) {return <input type="text" ref={ref}/>
})export default function ForwardDemo() {const inputRef = useRef();return (<div><HYInput ref={inputRef}/><button onClick={e => inputRef.current.focus()}>聚焦</button></div>)
}

上面的做法本身没有什么问题，但是我们是将子组件的DOM直接暴露给了父组件：

  • 直接暴露给父组件带来的问题是某些情况的不可控；
  • 父组件可以拿到DOM后进行任意的操作；

但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作；

通过useImperativeHandle可以只暴露固定的操作：

  • 通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起；
  • 所以在父组件中，使用 inputRef.current时，实际上使用的是返回的对象；
  • 比如我调用了 focus函数，甚至可以调用 printHello函数；
import React, { useRef, forwardRef, useImperativeHandle } from 'react';const HYInput = forwardRef(function (props, ref) {// 创建组件内部的refconst inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();},printHello: () => {console.log("Hello World")}}))// 这里绑定的是组件内部的inputRefreturn <input type="text" ref={inputRef}/>
})export default function ImperativeHandleHookForwardDemo() {const inputRef = useRef();return (<div><HYInput ref={inputRef}/><button onClick={e => inputRef.current.focus()}>聚焦</button><button onClick={e => inputRef.current.printHello()}>Hello World</button></div>)
}

1.6. useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已：

  • useEffect会在渲染的内容更新到DOM上之后执行，不会阻塞DOM的更新；
  • useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

我们来看下面的一段代码：

import React, { useEffect, useState, useLayoutEffect } from 'react';export default function EffectHookDemo() {const [count, setCount] = useState(0);useEffect(() => {if (count === 0) {setCount(Math.random()*200)}}, [count]);return (<div><h2>当前数字: {count}</h2><button onClick={e => setCount(0)}>随机数</button></div>)
}
  • 这段代码在开发中会发生闪烁的现象；
  • 因为我们先将count设置为了0，那么DOM会被更新，并且会执行一次useEffect中的回调函数；
  • 在useEffect中我们发现count为0，又执行一次setCount操作，那么DOM会再次被更新，并且useEffect又会被执行一次；

事实上，我们上面的操作的目的是在count被设置为0时，随机另外一个数字：

  • 如果我们使用useLayoutEffect，那么会等到useLayoutEffect代码执行完毕后，再进行DOM的更新；
import React, { useEffect, useState, useLayoutEffect } from 'react';export default function EffectHookDemo() {const [count, setCount] = useState(0);useLayoutEffect(() => {if (count === 0) {setCount(Math.random()*200)}}, [count]);return (<div><h2>当前数字: {count}</h2><button onClick={e => setCount(0)}>随机数</button></div>)
}

在这里插入图片描述

二. 自定义Hook

2.1. 认识自定义hook

自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。

需求：所有的组件在创建和销毁时都进行打印

  • 组件被创建：打印 组件被创建了；
  • 组件被销毁：打印 组件被销毁了；
export default function CustomHookDemo() {useEffect(() => {console.log("组件被创建了");return () => {console.log("组件被销毁了");}}, [])return (<div><h2>CustomHookDemo</h2></div>)
}

但是这样来做意味着所有的组件都需要有对应的逻辑：

function Home(props) {useEffect(() => {console.log("组件被创建了");return () => {console.log("组件被销毁了");}}, [])return <h2>Home</h2>
}function Profile(props) {useEffect(() => {console.log("组件被创建了");return () => {console.log("组件被销毁了");}}, [])return <h2>Profile</h2>
}

如何可以对它们的逻辑进行抽取呢？

  • 我们可能希望抽取到一个函数中；
function loggingLife() {useEffect(() => {console.log("组件被创建了");return () => {console.log("组件被销毁了");}}, [])
}

但是，抽取到这里调用之后，代码是报错的：

在这里插入图片描述

  • 原因是普通的函数中不能使用hook

那么，我们应该如何操作呢？

  • 非常简单，函数以特殊的方式命名，以 use 开头即可；
function useLoggingLife() {useEffect(() => {console.log("组件被创建了");return () => {console.log("组件被销毁了");}}, [])
}

当然，自定义Hook可以有参数，也可以有返回值：

function useLoggingLife(name) {useEffect(() => {console.log(`${name}组件被创建了`);return () => {console.log(`${name}组件被销毁了`);}}, [])
}

2.2. 自定义Hook练习

我们通过一些案例来练习一下自定义Hook。

使用User、Token的Context

比如多个组件都需要使用User和Token的Context：

import React, { useContext } from 'react'
import { UserContext, TokenContext } from '../App'export default function CustomHookContextDemo() {const user = useContext(UserContext);const token = useContext(TokenContext);console.log(user, token);return (<div><h2>CustomHookContextDemo</h2></div>)
}
  • 这段代码我们在每次使用user和token时都需要导入对应的Context，并且需要使用两次useContext；

我们可以抽取到一个自定义Hook中：

function useUserToken() {const user = useContext(UserContext);const token = useContext(TokenContext);return [user, token];
}

获取窗口滚动的位置

  • 在开发中，某些场景我们可能总是希望获取创建滚动的位置：
import React, { useEffect, useState } from 'react'export default function CustomScrollPositionHook() {const [scrollPosition, setScrollPosition] = useState(0);useEffect(() => {const handleScroll = () => {setScrollPosition(window.scrollY);}document.addEventListener("scroll", handleScroll);return () => {document.removeEventListener("scroll", handleScroll);}}, [])return (<div style={{padding: "1000px 0"}}><h2 style={{position: "fixed", top: 0, left: 0}}>CustomScrollPositionHook: {scrollPosition}</h2></div>)
}

但是如果每一个组件都有对应这样的一个逻辑，那么就会存在很多的冗余代码：

function useScrollPosition() {const [scrollPosition, setScrollPosition] = useState(0);useEffect(() => {const handleScroll = () => {setScrollPosition(window.scrollY);}document.addEventListener("scroll", handleScroll);return () => {document.removeEventListener("scroll", handleScroll);}}, [])return scrollPosition;
}

数据存储的localStorage

在开发中，我们会有一些数据希望通过localStorage进行存储（当然，你可以根据自己的情况选择sessionStorage）

import React, { useState, useEffect } from 'react'export default function CustomDataStoreHook() {const [name, setName] = useState(() => {return JSON.parse(window.localStorage.getItem("name"))});useEffect(() => {window.localStorage.setItem("name", JSON.stringify(name));}, [name])return (<div><h2>CustomDataStoreHook: {name}</h2><button onClick={e => setName("coderwhy")}>设置name</button></div>)
}

如果每一个里面都有这样的逻辑，那么代码就会变得非常冗余：

function useLocalStorange(key) {const [data, setData] = useState(() => {return JSON.parse(window.localStorage.getItem(key))});useEffect(() => {window.localStorage.setItem(key, JSON.stringify(data));}, [data]);return [data, setData];
}

三. Hook原理分析

这里我主要分析一下useState的原理，因为本次教程是穿插讲解源码的，所以不会所有源码一一讲解。

3.1. useState代码位置

useState还是从React中导入的，所以我们可以先查看：

在这里插入图片描述

点到useState的源码中：

  • useState本质上，是使用的dispatcher的useState；

在这里插入图片描述

  • dispatcher来自另外的一个函数resolveDispatcher：

在这里插入图片描述

运行的过程中，会赋值一个current的值是一个Dispatcher类型：

  • Dispatcher来自于 react-reconciler/src/ReactFiberHooks

在这里插入图片描述

Dispatch类型的定义：

在这里插入图片描述

这里的Dispatch仅仅是一个类型而已，我们赋值具体的值在不同的阶段是不同的：

  • 在挂载阶段：HooksDispatcherOnMount
  • 在更新阶段：HooksDispatcherOnUpdate

在这里插入图片描述

挂载哪一个取决于renderWithHook函数：

在这里插入图片描述

3.2. HooksDispatcherOnMount

HooksDispatcherOnMount对应的useState是mountState

在这里插入图片描述

mountState的源码：

在这里插入图片描述

绑定的dispatchAction函数，事实上是将所有的action放到了queue的队列中：

在这里插入图片描述

3.3. HooksDispatcherOnUpdate

HooksDispatcherOnUpdate对应的useState是updateState

在这里插入图片描述

updateState本质上会执行updateReducer：

  • 所有其实就更新阶段而言，useState本质上用的是updateReducer

在这里插入图片描述

updateReducer的源码如下：

在这里插入图片描述
在这里插入图片描述

四. Redux Hooks

在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux中的connect：

  • 但是这种方式必须使用高阶函数结合返回的高阶组件；
  • 并且必须编写：mapStateToProps和 mapDispatchToProps映射的函数；

在Redux7.1开始，提供了Hook的方式，我们再也不需要编写connect以及对应的映射函数了

4.1. useSelector使用

useSelector的作用是将state映射到组件中：

  • 参数一：将state映射到需要的数据中；
  • 参数二：可以进行比较来决定是否组件重新渲染；（后续讲解）
const result: any = useSelector(selector: Function, equalityFn?: Function)

现在，我可以改进一下之前的Profile中使用redux的代码：

function Profile(props) {const {banners, recommends, counter} = useSelector(state => ({banners: state.homeInfo.banners,recommends: state.homeInfo.recommends}));console.log("Profile重新渲染");return (<div><h2>数字: {counter}</h2><h1>Banners</h1><ul>{banners.map((item, index) => {return <li key={item.acm}>{item.title}</li>})}</ul><h1>Recommends</h1><ul>{recommends.map((item, index) => {return <li key={item.acm}>{item.title}</li>})}</ul></div>)
}

但是这段代码会有一个问题：

  • 当前我们的组件并不依赖counter，但是counter发生改变时，依然会引起Profile的重新渲染；

原因是什么呢？

  • useSelector默认会比较我们返回的两个对象是否相等；
  • 如何比较呢？const refEquality = (a, b) => a === b；
  • 也就是我们必须返回两个完全相等的对象才可以不引起重新渲染；

这个时候，我们可以使用react-redux中给我们提供的 shallowEqual：

  const {banners, recommends, counter} = useSelector(state => ({banners: state.homeInfo.banners,recommends: state.homeInfo.recommends}), shallowEqual);
  • 这段代码的作用是避免不必要的重新渲染；

当然，你也可以编写自己的比较函数，来决定是否重新渲染。

4.2. useDispatch

useDispatch非常简单，就是直接获取dispatch函数，之后在组件中直接使用即可：

const dispatch = useDispatch()

直接使用dispatch：

<button onClick={e => dispatch(subAction(1))}>-1</button>
<button onClick={e => dispatch(subAction(5))}>-5</button>

我们还可以通过useStore来获取当前的store对象：

const store = useStore()

在组件中可以使用store：

const store = useStore();
console.log(store.getState());

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

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

相关文章

解锁测试性能瓶颈：深度探讨JMeter分布式性能测试！

解锁测试性能瓶颈：深度探讨JMeter分布式性能测试！

在做后端服务器性能测试中&#xff0c;我们会经常听到分布式。但你是否了解分布式呢&#xff1f;今天&#xff0c;我们就来给大家讲讲&#xff0c;在企业实战中&#xff0c;如何使用分布式进行性能测试&#xff0c;实战过程中&#xff0c;又有哪些地方要特别注意&#xff1f; 0…
阅读更多...
什么是滚动码？什么工作原理？

什么是滚动码？什么工作原理？

一、什么是滚动码&#xff1f; 这里我们将简单了解什么是滚动码及其工作原理。首先简要描述其概念和操作。然后&#xff0c;我们将看一个示例来进一步阐明。最后&#xff0c;我们将研究滚动代码以防止攻击的原因。 滚动码&#xff0c;也称为跳跃码&#xff0c;是远程无钥匙进入…
阅读更多...
两整数之和 -- 位运算

两整数之和 -- 位运算

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 本题链接 力扣&#xff08;LeetCode&#xff09; 输入描述 输入两个要相加的数&#xff0c;a和b 输出描述 返回a和b的和&#xff0c;这里其实直接return ab; 直接就过了&#xff0c;但是人题目要求还是给点面子~ 算法…
阅读更多...
【mars3d】批量关闭矢量数据的startFlicker()闪烁或者全部关闭startFlicker()

【mars3d】批量关闭矢量数据的startFlicker()闪烁或者全部关闭startFlicker()

问题 1.graphic/entity/billboard怎么能够批量关闭startFlicker()闪烁或者 全部关闭startFlicker()呢&#xff1f; 相关链接 1.http://mars3d.cn/editor-vue.html?idgraphic/entity/billboard 2.http://mars3d.cn/apidoc.html#FlickerEntity 期望效果 1.graphic.stopFlic…
阅读更多...
国图公考：2024年上半年中小学教师资格考试(笔试)报考须知

国图公考：2024年上半年中小学教师资格考试(笔试)报考须知

(一)信息填报时间&#xff1a;2024年1月12日9:00至1月15日16&#xff1a;00 (二)信息确认时间&#xff1a;2024年1月13日9:00至1月16日16&#xff1a;00 (三)网上缴费时间&#xff1a;2024年1月13日9:00至1月17日24&#xff1a;00
阅读更多...
宝宝洗衣机哪个牌子质量好？好用的小型洗衣机推荐

宝宝洗衣机哪个牌子质量好？好用的小型洗衣机推荐

当婴儿的到来&#xff0c;确实会给家庭带来许多变化&#xff0c;就好比如对于宝宝相关衣物的清洗需求。对于新生儿及婴幼儿的衣服&#xff0c;一般都要给予特殊的照顾与清洗&#xff0c;以保证不含细菌及过敏原。尤其是刚刚出生的婴儿&#xff0c;这时候宝宝们的皮肤很是幼嫩。…
阅读更多...
python实现给定两个列表，“求同存异”

python实现给定两个列表，“求同存异”

目录 问题描述&#xff1a; 代码实现&#xff1a; 问题描述&#xff1a; 给定两个列表&#xff0c;list1和list2。 python实现求list1和list中重复的元素&#xff0c;以及在list1中&#xff0c;不在list2的元素。 代码实现&#xff1a; def common_unique(pred_list, gold_l…
阅读更多...
pyparamvalidate 项目背景和需求分析

pyparamvalidate 项目背景和需求分析

目录 一、前置说明1、总体目录2、本节目标 二、项目背景三、需求分析三、后置说明1、要点小结2、下节准备 一、前置说明 1、总体目录 《 pyparamvalidate 参数校验器&#xff0c;从编码到发布全过程》 2、本节目标 阐述 pyparamvalidate 项目背景和需求分析。 二、项目背景…
阅读更多...
由浅入深理解C#中的事件

由浅入深理解C#中的事件

目录 本文较长&#xff0c;给大家提供了目录&#xff0c;可以直接看自己感兴趣的部分。 前言有关事件的概念示例​ 简单示例​ 标准 .NET 事件模式​ 使用泛型版本的标准 .NET 事件模式​ 补充总结 参考前言 前面介绍了C#中的委托&#xff0c;事件的很多部分都与委托…
阅读更多...
sql如何获取字段是数组中的数字【搬代码】

sql如何获取字段是数组中的数字【搬代码】

我们可以看到表中字段是一个数组怎么获取其中的数据呢&#xff1f; SELECT sim->>$[0] FROM fin_xxx如果使用左外链接&#xff0c;如下&#xff0c;其他连接时一样的 SELECT a.* FROM fin_aaaa a LEFT JOIN fin_xxx b ON b.sim_r->>$[0]a.corr WHERE b.tid20210 …
阅读更多...
安全典型配置（六）配置IPSG限制非法主机访问内网案例（静态绑定）

安全典型配置（六）配置IPSG限制非法主机访问内网案例（静态绑定）

相关文章学习&#xff1a; 安全典型配置&#xff08;一&#xff09;使用ACL限制FTP访问权限案例 安全典型配置&#xff08;二&#xff09;使用ACL限制用户在特定时间访问特定服务器的权限案例 安全典型配置&#xff08;三&#xff09;使用ACL禁止特定用户上网案例安全典型配置…
阅读更多...
yolov8人脸识别-脸部关键点检测（代码+原理）

yolov8人脸识别-脸部关键点检测（代码+原理）

1. 人脸识别&#xff1a; Yolov8可用于人脸识别&#xff0c;它可以识别人脸的位置、大小和角度等信息&#xff0c;并对人脸进行精确的识别。通过使用Yolov8&#xff0c;可以实现高效准确的人脸识别&#xff0c;不仅可以应用于安防领域&#xff0c;也可以应用于人脸支付、人脸门…
阅读更多...
x-cmd pkg | gitui - git 终端交互式命令行工具

x-cmd pkg | gitui - git 终端交互式命令行工具

目录 简介首次用户功能特点类似工具与竞品进一步探索 简介 gitui 由 Stephan D 于 2020 年使用 Rust 语言构建的 git 终端交互式命令行工具&#xff0c;旨在终端界面中便捷管理 git 存储库。 首次用户 使用 x gitui 即可自动下载并使用 在终端运行 eval "$(curl https:/…
阅读更多...
open3d连线可视化

open3d连线可视化

目录 写在前面准备代码运行结果参考完 写在前面 1、本文内容 open3d 2、平台/环境 windows10, visual studio 2019 通过cmake构建项目&#xff0c;跨平台通用&#xff1b;open3d 3、转载请注明出处&#xff1a; https://blog.csdn.net/qq_41102371/article/details/135407857…
阅读更多...
呼叫 Mac 用户 | Navicat Premium 原生支持在搭载 Apple Silicon 芯片的电脑上使用

呼叫 Mac 用户 | Navicat Premium 原生支持在搭载 Apple Silicon 芯片的电脑上使用

作为桌面端数据库管理开发软件&#xff0c;Navicat Premium 与 Navicat for MongoDB 16.3 (或更高版本) 已原生支持搭载 Apple Silicon 芯片的 Mac 电脑上使用。这是一次重要的技术改进&#xff0c;通过原生技术将大幅提升 Mac 用户在使用 Navicat 过程中的响应速度、流畅性以及…
阅读更多...
Hex2Bin转换工具文档、Bootloader 、OTA 、STM32等MCU适用

Hex2Bin转换工具文档、Bootloader 、OTA 、STM32等MCU适用

说明&#xff1a;这个工具可以将 Hex 文件 转换为 Bin 格式文件&#xff0c;软件是按自己开发 STM32 OAT 功能需求开发的一款辅助 上位机软件。 有兴趣的朋友可留言探讨。 附加功能&#xff1a; 1.另外可以生成指定大小的bin 格式文件&#xff0c;文件多余的空余位置填充随机…
阅读更多...
回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测

回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测

回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测 目录 回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输…
阅读更多...
鸿蒙原生应用/元服务开发-短时任务

鸿蒙原生应用/元服务开发-短时任务

概述 应用退至后台一小段时间后&#xff0c;应用进程会被挂起&#xff0c;无法执行对应的任务。如果应用在后台仍需要执行耗时不长的任务&#xff0c;如状态保存等&#xff0c;可以通过本文申请短时任务&#xff0c;扩展应用在后台的运行时间。 约束与限制 申请时机&#xf…
阅读更多...
腾讯云跨云迁移工具案例实践：阿里云迁移到腾讯云

腾讯云跨云迁移工具案例实践：阿里云迁移到腾讯云

对于阿里云批量迁移到腾讯云&#xff0c;HyperMotion可以支持批量一键式安装Agent软件&#xff0c;做到了操作步骤简单化、自动化&#xff0c;可以满足常见源端操作系统类型。 例如&#xff1a;Windows 2003-2019&#xff0c;CentOS、RedHat 6.x-7.x、Ubuntu 14.x - 16.x、SUS…
阅读更多...
微服务应用可观测性解决方案介绍

微服务应用可观测性解决方案介绍

目录 一、可观测性出现背景 二、什么是可观测性&#xff08;Observability&#xff09; 2.1 可观测性的不同解析 2.1.1 百度维基解析 2.1.2 IBM解析 2.1.3 CNCF&#xff08;云原生计算机基金会&#xff09;组织解析 2.1.4 我的个人理解 2.2 可观测性和监控的区别与联系 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023