react源码分析-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

react源码分析

专栏成员

60

文章

21921

阅读量

11

订阅数

react源码解析15.scheduler&Lane_2023-03-15

react callback schedule scheduler task

当我们在类似下面的搜索框组件进行搜索时会发现，组件分为搜索部分和搜索结果展示列表，我们期望输入框能立刻响应，结果列表可以有等待的时间，如果结果列表数据量很大，在进行渲染的时候，我们又输入了一些文字，因为用户输入事件的优先级是很高的，所以就要停止结果列表的渲染，这就引出了不同任务之间的优先级和调度

长腿程序员165858

2023-03-15

2550

react源码解析16.concurrent模式_2023-03-15

react cpu generator io scheduler

react17支持concurrent mode，这种模式的根本目的是为了让应用保持cpu和io的快速响应，它是一组新功能，包括Fiber、Scheduler、Lane，可以根据用户硬件性能和网络状况调整应用的响应速度，核心就是为了实现异步可中断的更新。concurrent mode也是未来react主要迭代的方向。

长腿程序员165858

2023-03-15

2230

react源码解析13.hooks源码_2023-03-01

之所以把useState和useReducer放在一起，是因为在源码中useState就是有默认reducer参数的useReducer。

长腿程序员165858

2023-03-01

3730

react源码解析14.手写hooks_2023-03-01

手写hooks最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算

长腿程序员165858

2023-03-01

2430

react源码解析11.生命周期调用顺序_2023-02-28

commit constructor diff error render

函数组件hooks的周期会在hooks章节讲解，这一章的使命周期主要针对类组件，各阶段生命周期执行情况看下图：

长腿程序员165858

2023-02-28

1750

react源码解析12.状态更新流程_2023-02-28

我们重点看下重点看下this.setState和this.forceUpdate，hook在第13章讲

长腿程序员165858

2023-02-28

8520

react源码解析1.开篇介绍和面试题_2023-02-27

react api 网站编程算法

作为前端最常用的js库之一，熟悉react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的使用层面或者想在前端技能的深度上有所突破，那熟悉react源码将是你进步的很好的方式。

长腿程序员165858

2023-02-27

3190

react源码解析10.commit阶段_2023-02-27

在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effectList，effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数，各个函数做的事情如下

长腿程序员165858

2023-02-27

2420

面试官：说说react的渲染过程_2023-02-21

渲染 react 编程算法

hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相关的问题呢，比如面试官让你说说react渲染的过程，这到题目比较开放，也比较考验大家对react渲染原理以及源码的整体架构的理解。

长腿程序员165858

2023-02-21

3020

面试官：说说你对react生命周期的理解_2023-02-21

react 腾讯云开发者社区编程算法

hello，这里是潇晨，今天我们来看下react生命周期在各个阶段是怎样执行的，在面试的过程中有没有遇到这个问题呢，大家也可以学习往期react源码体系文章哦，往期文章目录在文章结尾。

长腿程序员165858

2023-02-21

2330

面试官：useLayoutEffect和useEffect的区别_2023-02-20

大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会回答useEffect是异步的，useLayoutEffect是同步的，这样回答面试官真的会满意慢，我们需要说清楚他们在源码中的调用时机。

长腿程序员165858

2023-02-20

2760

面试官：你是怎样理解Fiber的_2023-02-20

react 编程算法

hello，这里是潇晨，今天我们来聊一聊Fiber。不知道大家面试的时候有没有遇到过和react Fiber相关的问题呢，这一类问题比较开放，但也是考察对react源码理解深度的问题，如果面试高级前端岗，恰巧你平时用的是react，那这道面试题是你必需要会的一道。

长腿程序员165858

2023-02-20

2930

老大react说：schedule，我们今年的小目标是一个亿_2023-02-19

从前，有家z公司，z公司的ceo叫react，它收下有个小弟或者叫小leader，schedule

长腿程序员165858

2023-02-19

2430

面试官：react中的setState是同步的还是异步的_2023-02-19

hello，这里是潇晨，大家在面试的过程是不是经常会遇到这样的问题，react的setState是同步的还是异步的，这个问题回答的时候一定要完整，来看下面这几个例子：

长腿程序员165858

2023-02-19

6130

好好学react源码然后惊艳所有人_2023-02-14

hello，这里是潇晨，今天我们来聊聊react源码，作为使用react多年的前端工程师，我们是否还在使用着各种应用层面的库、框架呢，是否在面试过程中遇到一些关于react源码方面的问题呢，如果是，那么是否尝试过去看看react底层运行逻辑呢？

长腿程序员165858

2023-02-14

4350

来来来，手摸手写一个hook_2023-02-14

编程算法渲染 react

hello，这里是潇晨，今天就带着大家一起来手写一个迷你版的hooks，方便大家理解hook在源码中的运行机制，配有图解，保姆级的教程，只求同学一个小小的👍，🐶。第一步：引入React和ReactDOM因为我们要将jsx转变为virtual-dom，这一步分工作就交给babel吧，而jsx被babel进行词法解析之后会形成React.createElement()的调用，而React.createElement()执行之后的返回结果就是jsx对象或者叫virtual-dom。又因为我们要将我们的demo渲染

长腿程序员165858

2023-02-14

4900

react源码解析8.render阶段_2023-02-13

render阶段的主要工作是构建Fiber树和生成effectList，在第5章中我们知道了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot，而这两个方法分别会调用workLoopSync或者workLoopConcurrent

长腿程序员165858

2023-02-13

1640

react源码解析9.diff算法_2023-02-13

编程算法 react

在render阶段更新Fiber节点时，我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fiber，这里current Fiber是指当前dom对应的fiber树，jsx是class组件render方法或者函数组件的返回值。

长腿程序员165858

2023-02-13

2060

react源码解析6.legacy模式和concurrent模式_2023-02-07

react有3种模式进入主体函数的入口，我们可以从 react官方文档，使用 Concurrent 模式（实验性）中对比三种模式：

长腿程序员165858

2023-02-07

2780

react源码解析7.Fiber架构_2023-02-07

数据结构缓存 react

react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度，给每个task（工作单元）一定的时间，如果在这个时间内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息，这个数据结构就是Fiber。

长腿程序员165858

2023-02-07

1970

点击加载更多

社区活动

AI代码助手快速上手训练营

鹅厂大牛带你玩转AI智能结对编程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态