React

📄️ React 整体架构

前端框架的理解

📄️ React 渲染流程

React 整体的渲染流程可以分为两大阶段，分别是 render 阶段和 commit 阶段。每个阶段对应不同的组件

📄️ Fiber与双缓冲

Fiber

📄️ MessageChannel

React 在任务调度时利用 MessageChannel 实现非阻塞的异步任务调度，以便高效利用浏览器的主线程，避免影响用户交互和页面渲染的流畅度

📄️ Scheduler 调度普通任务

Scheduler 核心源码在这里

📄️ Scheduler 调度延时任务

延时任务的调度主要是由 requestHostTimeout 函数开启的

📄️ React 中的位运算

位运算

📄️ beginWork

Reconciler 协调器是 Render 阶段的第二部分工作，主要是负责比较当前组件树和新的组件树（由组件状态或属性变化产生），然后计算出实际DOM需要更新的最小变化集。整个工作的过程可以分为「递」和「归」，分别对应 beginWork 方法和 completeWork 方法

📄️ completeWork

为每个 Fiber 节点完成渲染准备，包括处理每个节点的 DOM 更新逻辑和收集本次更新过程中所有子节点的副作用

📄️ Diff算法

diff 发生在 Render 阶段，指的是 CurrentFiberNode(旧) 和 JSX DOM(新) 做对比，然后生成新的 WorkInProgressFiberNode

📄️ Commit 工作流程

Commit 阶段是将 Reconcile 阶段计算出的 DOM 更新应用到实际 DOM 中，并执行相关的生命周期钩子和设置 effect 的阶段

📄️ lane 模型

在 Scheduler 内部，定义了一套通用的优先级机制

📄️ React 中的事件

简介

📄️ Hooks 原理

Hook 内部介绍

📄️ useState 与 useReducer

源码

📄️ Effect 相关 hook

综述

📄️ useMemo 与 useCallback

useCallback

📄️ useRef

- 返回的一个普通 JavaScript 对象，其中有一个 .current 属性指向传递给 useRef 的初始值。useRef 并不会创建一个新的对象，它返回的是同一个 ref 对象每次渲染。而且，useRef 并不负责处理状态更新，对 .current 属性的修改不会触发组件重新渲染。

📄️ update

在 React 中，有许多触发状态更新的方法，比如

📄️ How createRoot works(译)

https://incepter.github.io/how-react-works/docs/react-dom/how.createroot.works

📄️ How hooks work(译)

📄️ How root.render() works(译)

https://incepter.github.io/how-react-works/docs/react-dom/how.root_render.works

📄️ React 工作原理(旧)

React 更新流程

📄️ useEffect（译）

useEffect 是一个React Hook，可以使组件与外部系统同步。

📄️ useMemo（译）

useMemo 是一个React Hook，能够在 re-render 之间缓存一个计算结果。

📄️ useRef（译）

useRef • React (reactjs.org)

📄️ useState（译）

useState • React (reactjs.org)

📄️ 手写 redux

📄️ 面试题积累

useEffect注意事项