首页
学习
活动
专区
工具
TVP
发布

用户8771298的专栏

专栏作者
41
文章
30012
阅读量
14
订阅数
react源码解析12.状态更新流程
我们重点看下重点看下this.setState和this.forceUpdate,hook在第13章讲
zz1998
2021-12-15
7830
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
zz1998
2021-12-15
1840
react源码解析8.render阶段
render阶段的主要工作是构建Fiber树和生成effectList,在第5章中我们知道了react入口的两种模式会进入performSyncWorkOnRoot或者performConcurrentWorkOnRoot,而这两个方法分别会调用workLoopSync或者workLoopConcurrent
zz1998
2021-12-13
2340
react源码解析7.Fiber架构
react15在render阶段的reconcile是不可打断的,这会在进行大量节点的reconcile时可能产生卡顿,因为浏览器所有的时间都交给了js执行,并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度,给每个task(工作单元)一定的时间,如果在这个时间内没执行完,也要交出执行权给浏览器进行绘制和重排,所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息,这个数据结构就是Fiber。
zz1998
2021-12-13
2720
react源码解析6.legacy和concurrent模式入口函数
react有3种模式进入主体函数的入口,我们可以从 react官方文档 使用 Concurrent 模式(实验性)中对比三种模式:
zz1998
2021-12-10
5030
react源码解析3.react源码架构
在真正的代码学习之前,我们需要在大脑中有一个react源码的地图,知道react渲染的大致流程和框架,这样才能从上帝视角看react是怎么更新的,来吧少年。
zz1998
2021-12-10
4600
2.react心智模型(来来来,让大脑有react思维吧)
​ 视频课程的目的是为了快速掌握react源码运行的过程和react中的scheduler、reconciler、renderer、fiber等,并且详细debug源码和分析,过程更清晰。
zz1998
2021-12-09
6690
人人都能读懂的react源码解析(大厂高薪必备)
​ 本教程目标是打造一门严谨(严格遵循react17核心思想)、通俗易懂(提供大量流程图解,结合demo、视频教程)的react源码解析课程,争取做到最容易理解,学起来效率最高的教程。在视频教程中,会带着大家一步一步断点调试。学完本课程后,你对react的理解会上升一个档次,如果能把课程所有知识点都掌握,相信你对react源码的认知已经超过大多数的面试官了。
zz1998
2021-12-09
5900
react源码解析20.总结&第一章的面试题解答
至此我们介绍了react的理念,如果解决cpu和io的瓶颈,关键是实现异步可中断的更新
zz1998
2021-12-08
1.2K0
react源码解析19.手写迷你版react
react源码解析19.手写迷你版react 视频讲解(高效学习):进入学习 迷你react和真正的源码有哪些区别呢 在render阶段我们遍历了整颗Fiber树,在源码中如果节点什么都没改变会命中优化的逻辑,然后跳过这个节点的遍历 commit我们也遍历了整颗Fiber树,源码中只遍历带有effect的Fiber节点,也就是遍历effectList 每次遍历的时候我们都是新建节点,源码中某些条件会复用节点 没有用到优先级 第一步:渲染器和入口函数 const React = { createEleme
zz1998
2021-12-08
6590
react源码解析18事件系统
下面这个demo_13在react17和react16中有什么不同吗?代码也很简单,模拟一个modal框,点击显示出现,点击其他地方,相当于点击了mask,modal消失,因为react事件都是委托到上层,所以需要在handleClick阻止冒泡,这样点击显示的时候不会触发document上的事件回调,导致modal无法显示。但是在react16上发现这样做还是不行,需要调用e.nativeEvent.stopImmediatePropagation()才能实现,而react17上没什么影响
zz1998
2021-12-07
4400
react源码解析17.context
react源码中存在一个valueStack和valueCursor用来记录context的历史信息和当前context,另外还有一个didPerformWorkStackCursor用来表示当前的context有没有变化
zz1998
2021-12-07
2530
react源码解析16.concurrent模式
react17支持concurrent mode,这种模式的根本目的是为了让应用保持cpu和io的快速响应,它是一组新功能,包括Fiber、Scheduler、Lane,可以根据用户硬件性能和网络状况调整应用的响应速度,核心就是为了实现异步可中断的更新。concurrent mode也是未来react主要迭代的方向。
zz1998
2021-12-06
1940
react源码解析15.scheduler&Lane
当我们在类似下面的搜索框组件进行搜索时会发现,组件分为搜索部分和搜索结果展示列表,我们期望输入框能立刻响应,结果列表可以有等待的时间,如果结果列表数据量很大,在进行渲染的时候,我们又输入了一些文字,因为用户输入事件的优先级是很高的,所以就要停止结果列表的渲染,这就引出了不同任务之间的优先级和调度
zz1998
2021-12-06
1740
react源码解析14.手写hooks
最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算,详细见视频讲解
zz1998
2021-12-04
2570
react源码解析13.hooks源码
​ 在hook源码中hook存在于Dispatcher中,Dispatcher就是一个对象,不同hook 调用的函数不一样,全局变量ReactCurrentDispatcher.current会根据是mount还是update赋值为HooksDispatcherOnMount或HooksDispatcherOnUpdate
zz1998
2021-12-04
5500
react源码解析12.状态更新流程
我们重点看下重点看下this.setState和this.forceUpdate,hook在第13章讲
zz1998
2021-12-03
9180
react源码解析11.生命周期调用顺序
函数组件hooks的周期会在hooks章节讲解,这一章的使命周期主要针对类组件,各阶段生命周期执行情况看下图:
zz1998
2021-12-03
2140
react源码解析2.react的设计理念
React15之前的协调过程是同步的,也叫stack reconciler,又因为js的执行是单线程的,这就导致了在更新比较耗时的任务时,不能及时响应一些高优先级的任务,比如用户的输入,所以页面就会卡顿,这就是cpu的限制。
zz1998
2021-12-02
2100
react源码解析10.commit阶段
在render阶段的末尾会调用commitRoot(root);进入commit阶段,这里的root指的就是fiberRoot,然后会遍历render阶段生成的effectList,effectList上的Fiber节点保存着对应的props变化。之后会遍历effectList进行对应的dom操作和生命周期、hooks回调或销毁函数,各个函数做的事情如下
zz1998
2021-12-02
2300
点击加载更多
社区活动
Python精品学习库
代码在线跑,知识轻松学
【玩转EdgeOne】征文进行中
限时免费体验,发文即有奖~
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
技术创作特训营·精选知识专栏
往期视频·干货材料·成员作品·最新动态
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档