SkioFox Blog

React 之技术详解 (六)-源码分析-调度器 (Scheduler)

简介调度器的概念，对于了解操作系统的同学比较熟悉，React 的调度实现与之非常类似。 JavaScript 是运行在单线程环境的。像用户对页面的交互事件更新回调或 rAF 动画更新回调，都执行在单一线程(主线程)上。因此，整个系统运行是时间共享 (Time Sharing) 的，所有任务将共享一条时间线。 React 通过时间分片 (time slicing) 技术将处理时间划分为...

Posted by SkioFox on December 10, 2021

React 之技术详解 (五) - 架构篇 [ 2 ] - Commit 阶段

流程概览上一章我们介绍了，commitRoot 方法是 commit 阶段工作的起点。fiberRootNode 会作为传参。 commitRoot(root); 在 rootFiber.firstEffect 上保存了一条需要执行副作用的 Fiber 节点的单向链表effectList，这些 Fiber 节点的 updateQueue 中保存了变化的 props。这些副作...

Posted by SkioFox on November 26, 2021

React 之技术详解 (五) - 架构篇 [ 1 ] - Render 阶段

本章我们会讲解 Fiber 节点是如何被创建并构建 Fiber 树的。阅读代码的最好的方式是使用 chrome devtool 来进行调试，通过 Performance 选项的录制，可以获得以时间轴为主的函数调用情况。下面是一张点击事件触发的从树 root 节点改变属性导致更新的任务图展示，它是一个单个 task 的展现。可以看到本次更新是一个同步 (sync) 更新方式，从...

Posted by SkioFox on November 18, 2021

React 之技术详解 (四) - 深入理解 JSX

JSX 作为描述组件内容的数据结构，为 JS 赋予了更多视觉表现力。在 React 中我们大量使用。在深入源码之前，有些疑问我们需要先解决： JSX 和 Fiber 节点是同一个东西么？ React Component、React Element 是同一个东西么，他们和 JSX 有什么关系？ JSX 简介相信作为 React 的使用者，你已经接触过 JSX。如果你还不了解...

Posted by SkioFox on October 26, 2021

React 之技术详解 (三)- 源码调试

源码文件结构 React 16 之后的架构分为三层：调度器 (Scheduler)：调度任务的优先级，高优任务优先进入 Reconciler ；协调器 (Reconciler)：负责找出变化的组件；渲染器 (Renderer)：负责将变化的组件渲染到页面上。你可以通过官方文档源码描述了解具体目录信息。顶层目录除去配置文件和隐藏文件夹，根目录的文件夹包括三...

Posted by SkioFox on October 13, 2021

React 之技术详解 (二) - Fiber 理念篇

Fiber 理念篇

简介 React Fiber 是 React 16 中引入的新的协调引擎。它的主要目标是使 React 的渲染过程更加平滑，允许分割渲染工作到多个块中，并使得主线程更加响应用户操作，防止动画和交互的延迟。 Fiber 为 React 带来了如时间切片 (time slicing) 和悬停 (suspense) 等新功能，使得创建交互式的 UI 更加高效。它通过使用虚拟内存或数据结构的...

Posted by SkioFox on September 10, 2021

React 之技术详解 (一) - 初识React

初识React

简介 React 是一个由 Facebook 开发并维护的开源前端 JavaScript 库，专门用于构建用户界面 (UI)。最初发布于 2013 年，React 迅速成为开发单页应用程序 (SPA) 的流行选择。以下是 React 的一些关键优势：声明式编程: React 采用声明式编程范式，使得代码更容易理解和维护。开发者只需描述 UI 应该呈现的状...

Posted by SkioFox on September 10, 2021

算法设计范式

简介算法设计范式 (algorithmic design paradigm) ，或者直接叫做算法范式 (algorithmic paradigm) ，一个通用模型或框架，描述一种类型算法的设计方法。一个算法范式是一个高于其算法 (algorithm) 的抽象，而一种算法是高于计算程序的抽象。国内通常把它叫做算法思想，但是国外的资料一般叫范式 (paradigm)。个人也比较倾向于...

Posted by SkioFox on August 29, 2021

算法：树的两种搜索方式-深度优先 (DFS) & 广度优先 (BFS)

创建树 (Tree) 所有算法的实现都依赖对应的存储的数据结构，深度和广度的搜索其实也可以应用在图 (Graph)的数据结构。当然概念上树也是图一种。这里我们先把树 (tree) 数据结构创建好，然后再讲算法，下面的例子也会以此树为数据结构讲解。一个最简单树的节点包含几个关键信息： Node {id, parentId, data} id 为当前节点的标识，parentI...

Posted by SkioFox on August 20, 2021

数据结构：图 (Graph)

简介图 (Graph) 是由顶点的有穷非空集合和顶点之间边集合组成，通常表示为：G (V，E) 。其中，G 表示一个图，V (vertex) 是顶点集合，E (edge) 是边集合。对于上面的图可以这么去描述： V = {0, 1, 2, 3} E = {(0,1), (0,2), (0,3), (1,2)} G = {V, E} 图可以分为无向图 (undirected ...

Posted by SkioFox on August 18, 2021

SkioFox Blog

React 之技术详解 (六)-源码分析-调度器 (Scheduler)

React 之技术详解 (六)-源码分析-调度器 (Scheduler)

React 之技术详解 (五) - 架构篇 [ 2 ] - Commit 阶段

React 之技术详解 (五) - 架构篇 [ 2 ] - Commit 阶段

React 之技术详解 (五) - 架构篇 [ 1 ] - Render 阶段

React 之技术详解 (五) - 架构篇 [ 1 ] - Render 阶段

React 之技术详解 (四) - 深入理解 JSX

React 之技术详解 (四) - 深入理解 JSX

React 之技术详解 (三)- 源码调试

React 之技术详解 (三)- 源码调试

React 之技术详解 (二) - Fiber 理念篇

Fiber 理念篇

React 之技术详解 (一) - 初识React

初识React

算法设计范式

算法设计范式

算法：树的两种搜索方式-深度优先 (DFS) & 广度优先 (BFS)

算法：树的两种搜索方式-深度优先 (DFS) & 广度优先 (BFS)

数据结构：图 (Graph)

数据结构：图 (Graph)

FEATURED TAGS

ABOUT ME

FRIENDS