3 - JSX 语法

JSX 的由来

React 为了方便 View 层组件化。承载了构建 HTML 结构化页面的职责。从这点上来看，React 与其他 JavaScript 模板语言有着许多异曲同工之处，但不同之处在于 React 是通过创建与更新虚拟元素（virtual element）来管理整个 Virtual DOM 的。

JSX 将 HTML 语法直接加入到 JavaScript 代码中，再通过翻译器转换成 纯JavaScript 。在实际开发中，JSX 在产品打包阶段都已经编译成 纯JavaScript 了，不会带来副作用，反而让代码更加直观并易于维护。

JSX 的官方定义是 类XML语法的ECMAScript扩展。它完美地利用了 JavaScript 自带的语法和特性。并使用大家熟悉的HTML语法来创建虚拟元素。

JSX 的构成

• JS - JavaScript
• X - xhtml (严格版本的html)

JSX 的基本语法

• 单个根元素
• 单标签要闭合 <br /> <input /> <img />
• img 标签需要添加 alt 属性
• 标签都是小写字母，组件首字母大写
• class -> className
• for -> htmlFor

JSX 中的注释

• 多行注释

{ /*<h2>这是一个组件</h2>*/ }

• 单行注释

{ 
    //<h2>这是一个组件</h2> 
}

React 中的插值表达式

• vue - {{ 1 + 1 }}
• react - { 1 + 1 }

PS: 在插值表达式中{ '' } | { false } | {null} | {undefined} 都不会渲染任何内容

html内容转义，需要使用 dangerouslySetInnerHTML 属性

<div dangerouslySetInnerHTML={{__html: content}}></div>

React 中没有指令系统