彻底搞懂React-hook链表构建原理

news2024/10/2 10:35:56

写在前面的小结

  • 每一个 hook 函数都有对应的 hook 对象保存状态信息
  • useContext是唯一一个不需要添加到 hook 链表的 hook 函数
  • 只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render 阶段需要给函数组件 fiber 添加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保存其状态信息
  • 每次渲染都是重新构建 hook 链表以及 收集 effect list(fiber.updateQueue)
  • 初次渲染调用 mountWorkInProgressHook 构建 hook 链表。更新渲染调用 updateWorkInProgressHook 构建 hook 链表并复用上一次的 hook 状态信息

Demo

可以用下面的 demo 在本地调试

import React, {
  useState,
  useEffect,
  useContext,
  useCallback,
  useMemo,
  useRef,
  useImperativeHandle,
  useLayoutEffect,
  forwardRef,
} from "react";
import ReactDOM from "react-dom";
const themes = {
  foreground: "red",
  background: "#eeeeee",
};
const ThemeContext = React.createContext(themes);

const Home = forwardRef((props, ref) => {
  debugger;
  const [count, setCount] = useState(0);
  const myRef = useRef(null);
  const theme = useContext(ThemeContext);
  useEffect(() => {
    console.log("useEffect", count);
  }, [count]);
  useLayoutEffect(() => {
    console.log("useLayoutEffect...", myRef);
  });
  const res = useMemo(() => {
    console.log("useMemo");
    return count * count;
  }, [count]);
  console.log("res...", res);
  useImperativeHandle(ref, () => ({
    focus: () => {
      myRef.current.focus();
    },
  }));

  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div style={{ color: theme.foreground }} ref={myRef} onClick={onClick}>
      {count}    </div>
  );
});

ReactDOM.render(<Home />, document.getElementById("root"));

fiber

React 在初次渲染或者更新过程中，都会在 render 阶段创建新的或者复用旧的 fiber 节点。每一个函数组件，都有对应的 fiber 节点。

fiber 的主要属性如下：

var fiber = {
  alternate,
  child,
  elementType: () => {},
  memoizedProps: null,
  memoizedState: null, // 在函数组件中，memoizedState用于保存hook链表
  pendingProps: {},
  return,
  sibling,
  stateNode,
  tag, // fiber的节点类型，初次渲染时，函数组件对应的tag为2，后续更新过程中对应的tag为0
  type: () => {}
  updateQueue: null,
}

在函数组件的 fiber 中，有两个属性和 hook 有关：memoizedState 和updateQueue 属性。

  • memoizedState 属性用于保存 hook 链表，hook 链表是单向链表。
  • updateQueue 属性用于收集hook的副作用信息，保存useEffect、useLayoutEffect、useImperativeHandle这三个 hook 的 effect 信息，是一个环状链表，其中 updateQueue.lastEffect 指向最后一个 effect 对象。effect 描述了 hook 的信息，比如useLayoutEffect 的 effect 对象保存了监听函数，清除函数，依赖等。

hook 链表

React 为我们提供的以use开头的函数就是 hook，本质上函数在执行完成后，就会被销毁，然后状态丢失。React 能记住这些函数的状态信息的根本原因是，在函数组件执行过程中，React 会为每个 hook 函数创建对应的 hook 对象，然后将状态信息保存在 hook 对象中，在下一次更新渲染时，会从这些 hook 对象中获取上一次的状态信息。

在函数组件执行的过程中，比如上例中，当执行 Home() 函数组件时，React 会为组件内每个 hook 函数创建对应的 hook 对象，这些 hook 对象保存 hook 函数的信息以及状态，然后将这些 hook 对象连成一个链表。上例中，第一个执行的是useState hook，React 为其创建一个 hook：stateHook。第二个执行的是useRef hook，同样为其创建一个 hook：refHook，然后将 stateHook.next 指向 refHook：stateHook.next = refHook。同理，refHook.next = effectHook，…

