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>
