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!