需要注意：

  • useContext是唯一一个不会出现在 hook 链表中的 hook。
  • useState 是 useReducer 的语法糖，因此这里只需要用 useState 举例就好。
  • useEffect、useLayoutEffect、useImperativeHandle这三个 hook 都是属于 effect 类型的 hook，他们的 effect 对象都需要被添加到函数组件 fiber 的 updateQueue 中，以便在 commit 阶段执行。

上例中，hook 链表如下红色虚线中所示：

hook-list-01.jpg

hook 对象及其属性介绍

函数组件内部的每一个 hook 函数，都有对应的 hook 对象用来保存 hook 函数的状态信息，hook 对象的属性如下：

var hook = {
  memoizedState,,
  baseState,
  baseQueue,
  queue,
  next,
};

注意，hook 对象中的memoizedState属性和 fiber 的memoizedState属性含义不同。next 指向下一个 hook 对象，函数组件中的 hook 就是通过 next 指针连成链表

同时，不同的 hook 中，memoizedState 的含义不同，下面详细介绍各类型 hook 对象的属性含义

useState Hook 对象

  • hook.memoizedState 保存的是 useState 的 state 值。比如 const [count, setCount] = useState(0)中，memoizedState 保存的就是 state 的值。
  • hook.queue 保存的是更新队列，是个环状链表。queue 的属性如下：
hook.queue = {
  pending: null,
  dispatch: null,
  lastRenderedReducer: basicStateReducer,
  lastRenderedState: initialState,
};

比如我们在 onClick 中多次调用setCount：

const onClick = useCallback(() => {
  debugger;
  setCount(count + 1);
  setCount(2);
  setCount(3);
}, [count]);

每次调用setCount，都会创建一个新的 update 对象，并添加进 hook.queue 中，update 对象属性如下：

var update = {
  lane: lane,
  action: action, // setCount的参数
  eagerReducer: null,
  eagerState: null,
  next: null,
};

queue.pending 指向最后一个更新对象。queue 队列如下红色实线所示

参考 前端进阶面试题详细解答

hook-list-02.jpg

在 render 阶段，会遍历 hook.queue，计算最终的 state 值，并存入 hook.memoizedState 中，

useRef Hook

  • hook.memoizedState 保存的是 ref 的值。比如
const myRef = useRef(null);

那么 memoizedState 保存的是 myRef 的值，即：

hook.memoizedState = {
  current,
};

useEffect、useLayoutEffect 以及 useImperativeHandle

  • memoizedState 保存的是一个 effect 对象，effect 对象保存的是 hook 的状态信息，比如监听函数，依赖，清除函数等，属性如下：
var effect = {
  tag: tag, // effect的类型，useEffect对应的tag为5，useLayoutEffect对应的tag为3
  create: create, // useEffect或者useLayoutEffect的监听函数，即第一个参数
  destroy: destroy, // useEffect或者useLayoutEffect的清除函数，即监听函数的返回值
  deps: deps, // useEffect或者useLayoutEffect的依赖，第二个参数
  // Circular
  next: null, // 在updateQueue中使用，将所有的effect连成一个链表
};

这三个 hook 都属于 effect 类型的 hook，即具有副作用的 hook

  • useEffect 的副作用为：Update | Passive，即 516
  • useLayoutEffect 和 useImperativeHandle 的副作用都是：Update，即 4

在函数组件中，也就只有这三个 hook 才具有副作用，在 hook 执行的过程中需要给 fiber 添加对应的副作用标记。然后在 commit 阶段执行对应的操作，比如调用useEffect的监听函数，清除函数等等。

因此，React 需要将这三个 hook 函数的 effect 对象存到 fiber.updateQueue 中，以便在 commit 阶段遍历 updateQueue，执行对应的操作。updateQueue 也是一个环状链表，lastEffect 指向最后一个 effect 对象。effect 和 effect 之间通过 next 相连。

const effect = {
    create: () => { console.log("useEffect", count); },
    deps: [0]
    destroy: undefined,
    tag: 5,
}
effect.next = effect
fiber.updateQueue = {
  lastEffect: effect,
};

