长腿程序员

当我们在类似下面的搜索框组件进行搜索时会发现，组件分为搜索部分和搜索结果展示列表，我们期望输入框能立刻响应，结果列表可以有等待的时间，如果结果列表数据量很大，在进行渲染的时...

concurrent mode react17支持concurrent mode，这种模式的根本目的是为了让应用保持cpu和io的快速响应，它是一组新功能，包括Fiber、...

hook调用入口 ​ 在hook源码中hook存在于Dispatcher中，Dispatcher就是一个对象，不同hook 调用的函数不一样，全局变量ReactCurren...

手写hooks最关键的是要理解hook队列和update队列的指针指向和updateQueue的更新计算 相关参考视频讲解：进入学习...

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

setState&forceUpdate 在react中触发状态更新的几种方式： ReactDOM.render this.setState this.forceUpdat...

怎样学习react源码 作为前端最常用的js库之一，熟悉react源码成了高级或资深前端工程师必备的能力，如果你不想停留在api的使用层面或者想在前端技能的深度上有所突破，...

在render阶段的末尾会调用commitRoot(root);进入commit阶段，这里的root指的就是fiberRoot，然后会遍历render阶段生成的effect...

hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相关的问题呢，比如面试官让你说说react渲染的过程，这到题目比较开放，也比较考验大家对react渲染...

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

大家面试的过程中有没有遇到过这样的问题呢，useLayoutEffect和useEffect的区别是什么，大家可能会回答useEffect是异步的，useLayoutEff...

hello，这里是潇晨，今天我们来聊一聊Fiber。不知道大家面试的时候有没有遇到过和react Fiber相关的问题呢，这一类问题比较开放，但也是考察对react源码理解...

hello，这里是潇晨，今天来讲个故事 讲个故事： 从前，有家z公司，z公司的ceo叫react，它收下有个小弟或者叫小leader，schedule schedule每天...

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

hello，这里是潇晨，今天我们来聊聊react源码，作为使用react多年的前端工程师，我们是否还在使用着各种应用层面的库、框架呢，是否在面试过程中遇到一些关于react...

hello，这里是潇晨，今天就带着大家一起来手写一个迷你版的hooks，方便大家理解hook在源码中的运行机制，配有图解，保姆级的教程，只求同学一个小小的👍，🐶。 第一...

render阶段的入口 render阶段的主要工作是构建Fiber树和生成effectList，在第5章中我们知道了react入口的两种模式会进入performSyncWo...

在render阶段更新Fiber节点时，我们会调用reconcileChildFibers对比current Fiber和jsx对象构建workInProgress Fib...

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

Fiber的深度理解 react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了j...