学习react（二）

react-dom的作用

把react生成的内容挂载到html页面中的一个节点上，显示出react组件内容
react提供了jsx语法

dangerouslySetInnerHTML类似于vue：v-html

dangerouslySetInnerHTML={{__html:变量名}}
用于富文本的展示

react中给label绑定关联标签使用

react数据视图更新原理

1.state 数据

2.JSX 模板

3.数据+模板 生成虚拟DOM（虚拟DOM本质就是一个JS对象，用它来描述真实DOM）（在这一步损耗了性能）
虚拟DOM格式：['div',{id:'headerRoot'},['span',{},'hello world!']]

4.用虚拟DOM的结构生成真实DOM，来在浏览器中显示，即页面的渲染
真实DOM格式：<div id="headerRoot"><span>hello world!</span></div>

5.state 发生变化

6.数据+模板 生成新的虚拟DOM （极大提升了性能）
虚拟DOM格式：['div',{id:'headerRoot'},['span',{},'hello hello!']]

7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别，替换区别处

8.直接操作DOM，改变span的值为hello hello！