fiber.updateQueue 如下图红色实线所示：

hook-list-03.jpg

hook 对应的 effect 对象如下图红色实线所示：

hook-list-04.jpg

useMemo

  • hook.memoizedState 保存的是 useMemo 的值和依赖。比如
const res = useMemo(() => {
  return count * count;
}, [count]);

那么 memoizedState 保存的是返回值以及依赖，即

hook.memoizedState = [count * count, [count]];

useCallback

hook.memoizedState 保存的是回调函数和依赖，比如

const onClick = useCallback(callback dep);

那么 memoizedState=[callback, dep]

构建 Hook 链表的源码

React 在初次渲染和更新这两个过程，构建 hook 链表的算法不一样，因此 React 对这两个过程是分开处理的：

var HooksDispatcherOnMount = {
  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useRef: mountRef,
  useState: mountState,
};
var HooksDispatcherOnUpdate = {
  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useRef: updateRef,
  useState: updateState,
};

如果是初次渲染，则使用HooksDispatcherOnMount，此时如果我们调用 useState，实际上调用的是HooksDispatcherOnMount.useState，执行的是mountState方法。

如果是更新阶段，则使用HooksDispatcherOnUpdate，此时如果我们调用 useState，实际上调用的是HooksDispatcherOnUpdate.useState，执行的是updateState

初次渲染和更新渲染执行 hook 函数的区别在于：

  • 构建 hook 链表的算法不同。初次渲染只是简单的构建 hook 链表。而更新渲染会遍历上一次的 hook 链表，构建新的 hook 链表，并复用上一次的 hook 状态
  • 依赖的判断。初次渲染不需要判断依赖。更新渲染需要判断依赖是否变化。
  • 对于 useState 来说，更新阶段还需要遍历 queue 链表，计算最新的状态。

renderWithHooks 函数组件执行

不管是初次渲染还是更新渲染，函数组件的执行都是从renderWithHooks函数开始执行。

function renderWithHooks(current, workInProgress, Component, props) {
  currentlyRenderingFiber = workInProgress;
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;

  ReactCurrentDispatcher.current =
    current === null || current.memoizedState === null
      ? HooksDispatcherOnMount
      : HooksDispatcherOnUpdate;

  var children = Component(props, secondArg);

  currentlyRenderingFiber = null;
  currentHook = null;
  workInProgressHook = null;

  return children;
}

renderWithHooks 的Component参数就是我们的函数组件，在本例中，就是Home函数。

Component 开始执行前，会重置 memoizedState 和 updateQueue 属性，因此每次渲染都是重新构建 hook 链表以及收集 effect list

renderWithHooks 方法初始化以下全局变量

  • currentlyRenderingFiber。fiber 节点。当前正在执行的函数组件对应的 fiber 节点，这里是 Home 组件的 fiber 节点
  • ReactCurrentDispatcher.current。负责派发 hook 函数，初次渲染时，指向 HooksDispatcherOnMount，更新渲染时指向 HooksDispatcherOnUpdate。比如我们在函数组件内部调用 useState，实际上调用的是：
function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}

每一个 hook 函数在执行时，都会调用resolveDispatcher方法获取当前的dispatcher，然后调用dispatcher中对应的方法处理 mount 或者 update 逻辑。

以 useEffect 为例，在初次渲染时调用的是：

function mountEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = mountWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    undefined,
    nextDeps
  );
}

在更新渲染时，调用的是

function updateEffectImpl(fiberFlags, hookFlags, create, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var destroy = undefined;

  if (currentHook !== null) {
    var prevEffect = currentHook.memoizedState;
    destroy = prevEffect.destroy;

    if (nextDeps !== null) {
      var prevDeps = prevEffect.deps;

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        pushEffect(hookFlags, create, destroy, nextDeps);
        return;
      }
    }
  }

  currentlyRenderingFiber.flags |= fiberFlags;
  hook.memoizedState = pushEffect(
    HasEffect | hookFlags,
    create,
    destroy,
    nextDeps
  );
}

