react 源码学习笔记

本文将带大家实现 useLayoutEffect 与 useEffect。 先看下如何使用。 两者对比 存储结构相同 存储结构都是单向循环链表。 执行时机不同 useLayoutEffect 会在所有

useRef 是 React 中实现最简单的 hook。 它的应用场景很多，比如 antd、react-router、ahooks。

useCallback 的源码实现非常类似 useMemo，不同的只是缓存的内容不同，一个是结果，一个是函数。

useMemo 的实现并没有你想象中的那么复杂。它把数据缓存到了 fiber 上。缓存的数据结构是一个数组，数组第一项是 value 值，数组第二项是依赖项。

本文将带大家实现 useState。 先看下如何使用。 useState 是基于 useReducer 实现的，参考文章 React 实现 useReducer。 实现 useState useRed

今天带大家实现多个节点 diff。 先看个例子。 整体流程： 从左边往右遍历，比较新老节点，如果节点可以复用，继续往右，否则就停止 新节点没了，老节点还有，则删除剩余的老节点即可 新节点还有，老节点没

今天带大家实现节点删除。 先看个例子。 思路： 节点删除包含两个部分：vdom 删除（不用做），dom 删除 如何删除 dom？把所有要删除的节点放在父 fiber 上 Render 阶段 修改 re

本文将带大家实现 useReducer。 先看下如何使用。 Render 阶段 BeginWork 阶段 reconcileSingleElement 增加了判断节点是否可复用的逻辑。 Complet

基于文章 实现 React 类组件渲染。 本文将介绍如何渲染函数组件。 Render 阶段 BeginWork 阶段 beginWork 函数增加函数组件的 case。 createFiberFrom

基于文章 实现 React Fragment 节点渲染。 本文将介绍如何渲染类组件。 初始化 Component Render 阶段 BeginWork 阶段 beginWork 函数增加类组件的 c

基于文章 实现 React 文本节点渲染。 本文将从三方面介绍如何渲染 Fragment 节点。 子节点 <> 根节点 <> 标签 <Fragment> 子节点 <> Render 阶段 BeginW

基于文章 实现 React 多个原生标签子节点渲染。 本文将实现文本节点渲染，文本节点渲染分两种情况： 文本根节点 文本子节点 文本根节点 Render 阶段 render 阶段的 beginWork

基于文章 简易实现 React 页面初次渲染。 本文将实现多个原生标签子节点渲染，主要涉及 render 阶段的修改。 BeginWork 阶段 reconcileChildFibers 函数增加子节

先从单个原生标签节点开始实现，后面文章会陆续添加多个节点、文本节点、Fragment、类组件以及函数组件的实现。 一切从根节点开始。 首先创建根节点，函数为 createRoot，入参为根 Fiber

在 初步认识 React 中的 fiber 中介绍了什么是 Fiber 以及 Fiber 的类型。 本文将介绍如何创建 Fiber 和 FiberRoot。 创建 Fiber React 使用 cre

先来看个全局变量 executionContext。 executionContext executionContext 标记当前执行环境，比如当前是 render 阶段或者 commit 阶段。 类

上一篇文章 创建根节点 createRoot 介绍了 createRoot 函数，本文继续说下它的返回值，共三个： _internalRoot render unmount 其中 _internalR

话不多说，直接上代码。 入口函数 createRoot 进入 createRoot 函数体。 createContainer 先说下调用路线 createContainer 调用 createFibe

本文将从以下两方面介绍 fiber。 什么是 fiber？ 类型 什么是 fiber？ Fiber 是 React16 中的协调引擎。它的主要目的是使 VDOM 可以进行增量式渲染。 React Fi

React 通过异步合并更新，提高渲染速度。 RequestIdleCallback 的不足 兼容性差-RequestIdleCallback 并不是对所有浏览器都支持的。 工作帧率低，只有 20FP