React
React Suspense 源码解析
说明# React 版本 v18.1.0
我们称 React.lazy 引入的组件为 lazyComponent , Suspense 上的 fallback 内的组件为 fallbackComponent
分析基于下述代码
Copy
/**
* src…
React Hooks: useTransition
说明 本文基于 v18.1.0 进行分析。
阅读本文需先阅读 React Hooks: hooks 链表、React Hooks: useState 分析。
调试基于 React Hooks: useState 内关于插队的代码。
TLNR
该 Hook 的返回值…
React Hooks: useReducer 分析
说明 本文基于 v18.1.0 进行分析。
阅读本文需先阅读 React Hooks: hooks 链表、React Hooks: useState 分析
与其他 hooks 相同，都会分为 mount 与 update 阶段
与 useState 几乎一致…
React.memo
TLNR# React.memo 通过对传入的组件打上 REACT_MEMO_TYPE 的标签后使得在每一次更新前对传入的 props 进行浅比较（或者通过 compare 函数对新旧 props 进行比较），来决定是否复用原来的 fiber 组件 如果当前组件内存在更新，那么…
React Hooks: useContext & Context
说明 本文重点将会分析 React 内的 Context 机制，分为三个小阶段
createContext
context.Provider
useContext
demo 基于官方例子
Copy
const themes = {
light: {…
React Hooks: useRef & Refs
说明 本文将分析以下两点
useRef 是如何存储数据的
Refs 是如何引用到真实 dom 的
阅读本文需先阅读 React Hooks: hooks 链表
版本基于 v18.1.0
分析基于以下代码
Copy
import { useRef…
React Hooks: useCallback & useMemo
说明# useCallback 与 useMemo 作为优化性的 hooks，可以帮助减少 react 组件内不必要的渲染与计算，但本文只分析指两个 hooks 的实现，不讲解如何使用，版本基于 v18.1.0 阅读本文需先阅读 React Hooks: hooks 链表 和所…
React Scheduler: Scheduler 源码分析
TLNR 全文就是在画下面这个图
说明
Scheduler 作为 react 内任务调度的核心是源码阅读绕不开的点（时间切片这一概念其实就存在于该包内），不过幸运的是，该模块是独立的一个包（可脱离 react 内的一些概念，因此逻辑十分干净），并且在打包后也只有小 700…
React Hooks: useState 分析
说明 本文基于 v18.1.0 进行分析。
在对于 useState 进行调试时会反复出现 interleaved 这一概念，请参考该 链接
文章大致上基于下面的代码进行分析，根据情况不同会有一定的改动。
2022-10-14 补充了关于批处理的源码分析（涉及 任务复用【相关】…
React Hooks: useEffect与useLayoutEffect
TLNR 我希望这篇文章可以帮助读者理解以下几点：
use (layout) Effect 被调用时会创建 effct 对象，且该对象会以链表的形式被挂载到 fiber 的 updateQueue 上
useEffect 由于会被 Scheduler 以…
React Hooks: hooks 链表
文章的 React 版本基于 v17.02 的 concurrent 模式 hooks 链表是在讲解所有 hook 前绕不开的话题，此文将以调试的角度出发分析 hooks 链表的结构与作用。
组件挂载时的链表逻辑
首先我们试着对这段代码进行录制。
Copy
import…