pushEffect 方法构建一个 effect 对象并添加到 fiber.updateQueue 中，同时返回 effect 对象。

mountEffectImpl 方法逻辑比较简单，而 updateEffectImpl 方法还多了一个判断依赖是否变化的逻辑。

mountWorkInProgressHook以及updateWorkInProgressHook方法用来在函数组件执行过程中构建 hook 链表，这也是构建 hook 链表的算法。每一个 hook 函数在执行的过程中都会调用这两个方法

构建 hook 链表的算法

初次渲染和更新渲染，构建 hook 链表的算法不同。初次渲染使用mountWorkInProgressHook，而更新渲染使用updateWorkInProgressHook。

  • mountWorkInProgressHook 直接为每个 hook 函数创建对应的 hook 对象
  • updateWorkInProgressHook 在执行每个 hook 函数时，同时遍历上一次的 hook 链表，以复用上一次 hook 的状态信息。这个算法稍稍复杂

React 使用全局变量workInProgressHook保存当前正在执行的 hook 对象。比如，本例中，第一个执行的是useState，则此时workInProgressHook=stateHook。第二个执行的是useRef，则此时workInProgressHook=refHook，…。

可以将 workInProgressHook 看作链表的指针

mountWorkInProgressHook 构建 hook 链表算法

代码如下

