React定位是一个构建用户界面的JavaScript类库，使用JavaScript开发UI组件，支持多种方式渲染组件，输出用户界面。 React基础模块（这个模块定义了React的基础API及组件相关内容。对应我们开发页面时引入的 'react' 模块） 渲染模块（这个模块对…

1. 初始化阶段 2. 更新阶段 3. 卸载阶段 这里需要注意的是更新阶段，componentWillReceiveProps是由父组件触发的更新，只要父组件更新，子组件的该生命周期就会被执行，跟props无关。同是，shouldComponentUpdate可以用来做性能优化…

下面是我阅读过源码后，将所有的执行流程总结出来的流程图，不会贴代码，如果你想阅读代码看看具体是如何实现的，可以根据流程图去源码里寻找。 组件装载 / 更新。 通过lastProps、nextProps判断是否新增、删除事件分别调用事件注册、卸载方法。 获取document对象。…

看完这个例子，也许很多小伙伴会下意识的以为setState是一个异步方法，但是其实setState并没有异步的说法，之所以会有一种异步方法的表现形式，归根结底还是因为react框架本身的性能机制所导致的。因为每次调用setState都会触发更新，异步操作是为了提高性能，将多个状…

自从react 16出来以后，react fiber相关的文章层出不穷，但大多都是讲解fiber的数据结构，以及组件树的diff是如何由递归改为循环遍历的。对于time slicing的描述一般都说利用了requestIdleCallback这个api来做调度，但对于任务如何调…

上次讲述了任务的优先级，以及如何根据优先级（过期时间）加入任务链表,今天来分析一下如何在一个合适的时机去执行任务。 上文讲到要用requetAnimationFrame去模拟requestIdleCallback，但requetAnimationFrame有个缺点，就是当前ta…

首先查看README文件，官方介绍Scheduler是在浏览器环境中对任务进行协作调度的一个库。因此实际上，这个库跟react并没有关联，它只是实现了对一连串的任务进行排序，然后在适当的时间去执行任务的这样一个功能。 1. 任务优先级 在SchedulerPriorities文…

若state.nums初始值为0，在非并发模式下，最终会更新到2，因为setState是同步的；而在并发模式下，nums最终仍然为1，因为第二个setState任务无法加入调度器；来源1和来源3都是调度任务，在react调度器中，调度任务不能同时出现两个或以上；为什么有这个规则…

我们知道 ReactDOM 会在后台构建 DOM 树并将应用渲染在屏幕上。那么 React 实际上是如何构建 DOM 树的呢？当应用的 state 改变时，它又如何更新 DOM 树？ 在本文中，我将先介绍在 React 15.0.0 之前 React 构建 DOM 树的原理，以…