JSX 语法的使用及其注意点

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

在使用react开发项目的时候，基本都会使用到JSX 语法，它的主要特点就是，凡是使用 到JavaScript 的值的地方，都可以插入这种类似 HTML 的语法。
React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

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

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

const lut= <h1>love u, tiantian!</h1>;
复制代码

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。它被称为 JSX， 一种 JavaScript 的语法扩展。

我们知道元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

var myDivEle = <div className="lut">这是一个jsx</div>; 
ReactDOM.render(myDivEle, document.getElementById('name'));
复制代码

我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号  {}  中。实例如下：

var myDivEle = <div> <h1>{520+1314}</h1> </div>; 
ReactDOM.render( myDivEle, document.getElementById('name') );
复制代码

在使用的时候需要有两个注意的点：

• 所有 HTML 标签必须是闭合的，如果写成<h1>love就会报错。如果是那种没有闭合语法的标签，必须在标签尾部加上斜杠，比如<img src="" />。
• 任何 JSX 表达式，顶层只能有一个标签，也就是说只能有一个根元素。下面的写法会报错。
• 由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className和 htmlFor 来做对应的属性。

// 报错，因为根元素的位置有两个并列的<h1>标签
const lut= <h1>tiantian</h1><h1>520</h1>;

// 不报错，在其外在包裹一个div，就不会报错，因为只允许有一个根元素
const lut= <div><h1>tiantian</h1><h1>520</h1></div>;
复制代码