为什么要学React?
1.原生js操作DOM繁琐、效率低
2.使用JS直接操作DOM，浏览器会进行大量的重绘重排
3.原生JS没有组件化编码方案，代码复用率低
React的特点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效
React的使用
1.准备好一个容器
2.引入react核心库，引入react-dom、用于支持react操作DOM,引入babel、用于将jsx转为js
3.创建虚拟DOM
4.渲染虚拟DOM到页面
虚拟DOM与真实DOM
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
JSX
1.全称: JavaScript XML
2.作用：用来简化创建虚拟DOM
1) 写法：var ele = <h1>Hello JSX!</h1>
2) 注意1：它不是字符串, 也不是HTML/XML标签
3) 注意2：它最终产生的就是一个JS对象
3. 基本语法规则
1) 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
2) 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
4.babel.js的使用
1) 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2) 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
jsx语法规则.html
5.语法规则
1.定义虚拟DOM时，不要写引号。
2.标签中混入JS表达式时要用{}。
3.样式的类名指定不要用class，要用className。
4.内联样式，要用style={{key:value}}的形式去写。第一层大括号代表要在里面写js表达式，第二层代表里面写的不是函数、数组之类的而是对象
5.只有一个根标签
6.标签必须闭合
7.标签首字母
(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素， 则报错。
(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
渲染虚拟DOM
1. 语法: ReactDOM.render
2. 作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示
3. 参数说明
1) 参数一: 纯js或jsx创建的虚拟dom对象
2) 参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)
标签：DOM,标签,js,React,虚拟,JS 来源： https://blog.csdn.net/weixin_53024314/article/details/123640006
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。