9.虚拟DOM与DIFF算法

1.state 数据

2.JS模板

3.数据+模板生成虚拟DOM(一个描述DOM树结构的JS对象) document文档对象

4.根据虚拟DOM的结构生成真实的DOM 渲染

5.state变化

6.数据+模板生成新的虚拟DOM

7新的虚拟DOM和旧的虚拟DOM进行DIFF算法，找出区别

8.根据区别重新区别再来改变真实DOM

 

 

JSX ==> createElement ==> 虚拟DOM JS对象==> 真实DOM

return <div>item</div>

return React.createElement('div',{},"item")

 

优点：

1.性能提升

2.实现跨端应用，react native 通过虚拟dom 生成原生应用

 

diff算法

1.setState异步提高效率，可以多次setState 一起执行

2.同层比对，层层比对，发现节点不同则将该节点下面的虚拟DOM全部替换

3.所以react 需要同类元素需要key值比对 最好能保证key 更新前后都应该一样才能性能最佳

4.循环key最好不要用index下标，尽量稳定，提高diff性能