1、state 数据
2、jsx模板
3、生成虚拟dom（虚拟DOM就是一个js对象，用它来描述真实DOM）
['div', {id:'abc'}, ['span', {}, 'hello world']]
通过这样的一个js对象，我们就可以表述上面的dom结构了
4、用虚拟dom的结构，生成真实的dom，来显示
<div id='abc'><span>hello world</span></div>
5、state发生变化
6、新的虚拟dom（极大的提升了性能）
['div', {id:'abc'}, ['span', {}, 'bye bye']]
7、比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
8、直接操作DOM,改变span中的内容
diff —> difference
找原始的虚拟DOM和新的虚拟DOM的差异，这也就是我们第七步
react的diff算法大大的提升了两个虚拟dom的比对性能
如上图，虚拟dom当数据发生改变的时候，虚拟dom才会去做新的比对。当props或者是state改变时，数据发生改变。其实props的改变是因为父组件的state发生了改变，归根到底都是调用setState的时候数据才发生变化，然后虚拟DOM才重新的比对。
setState是异步的原因，实际上是为了提升react底层的性能。假设连续调用三次setState，变更三组数据，那么就会进行三次虚拟dom的比对，然后更新三次页面。假设三次调用setState的时间间隔非常的小，这样比较浪费性能。所以react，在你连续调用三次setState时，合并成一次setState，只做一次虚拟DOM的比对，然后去更新一次DOM。这样的话，就可以省去额外的两次DOM比对带来的性能上的耗费。也就是说，setState可以把多次setState结合成一次setState，减少虚拟DOM比对的次数。
具体的diff算法
如图，diff算法有个很重要的概念，叫做同级比较。左侧是一个虚拟DOM，当数据发生改变的时候，右侧又会生成一个新的虚拟DOM，然后要做两个虚拟DOM做比对，找到差异之后，去更新真实的DOM。在比对的时候是同层比对。
首先会比较最顶层的虚拟dom节点是否一致，假设一致，再去比较下一个层。假设第一层的两个虚拟dom不一致，这个时候怎么办呢？这个时候react就不会往下比了，他会把原始页面上的虚拟dom下面的节点的DOM全部删除掉，重新生成一遍节点下面的所有dom，然后用重新生成的dom，替换原始页面的dom，也就是只比对一层虚拟dom，大家可能会想，这不是性能很低吗？假设第一层节点不同，下面的节点都相同，岂不是下面的节点都没法复用了，确实是这样的，虽然会造成一些dom节点的渲染浪费，但是这种比对有什么好处呢？
我们说同层比对，带来的算法非常的简单，只要一层一层的做对比就行了，算法简单，带来的好处就是比对的速度会非常的快，所以可能会造成重新渲染的一些浪费，但大大减少了两个虚拟DOM之间比对的算法上的性能消耗。所以采用了同层比对的算法。也就是说diff算法比对两个虚拟DOM差异的时候，逐层比对，一层不满足匹配的要求，那么下面的话就不会再去比对了，直接就废弃掉，用下面的新的替换掉老的，这样的话，会提升性能。
再如图，假设我有1个数组，数组里面有5个数据，然后在页面第一次渲染的时候，我会把这个5个数据映射成5个虚拟dom节点，生成一个小的虚拟dom树，接着我又往数组里面增加一些内容，于是数据发生变化，会生成一个新的虚拟dom树，然后会做两个虚拟DOM之间的比对，就是图左上下进行比对，如果每个虚拟dom没有一个key值，就没有一个自己的名字，当作两个虚拟dom树比对的时候，节点和节点之间的关系就很难被确定，比如第二个虚拟DOM上的节点，下面的第一个是跟上面的第一个比对，还是跟下面的第二个进行比对，这个很难做判断。
所以需要做两层循环的一个比较，这样比较起来就很麻烦了，也比较耗性能。现在加入在给虚拟dom循环的时候，我们可以给每一个节点起一个名字。如图右，虚拟dom根据key值做关联，只要找到对应的名字一样的节点是否相同，极大的提高了react的性能。
前提：之前虚拟树上的abcde，到了新的虚拟DOM上，他的名字依然还叫作abcde，这就是循环中，key值为啥不叫index。如果key值是index的话，就没法保证在原始的虚拟dom树上，他的key值和虚拟dom树上的key值一致了。举个例子，比如一个数组
a-0 b-1 c-2
这个时候把a删除掉
b-0 c-1
这样原来b的key值是1，现在b的key值是0，所以以前的b，和现在的b就无法建立起关系，这个key值就不好用了，这就是用index作key值的一个问题，他会导致key值不稳定，这个时候失去了key值的意义，所以我们说不要用index作为key值，那么使用一个稳定的key值，才是正确的做法，在我们todolist案例中，可以将key值设为item内容。