function mountWorkInProgressHook() {
  var hook = {
    memoizedState: null,
    baseState: null,
    baseQueue: null,
    queue: null,
    next: null,
  };

  if (workInProgressHook === null) {
    // hook链表中的第一个hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // 添加到hook链表末尾
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

可以看出，初次渲染构建 hook 链表的算法逻辑非常简单，为每一个 hook 函数创建对应的 hook 对象，然后添加到 hook 链表末尾就行

updateWorkInProgressHook 构建 hook 链表算法

更新渲染阶段构建 hook 链表的算法就比较麻烦。我们从 fiber 开始

我们知道 React 在 render 阶段会复用 fiber 节点，假设我们第一次渲染完成的 fiber 节点如下：

var firstFiber = {
  ..., // 省略其他属性
  alternate: null, // 由于是第一次渲染，alternate为null
  memoizedState, // 第一次渲染构建的hook链表
  updateQueue, // 第一次渲染收集的effect list
};

当我们点击按钮触发更新，renderWithHooks 函数开始调用，但 Home 函数执行前，此时workInProgressHook、currentHook都为 null。同时新的 fiber 的memoizedState、updateQueue都被重置为 null

hook-list-06.jpg

workInProgressHook用于构建新的 hook 链表

currentHook用于遍历上一次渲染构建的 hook 链表，即旧的链表，或者当前的链表(即和当前显示的页面对应的 hook 链表)

按照本例中调用 hook 函数的顺序，一步步拆解updateWorkInProgressHook算法的过程

  • 第一步 调用 useState

由于此时 currentHook 为 null，因此我们需要初始化它指向旧的 hook 链表的第一个 hook 对象。

if (currentHook === null) {
  var current = currentlyRenderingFiber.alternate;

  if (current !== null) {
    nextCurrentHook = current.memoizedState;
  } else {
    nextCurrentHook = null;
  }
}

currentHook = nextCurrentHook;

创建一个新的 hook 对象，复用上一次的 hook 对象的状态信息，并初始化 hook 链表

var newHook = {
  memoizedState: currentHook.memoizedState,
  baseState: currentHook.baseState,
  baseQueue: currentHook.baseQueue,
  queue: currentHook.queue,
  next: null, // 注意，next被重置了!!!!!
};

if (workInProgressHook === null) {
  currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
}
  • 第二步 调用 useRef

此时 currentHook 已经有值，指向第一个 hook 对象。因此将 currentHook 指向它的下一个 hook 对象，即第二个

if (currentHook === null) {
} else {
  nextCurrentHook = currentHook.next;
}
currentHook = nextCurrentHook;

同样的，也需要为 useRef 创建一个新的 hook 对象，并复用上一次的 hook 状态

hook-list-08.jpg

后面的 hook 的执行过程和 useRef 一样，都是一边遍历旧的 hook 链表，为当前 hook 函数创建新的 hook 对象，然后复用旧的 hook 对象的状态信息，然后添加到 hook 链表中

从更新渲染的过程也可以看出，hook 函数的执行是会遍历旧的 hook 链表并复用旧的 hook 对象的状态信息。这也是为什么我们不能将 hook 函数写在条件语句或者循环中的根本原因，我们必须保证 hook 函数的顺序在任何时候都要一致

完整源码

最终完整的算法如下：

function updateWorkInProgressHook() {
  var nextCurrentHook;

  if (currentHook === null) {
    var current = currentlyRenderingFiber$1.alternate;

    if (current !== null) {
      nextCurrentHook = current.memoizedState;
    } else {
      nextCurrentHook = null;
    }
  } else {
    nextCurrentHook = currentHook.next;
  }

  var nextWorkInProgressHook;

  if (workInProgressHook === null) {
    nextWorkInProgressHook = currentlyRenderingFiber$1.memoizedState;
  } else {
    nextWorkInProgressHook = workInProgressHook.next;
  }

  if (nextWorkInProgressHook !== null) {
    // There's already a work-in-progress. Reuse it.
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;
    currentHook = nextCurrentHook;
  } else {
    // Clone from the current hook.
    if (!(nextCurrentHook !== null)) {
      {
        throw Error(formatProdErrorMessage(310));
      }
    }

    currentHook = nextCurrentHook;
    var newHook = {
      memoizedState: currentHook.memoizedState,
      baseState: currentHook.baseState,
      baseQueue: currentHook.baseQueue,
      queue: currentHook.queue,
      next: null,
    };

    if (workInProgressHook === null) {
      // This is the first hook in the list.
      currentlyRenderingFiber$1.memoizedState = workInProgressHook = newHook;
    } else {
      // Append to the end of the list.
      workInProgressHook = workInProgressHook.next = newHook;
    }
  }

  return workInProgressHook;
}

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

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

相关文章

Spring Boot系列04--静态资源处理

Spring Boot系列04--静态资源处理

目录1. 静态资源映射规则2. 欢迎页1. 静态资源映射规则 在项目中双击shift或ctrlN搜索WebMvcAutoConfiguration.class文件&#xff0c;文件中的addResourceHandlers方法如下&#xff1a; public void addResourceHandlers(ResourceHandlerRegistry registry) {if (!this.reso…
阅读更多...
运维排查篇 | Redis占用内存过高怎么办

运维排查篇 | Redis占用内存过高怎么办

我们知道&#xff0c;Redis是一个key-value数据库&#xff0c;它的数据是运行在内存中的其读写效率比将数据存储到磁盘上的数据库要快很多虽然性能强大&#xff0c;但是如果我们不了解Redis的内存回收策略&#xff0c;就有可能导致Redis消耗内存过高甚至导致内存溢出&#xff0…
阅读更多...
[优化]上下游交互策略

[优化]上下游交互策略

书接上文&#xff1a;https://blog.csdn.net/weixin_43303530/article/details/127227147?spm1001.2014.3001.5502&#xff0c;为满足产品提的在24小时内能重试尽量去重试&#xff0c;不计较重试的次数的要求&#xff0c;在第三方电子卡系统无法提升接口并发数量的情况下&…
阅读更多...
电脑C盘空间不足？这样做就行了！

电脑C盘空间不足？这样做就行了！

一般来说&#xff0c;电脑C盘都是系统盘&#xff0c;它的稳定关系到系统能否正常运行&#xff0c;但是很多朋友的C盘却总是红色的&#xff0c;这也就意味着C盘储存空间不足了&#xff0c;那么我们就需要进行以下操作&#xff0c;来让C盘重新拥有储存空间。方案一&#xff1a;运…
阅读更多...
BLE Mesh蓝牙协议学习记录

BLE Mesh蓝牙协议学习记录

BLE Mesh蓝牙协议学习 文章目录BLE Mesh蓝牙协议学习前言概述一、蓝牙技术整体框架二、经典蓝牙和低功耗蓝牙mesh协议架构图承载层&#xff08;Bearer Layer&#xff09;网络层&#xff08;Network Layer&#xff09;底层传输层&#xff08;Lower Transport Layer&#xff09;上…
阅读更多...
JAVA连接数据库——JDBC的简单使用

JAVA连接数据库——JDBC的简单使用

JDBC即Java数据库连接.用来实现Java程序对数据库增删查改。 为了对接Java程序和数据库&#xff0c;java.sql提供了很多api包含在java.sql和javax.sql里面 结构: DriverManager接口: 每一个数据库的驱动程序都必须去到DriverManager注册&#xff0c;生成一个Connection Conn…
阅读更多...
电商平台的促销活动如何抵御大流量的ddos攻击

电商平台的促销活动如何抵御大流量的ddos攻击

每一次活动大促带来的迅猛流量&#xff0c;对技术人而言都是一次严峻考验。如果在活动期间遭受黑产恶意 DDoS 攻击&#xff0c;无疑是雪上加霜。电商的特性是业务常态下通常不会遭受大流量 DDoS 攻击&#xff0c;且对延迟敏感&#xff0c;因此只需要在活动期间按需使用 DDoS 防…
阅读更多...
【第五章 AOP概述，底层原理，AOP术语，切入点表达式，AOP操作（基于注解方式，基于xml配置文件）】

【第五章 AOP概述，底层原理，AOP术语，切入点表达式，AOP操作（基于注解方式，基于xml配置文件）】

第五章 AOP概述&#xff0c;底层原理&#xff0c;AOP术语&#xff0c;切入点表达式&#xff0c;AOP操作&#xff08;基于注解方式&#xff0c;基于xml配置文件&#xff09; 1.AOP概述&#xff1a; &#xff08;1&#xff09;什么是AOP&#xff1a; ①面向切面编程&#xff08;…
阅读更多...
11-KMP算法

11-KMP算法

KMP算法是一个字符串匹配算法&#xff0c;总的意义是在给定的字符串A中利用优化的方法快速地找出字符串B的位置&#xff0c;相比于传统匹配算法&#xff0c;它能有效减少匹配时间&#xff0c;提高效率。 前缀和后缀 在我们看KMP算法前我们先考虑一个问题&#xff1a;假如我们…
阅读更多...
基于框架的平台总线式开发

基于框架的平台总线式开发

一、总线、设备、驱动 硬编码式的驱动开发带来的问题&#xff1a; 1. 垃圾代码太多 2. 结构不清晰 3. 一些统一设备功能难以支持 4. 开发效率低下 1.1 初期解决思路&#xff1a;设备和驱动分离 struct device来表示一个具体设备&#xff0c;主要提供具体设备相关的资源&am…
阅读更多...
Telnet 基础实验2： SSH 实验

Telnet 基础实验2： SSH 实验

Telnet 基础实验2&#xff1a; SSH 实验 本实验只能使用 eNSP中 AR 系统的路由器做 拓扑图 SSH &#xff1a; Secure Shell 是一个网络安全协议&#xff0c;基本于 TCP 协议 22 端口传输数据&#xff0c;通过对网络数据的加密&#xff0c;使其能够在一个不安全的网络环境中&a…
阅读更多...
网易新财报：游戏养家，教育维稳、音乐快走

网易新财报：游戏养家，教育维稳、音乐快走

配图来自Canva可画 随着互联网流量红利逐渐消退&#xff0c;互联网大厂们也告别高增长时代&#xff0c;逐渐进入稳定增长阶段。近两年&#xff0c;流量焦虑、业务失速等问题更是成为了一团浓雾&#xff0c;笼罩在互联网大厂周围。不过&#xff0c;面对所遭遇的难题&#xff0c…
阅读更多...
力扣-换座位

力扣-换座位

大家好&#xff0c;我是空空star&#xff0c;本篇带大家了解一道简单的力扣sql练习题。 文章目录前言一、题目&#xff1a;626. 换座位二、解题1.正确示范①提交SQL运行结果2.正确示范②提交SQL运行结果3.正确示范③提交SQL运行结果4.正确示范④提交SQL运行结果5.其他总结前言 …
阅读更多...
读书笔记——《富爸爸穷爸爸》

读书笔记——《富爸爸穷爸爸》

《富爸爸穷爸爸》&#xff0c;以前不屑读这种书。这种书就是那种走进书店放在门口展销位的成功学著作&#xff0c;一眼看上去没什么实在的内容&#xff0c;看上去很不靠谱&#xff0c;感觉就是骗一些社会底层又做着暴富梦的人来买的&#xff0c;但是由于自身原因或环境局限根本…
阅读更多...
Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统＜二＞---后端架构完善与接口开发

Spring Boot + Vue3 前后端分离 实战 wiki 知识库系统＜二＞---后端架构完善与接口开发

数据库准备&#xff1a; 在上一次Spring Boot Vue3 前后端分离 实战 wiki 知识库系统<一>---Spring Boot项目搭建已经将SpringBoot相关的配置环境给搭建好了&#xff0c;接下来则需要为咱们的项目创建一个数据库。 1、mysql的安装&#xff1a; 关于mysql的安装这里就…
阅读更多...
【C语言每日一题】杨氏矩阵（源码以及改进源码）

【C语言每日一题】杨氏矩阵（源码以及改进源码）

【C语言每日一题】—— 杨氏矩阵&#x1f60e;&#x1f60e;&#x1f60e; 目录 &#x1f4a1;前言&#x1f31e;&#xff1a; &#x1f49b;杨氏矩阵题目&#x1f49b; &#x1f4aa; 解题思路的分享&#x1f4aa; &#x1f60a;题目源码的分享&#x1f60a; &#x1f4…
阅读更多...
夜天之书 #73 Apache Pulsar 的社群指标

夜天之书 #73 Apache Pulsar 的社群指标

去年十一月&#xff0c;我成为了 Apache Pulsar[1] 社群 Committers 的一员。成为 Committer 之前和之后&#xff0c;我都积极参与了代码仓库上 Issue 和 Pull Request (PR) 的处理回应和评审。去年十二月期间&#xff0c;我把未解决的 Issue 和 PR 数量分别从接近 2000 个和 4…
阅读更多...
STM32学习笔记-I2C通信协议

STM32学习笔记-I2C通信协议

文章目录介绍&#xff1a;两种实现方式&#xff1a;I2C设备的常用连接方式&#xff1a;I2C协议时序&#xff1a;STM32硬件I2C框架图I2C外设通讯过程**I2C读写EEPROM**&#xff08;硬件I2C&#xff09;介绍&#xff1a; 两根通信线SCL&#xff08;时钟线&#xff09;、SDA&#…
阅读更多...
C语言中的强制类型转换

C语言中的强制类型转换

强制类型转换是把变量从一种类型转换为另一种数据类型。例如&#xff0c;如果您想存储一个 long 类型的值到一个简单的整型中&#xff0c;您需要把 long 类型强制转换为 int 类型。您可以使用强制类型转换运算符来把值显式地从一种类型转换为另一种类型&#xff0c;如下所示&am…
阅读更多...
“ChatGPT之父”Sam Altman：如何成功？

“ChatGPT之父”Sam Altman：如何成功？

背靠微软&#xff0c;OpenAI能拳打谷歌&#xff0c;脚踢Meta&#xff0c;它背后的男人&#xff0c;必然不简单。 让我们来看一看&#xff0c;Sam Altman是如何一步步成长为今天这个搅动全世界的男人。 山姆奥特曼&#xff08;Sam Altman&#xff09; 成长和创业经历 在YC创始…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023