React学习--优点及介绍

一.React的特点

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

二.原生js的缺点

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

三.babel的作用

• 将ES6转成ES5
• 将JSX装成JS

四.简单案例

//准备好一个容器
<div id="test"></div>

引入React核心库、React-dom、babel（三个js文件要按顺序引入）

<script type="text/babel"> /*此处一定要写babel*/
//1.创建虚拟DOM
const VDOM = <h1>hello,React</h1> /*此处一定不要写引号，因为不是字符串*/
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM，document.getElementById('test')) /*render(虚拟DOM，容器)*/

五.使用JSX的优点

JSX可以认为是JS的一个语法糖，因为使用JS创建虚拟DOM过于繁琐，需要嵌套创建，而JSX较为简洁清晰。

使用js创建的方式

const VDOM = React.createElement('h1',{id:'title'},React.createElement('span'),{},'hello,React')

上述代码等同于用jsx的下述创建

const VDOM = (<h1 id="title"><span><hello,React></span></h1>)

六.关于虚拟DOM

1. 本质是js的Object类型对象（一般对象）
2. 虚拟DOM是React内部在用，无需真实DOM上挂载那么多的属性
3. 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

七.jsx的语法规则

1. 定义虚拟DOM时，不能写引号
2. 标签中混入JS表达式时要用{}
3. 样式的类名指定不要用class,要用className
4. 内联样式，要用style={{key:value}}的形式去写,例如style={{color:'white',fontSize:'29px'}}(key不能用-连接，要写成小驼峰的形式)
5. 虚拟DOM必须只有一个根标签，即嵌套在div标签内部
6. 标签必须闭合
7. 标签首字母：
   如果是小写字母开头，则将标签转为html中的同名元素；若html中无该标签对应的同名元素，则报错；
   若大写字母开头，React就去渲染对应的组件，若组件未定义，则报错。

jsx练习

<div id="test"></div> //容器
<script type="text/babel">
	//模拟一些数据
	const data = ['Angular','React','vue']
	//创建虚拟DOM
	const VDOM = (
	<div>
		<h1>前端js框架列表</h1>
		<ul>
			{
				data.map((item,index) => {
					return <li key="{index}">{item}</li>
				})
			}
		</ul>
	</div>
	)
	//渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

• 在遍历数据时，必须引入key，因为要为每一个虚拟DOM元素添加唯一标识
• key的值不推荐使用index，这里只是举例子
• 遍历数组时，react可以自动遍历，但是不能遍历对象

八.js语句和js表达式的区别

1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1).a (2).a+b (3).demo(1) (4).arr.map() (5).function test(){}
2.语句（代码):
以下这些都是语句（代码）
(1).if(){} (2).for(){} (3).switch(){case:xxx}