JSX 的由來
React 為了方便 View 層組件化。承載了構(gòu)建 HTML 結(jié)構(gòu)化頁面的職責(zé)。從這點上來看，React 與其他 JavaScript 模板語言有著許多異曲同工之處，但不同之處在于 React 是通過創(chuàng)建與更新虛擬元素（virtual element）來管理整個 Virtual DOM 的。
JSX 將 HTML 語法直接加入到 JavaScript 代碼中，再通過翻譯器轉(zhuǎn)換成 純JavaScript 。在實際開發(fā)中，JSX 在產(chǎn)品打包階段都已經(jīng)編譯成 純JavaScript 了，不會帶來副作用，反而讓代碼更加直觀并易于維護。
JSX 的官方定義是 類XML語法的ECMAScript擴展。它完美地利用了 JavaScript 自帶的語法和特性。并使用大家熟悉的HTML語法來創(chuàng)建虛擬元素。
JSX 的構(gòu)成
- 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} 都不會渲染任何內(nèi)容
html內(nèi)容轉(zhuǎn)義，需要使用 dangerouslySetInnerHTML 屬性
<div dangerouslySetInnerHTML={{__html: content}}></div>
