长腿程序员

源码目录结构 源码中主要包括如下部分 fixtures：为代码贡献者提供的测试React packages：主要部分，包含Scheduler，reconciler等 scr...

virtual Dom是什么 一句话概括就是，用js对象表示dom信息和结构，更新时重新渲染更新后的对象对应的dom，这个对象就是React.createElement()...

总结 至此我们介绍了react的理念，如果解决cpu和io的瓶颈，关键是实现异步可中断的更新 我们介绍了react源码架构（ui=fn(state)），从scheduler...

这一章的目的是让我们认识一下react源码架构和各个模块。 在真正的代码学习之前，我们需要在大脑中有一个react源码的地图，知道react渲染的大致流程和框架，这样才能从...

迷你react和真正的源码有哪些区别呢 在render阶段我们遍历了整颗Fiber树，在源码中如果节点什么都没改变会命中优化的逻辑，然后跳过这个节点的遍历 commit我们...

异步可中断 React15慢在哪里 在讲这部分之前，需要讲是那些因素导致了react变慢，并且需要重构呢。 React15之前的协调过程是同步的，也叫stack recon...

查看视频调试demo_7 context流程图 cursor/valueStack react源码中存在一个valueStack和valueCursor用来记录contex...

从一个bug说起 下面这个demo_13在react17和react16中有什么不同吗？代码也很简单，模拟一个modal框，点击显示出现，点击其他地方，相当于点击了mask...

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

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源码理解...