【react基础】2、初步认识render函数和jsx

一、ReactDom的render结构

在控制台输出ReactDom:

可以看出render函数有三个参数，第一个参数是指要渲染的元素，第二个参数是这些元素要放在什么容器里面，第三个是回调函数。

二、render的第一个参数（jsx语法）

1、jsx语法简介。请先阅读以下小例子

  <div id="box"></div>	
	<script>
		ReactDOM.render(
			"<h2>hhello world</h2>",
			document.getElementById("box")
			);
	</script>

通过例子：
1、你将会发现<h2>标签是无法解析的。
2、假如把h2外边的引号去掉呢？那你可能会觉得语法很奇怪，居然在js里面写了html的标签。

我们把这种在js里面嵌入html的写法叫做一种语法糖，也叫糖衣语法。而这种语法糖就是jxs，JavaScript扩展，是JavaScript+xml（可扩展的标记语言）。
（关于xml简单理解，html的标签是固定，比如p就代表段落。而xml的标记是自定义的，xml刚出来的时候很火，还曾经有人说可以顶替数据库用，作为数据传输格式很好用。java用xml做配置文件很多）

2、使用jsx

在上一篇已经讲过，要使用jsx语法，就要有babel环境。
babel不仅能把es6语法转为es5，还能解析jsx。

下载babel：npm i babel-standalone --save ,下载完后在node_modules里面找到babel.js文件，在页面应用即可。
记得在script标签写上babel，<script type="text/babel">。如果不写就默认为js语法，则不能解析标签。

	<div id="box"></div>	
	<script type="text/babel">
		ReactDOM.render(
			<h2>hhello world</h2>,
			document.getElementById("box")
			);
	</script>

jsx的语法比较严格。比如把上面例子的<h2>hhello world</h2>改为<h2>hhello world<h2>就会报错

三、render里jsx的原理

	<div id="box"></div>	
	<script type="text/babel">
		 ReactDOM.render(
		 	React.createElement('h2', null, `hello world111`),
		 	document.getElementById("box"))
	</script>

1、jsx是一种语法糖，它不会增强什么功能，它只是一个React.createElement简化的写法。
2、jsx在react里面不是开发必须的，但是用jsx可以提高开发效率。