上一篇我们提到如果 setState 之后，虚拟 dom diff 比较耗时，那么导致浏览器 FPS 降低，使得用户觉得页面卡顿。那么 react 新的调度算法就是把原本一次 diff 的过程切分到各个帧去执行，使得浏览器在 diff 过程中也能响应用户事件。接下来我们具体分析下新的调度算法是怎么回事。

React16 更新了底层架构，新架构主要解决更新节点过多时，页码卡顿的问题。譬如如下代码，根据用户输入的文字生成10000行数据，用户输入框会出现卡顿现象。

我们知道 React 的标准模式是单向数据流，而其表单项通常需要监听 onChange 事件，然后通过改变外部的 value 来回写表单项的 value，譬如如下 input

说在前面，着重梳理实际更新组件和 dom 部分的代码，但是关于异步，transaction，批量合并新状态等新细节只描述步骤。一来因为这些细节在读源码的时候只读了部分，二来如果要把这些都写出来要写老长老长。

拿 ReactDOM render 的部分（<div className="test">...</div>）为例，用 babel 把 jsx 转成 js 后得到如下代码：

上一篇讲了 React 两种最常见的组件：受控组件和非受控组件。为了可用性，我们一般编写出来的组件希望支持这两种特性：可以通过组件自身的方法来改变组件的某(些)状态，也可以通过 props 的值的变化来改变组件自身的同一个(些)状态。

新手写 React 组件往往无从入手，怎么写，什么时候用 props，什么时候用 state 摸不着头脑。其实是没有了解到 React 的一些思想。就我个人的经验大多数的组件都有一定的套路可言，接下来就先介绍下 React 组件的基本思想。