<fieldset id="goswk"></fieldset>

<del id="goswk"></del>

react本質：JSX如何轉化為javascript

ChanceWong 發布于2019-08-26 13:44 / 1392人閱讀

摘要：中基本都使用來開發，但其實是的一種語法糖。但是我們必須知道，本質上就是在編譯的時候，會由將轉化為。比如生成了比如生成了解的本質，只需要記住本質就是附錄提供的一個在線轉換為的地址

react中基本都使用JSX來開發，但JSX其實是javascript的一種語法糖。

什么是語法糖？

語法糖就是提供了一種全新的方式書寫代碼，但是其實現原理與之前的寫法相同。
語法糖可以說是廣泛存在于各種計算機代碼中，包括C語言中的a[i]其實就是*a+i的語法糖。而今天對于我們來說，a[i]其實已經很普遍和常用了，所以也沒有人提這是語法糖這回事了。因為終極來說，所有語言都是匯編語言的語法糖：）

簡單說，JSX是一種更簡便書寫javascript的方式
由于DOM結構被我們寫到了javascript文件里，由javascript來生成DOM結構
如果一直使用javascript來寫DOM結構，那么render函數里就是一堆React.createElement
這樣既不美觀也不實用。

但是我們必須知道，JSX本質上就是javascript
在編譯的時候，會由babel將JSX轉化為javascript。

比如


    222
      333

生成了

"use strict";

React.createElement("div", {
  className: "aaa"
}, React.createElement("span", null, "222"), React.createElement("span", null, "333"));

比如

function Comp(){
    return test
}

222

生成

"use strict";

function Comp() {
  return React.createElement("div", {
    className: "test"
  }, "test");
}

React.createElement(Comp, {
  className: "test2"
}, "222");

了解JSX的本質，只需要記住：JSX本質就是javascript

附錄

babel提供的一個在線轉換JSX為javascript的地址
https://babeljs.io/repl/

GPU云服務器云服務器轉化為對象聲明轉化為引用圖片轉化為文字 js文本轉化為語音

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/109432.html

基于 JSX 的動態數據綁定

摘要：基于的動態數據綁定歸屬于筆者的與前端工程化實踐中的，本文中設計的引用資料參考學習與實踐資料索引，如果有對基礎語法尚存疑惑的可以參閱現代開發語法基礎與實踐技巧。基于 JSX 的動態數據綁定歸屬于筆者的 React 與前端工程化實踐中的，本文中設計的引用資料參考 React 學習與實踐資料索引，如果有對 JavaScript 基礎語法尚存疑惑的可以參閱現代 JavaScript 開發：語...

Sleepy 2019-08-20 18:32 評論0 收藏0
精益 React 學習指南（Lean React）- 1.2 JSX 語法

摘要：需要提醒讀者的是，的很多例子都是通過來寫的，但這并不是語法，后面我們會有單獨的一小節講解的基本語法，不過目前為止我們先將跟多精力放在上。書籍完整目錄 1.2 JSX 語法 showImg(https://segmentfault.com/img/bVvKLR); 官方文檔 https://facebook.github.io/react/docs/jsx-in-depth.html ...

moven_j 2019-08-02 15:54 評論0 收藏0
虛擬DOM內部是如何工作的

摘要：但是它與里大部分的概率是保持一致的。但是如何將轉換成函數的調用呢就是干這件事情的。好了，讓我們看看是如何工作的。下面的圖片在流程圖中高亮了一個組件是如何工作的最后希望這篇文章能幫助你理解是如何工作的至少在中英文原文鏈接 Virtual DOM很神奇，同時也比較復雜，難以理解。react,preact和相似的js庫都使用了virtual dom。然而，我找不到任何好的文章或者文檔，可以...

hiYoHoo 2019-08-21 11:46 評論0 收藏0
React 單文件組件的解決方案 Omil 和 Omi Snippets

摘要：屬性我們還可以使用來書寫樣式，它會自動幫我們編譯為格式內容語法高亮建議使用配合該擴展支持語法高亮擴展開發項目，當然你可以把文件當作對待。 Omil 是什么？ Omil是一個 webpack 的 loader，它允許你以一種名為單文件組件(SFCs)的格式撰寫 Omi 組件： ${this.data.title} export default class { test(){...

lowett 2019-08-26 10:10 評論0 收藏0