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

一、ReactDom的render结构

在控制台输出ReactDom:

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

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

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

通过例子：
1、你将会发现

标签是无法解析的。
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，

jsx的语法比较严格。比如把上面例子的

hhello world

改为

hhello world

就会报错

三、render里jsx的原理

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