React學(xué)習(xí)筆記四

React 使用 JSX 來替代常規(guī)的 JavaScript。

JSX 是一個(gè)看起來很像 XML 的 JavaScript 語法擴(kuò)展。

我們不需要一定使用 JSX,但它有以下優(yōu)點(diǎn):

JSX 執(zhí)行更快,因?yàn)樗诰幾g為 JavaScript 代碼后進(jìn)行了優(yōu)化。

它是類型安全的,在編譯過程中就能發(fā)現(xiàn)錯(cuò)誤。

使用 JSX 編寫模板更加簡單快速。

先看下以下代碼:

const element = <h1>Hello, world!</h1>;

這種看起來可能有些奇怪的標(biāo)簽語法既不是字符串也不是 HTML。

它被稱為 JSX, 一種 JavaScript 的語法擴(kuò)展。 我們推薦在 React 中使用 JSX 來描述用戶界面。

JSX 是在 JavaScript 內(nèi)部實(shí)現(xiàn)的。

我們知道元素是構(gòu)成 React 應(yīng)用的最小單位,JSX 就是用來聲明 React 當(dāng)中的元素。

與瀏覽器的 DOM 元素不同,React 當(dāng)中的元素事實(shí)上是普通的對(duì)象,React DOM 可以確保 瀏覽器 DOM 的數(shù)據(jù)內(nèi)容與 React 元素保持一致。

要將 React 元素渲染到根 DOM 節(jié)點(diǎn)中,我們通過把它們都傳遞給 ReactDOM.render() 的方法來將其渲染到頁面上:

React 實(shí)例

var myDivElement = <div className="foo" />;

ReactDOM.render(myDivElement, document.getElementById('example'));

注意:? 由于 JSX 就是 JavaScript,一些標(biāo)識(shí)符像 class 和 for 不建議作為 XML 屬性名。作為替代,React DOM 使用 className 和 htmlFor 來做對(duì)應(yīng)的屬性。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 前言 在Jq,原生javascript時(shí)期,在寫頁面時(shí),往往強(qiáng)調(diào)的是內(nèi)容結(jié)構(gòu),層疊樣式,行為動(dòng)作要分離,三者之間分...
    itclanCoder閱讀 810評(píng)論 0 2
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記,個(gè)人覺得該教程講解深入淺出,比目前大...
    leonaxiong閱讀 2,945評(píng)論 1 18
  • 40、React 什么是React?React 是一個(gè)用于構(gòu)建用戶界面的框架(采用的是MVC模式):集中處理VIE...
    萌妹撒閱讀 1,191評(píng)論 0 1
  • 3. JSX JSX是對(duì)JavaScript語言的一個(gè)擴(kuò)展語法, 用于生產(chǎn)React“元素”,建議在描述UI的時(shí)候...
    pixels閱讀 2,979評(píng)論 0 24
  • 以下內(nèi)容是我在學(xué)習(xí)和研究React時(shí),對(duì)React的特性、重點(diǎn)和注意事項(xiàng)的提取、精練和總結(jié),可以做為React特性...
    科研者閱讀 8,409評(píng)論 2 21

友情鏈接更多精彩內(nèi)容