React基础语法归纳

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，由babel转化为js。

我们不需要一定使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。
• 屏蔽直接操作DOM，抽象程度比较高

通俗的来说，JSX的语法目的就是想把HTML揉合到javascript中，有点类似于XML，这样开发起来，只有纯粹的jsx文件，干净整洁。但是由于JSX把HTML揉和到了js中，在渲染方面就会出现问题，这时候，就需要引入

React DOM来解决这个问题。促使浏览器认识我们揉和到js中的HTML片段。具体方法就是ReactDOM.render() ，可以把react中的虚拟DOM转化成DOM元素进行渲染。

上图就是一个简单的react页面组成部分，render中就是标准的JSX的语法，将HTML和js糅合在一起的形式。

JSX注释：

JSX数据绑定：

JSX条件渲染：

JSX事件处理：

JSX数组循环：

JSX中发起ajax请求获取数据：

获取数据时机要正确，放在conponentDidMount()中。

JSX继承参数prop:

props其实是用来接收绑定在本组件的一些数据的，

JSX状态机state：

react中通过修改state中的数据来触发页面重新渲染，而不是操作DOM。下图为修改构造函数中定义的状态值data。