用户8771298的专栏-腾讯云开发者社区

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

用户8771298的专栏

专栏成员

41

文章

32094

阅读量

14

订阅数

react源码解析12.状态更新流程

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

2021-12-15

8380

react源码解析11.生命周期调用顺序

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

2021-12-15

2080

react源码解析8.render阶段

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

2021-12-13

2760

react源码解析7.Fiber架构

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

2021-12-13

3160

react源码解析6.legacy和concurrent模式入口函数

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

2021-12-10

5410

react源码解析3.react源码架构

在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从上帝视角看react是怎么更新的，来吧少年。

2021-12-10

5010

2.react心智模型(来来来,让大脑有react思维吧)

视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等，并且详细debug源码和分析，过程更清晰。

2021-12-09

7560

人人都能读懂的react源码解析(大厂高薪必备)

本教程目标是打造一门严谨(严格遵循react17核心思想)、通俗易懂(提供大量流程图解，结合demo、视频教程)的react源码解析课程，争取做到最容易理解，学起来效率最高的教程。在视频教程中，会带着大家一步一步断点调试。学完本课程后，你对react的理解会上升一个档次，如果能把课程所有知识点都掌握，相信你对react源码的认知已经超过大多数的面试官了。

2021-12-09

6940

react源码解析20.总结&第一章的面试题解答

至此我们介绍了react的理念，如果解决cpu和io的瓶颈，关键是实现异步可中断的更新

2021-12-08

1.3K0

react源码解析19.手写迷你版react

react源码解析19.手写迷你版react 视频讲解（高效学习）：进入学习迷你react和真正的源码有哪些区别呢在render阶段我们遍历了整颗Fiber树，在源码中如果节点什么都没改变会命中优化的逻辑，然后跳过这个节点的遍历 commit我们也遍历了整颗Fiber树，源码中只遍历带有effect的Fiber节点，也就是遍历effectList 每次遍历的时候我们都是新建节点，源码中某些条件会复用节点没有用到优先级第一步：渲染器和入口函数 const React = { createEleme

2021-12-08

6840

react源码解析18事件系统

下面这个demo_13在react17和react16中有什么不同吗？代码也很简单，模拟一个modal框，点击显示出现，点击其他地方，相当于点击了mask，modal消失，因为react事件都是委托到上层，所以需要在handleClick阻止冒泡，这样点击显示的时候不会触发document上的事件回调，导致modal无法显示。但是在react16上发现这样做还是不行，需要调用e.nativeEvent.stopImmediatePropagation()才能实现，而react17上没什么影响

2021-12-07

4810

react源码解析17.context

react源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context，另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化

2021-12-07

2730

react源码解析16.concurrent模式

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

2021-12-06

2460

react源码解析15.scheduler&Lane

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

2021-12-06

1950

react源码解析14.手写hooks

最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算，详细见视频讲解

2021-12-04

2720

react源码解析13.hooks源码

在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate

2021-12-04

5760

react源码解析12.状态更新流程

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

2021-12-03

9690

react源码解析11.生命周期调用顺序

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

2021-12-03

2350

react源码解析2.react的设计理念

React15之前的协调过程是同步的，也叫stack reconciler，又因为js的执行是单线程的，这就导致了在更新比较耗时的任务时，不能及时响应一些高优先级的任务，比如用户的输入，所以页面就会卡顿，这就是cpu的限制。

2021-12-02

2450

react源码解析10.commit阶段

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

2021-12-02

2540

点击加载更多

活动推荐

社区活动

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验