初学react

1、是什么？

1.1、用于构建用户界面的JavaScript库

是一个将数据渲染为HTML视图的开源Javascript库

1. 发送请求获取数据
2. 处理数据（过滤、整理格式等）
3. 操作DOM呈现页面

2、为什么要学？

2.1原生js缺点：

1. 原生js操作DOM繁琐、效率低（DOM-API操作UI）
2. 使用js直接操作DOM，浏览器会进行大量的重绘重排
3. 原生js没有组件化编码方案，代码复用率低

3、React的特点：

1. 采用组件化模式、声明式编码、提高开发效率及组件复用率。
2. 在React Native中可以使用React语法进行移动端开发。
3. 使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

4、React高效的原因

1. 使用虚拟DOM不总是直接操作页面真实DOM。
2. DOM Diffing算法，最小化也页面重绘。

5、创建虚拟DOM的两种方式

1. 使用原生js创建

   <script type="text/javascript">
   			// <!-- 1.创建虚拟DOM -->
   			const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{id:'span'},'Hello!React'));
   			// 							标签名，标签属性，标签内容
   			// <!-- 2.渲染虚拟DOM到页面 -->
   			ReactDOM.render(VDOM,document.getElementById('test'))
   			// <!--         渲染虚拟目标，容器 -->
   </script>
   

   2.使用jsx创建

   <script type="text/babel">/*注意此处改为babel，声明不用js写，而用jsx写*/
   			// 1.创建虚拟DOM
   			const VDOM =(
   				<h1 id='title'>
   					<span>Hello!React</span>
   				</h1>
   			)/*此处一定不要写引号，因为不是字符串*/
   			// 2.渲染虚拟DOM到页面
   			ReactDOM.render(VDOM,document.getElementById('test'))
   			//          渲染虚拟目标 ，  容器
   </script> 
   

可见，在创建多层标签嵌套关系时，很明显，jsx要比js方便很多且高效很多