react源码学习

状态与副作用 在前文我们已经分析了fiber树从构造到渲染的关键过程. 本节我们站在fiber对象的视角, 考虑一个具体的fiber节点如何影响最终的渲染. 回顾fiber 数据结构, 并结合前文fi

React Context 原理 简单来讲, Context提供了一种直接访问祖先节点上的状态的方法, 避免了多级组件层层传递props. 有关Context的用法, 请直接查看官方文档, 本文将从f

React 合成事件 概览 从v17.0.0开始, React 不会再将事件处理添加到 document 上, 而是将事件处理添加到渲染 React 树的根 DOM 容器中. 引入官方提供的图片: 图

React 调度原理(scheduler) 在 React 运行时中, 调度中心(位于scheduler包), 是整个 React 运行时的中枢(其实是心脏), 所以理解scheduler调度, 就基

fiber 树渲染 在正式分析fiber树渲染之前, 再次回顾一下reconciler 运作流程的 4 个阶段: 输入阶段: 衔接react-dom包, 承接fiber更新请求(参考React 应用的

fiber 树构造(对比更新) 在前文fiber 树构造(初次创建)一文的介绍中, 演示了fiber树构造循环中逐步构造fiber树的过程. 由于是初次创建, 所以在构造过程中, 所有节点都是新建,

fiber 树构造(初次创建) 本节的内容完全建立在前文fiber 树构造(基础准备)中介绍的基础知识之上, 其中总结了fiber 树构造的 2 种情况: 初次创建: 在React应用首次启动时, 界

fiber 树构造(基础准备) 在 React 运行时中, fiber树构造位于react-reconciler包. 在正式解读fiber树构造之前, 再次回顾一下reconciler 运作流程的 4

Hook 原理(副作用 Hook) 本节建立在前文Hook 原理(概览)和Hook 原理(状态 Hook)的基础之上, 重点讨论useEffect, useLayoutEffect等标准的副作用Hoo

Hook 原理(状态 Hook) 首先回顾一下前文Hook 原理(概览), 其主要内容有: function类型的fiber节点, 它的处理函数是updateFunctionComponent, 其中

Hook 原理(概览) 在前文状态与副作用中, 总结了class组件, function组件中通过api去改变fiber节点的状态和副作用. 其中对于function组件来讲, 其内部则需要依靠Hoo

title: 优先级管理 group: 运行核心 order: 2 React 中的优先级管理 React是一个声明式, 高效且灵活的用于构建用户界面的 JavaScript 库. React 团队一

React 应用中的高频对象 在 React 应用中, 有很多特定的对象或数据结构. 了解这些内部的设计, 可以更容易理解 react 运行原理. 本章主要列举从 react 启动到渲染过程出现频率较

React 应用的宏观包结构(web 开发) 基础包结构 react react-dom react-reconciler 接受输入(scheduleUpdateOnFiber), 将fiber树生成

React 工作循环 (workLoop) 在前文(React 应用的宏观包结构)中, 介绍了react核心包之间的依赖和调用关系, 并绘制出了概览图. 在概览图中, 可以看到有两个大的循环, 它们分

React 应用的启动过程 本章节主要讲解react应用程序的启动过程, 位于react-dom包, 衔接reconciler 运作流程中的输入步骤. 在正式分析源码之前, 先了解一下react应用的

```` # React 算法之调和算法 ## 概念 调和函数([源码](https://github.com/facebook/react/blob/v17.0.2/packages/react-r

一、回顾更新过程 举个例子，这个问题让我先来回顾一下useState这个的流程，比如说我们有这样一个触发更新的函数 当点击调用setNumber的时候，事实上是调用的dispatchAction函数