JSX、TSX 整體理解

来源:https://www.cnblogs.com/hubert-style/archive/2023/11/18/17839535.html
-Advertisement-
Play Games

可以少去理解一些不必要的概念,而多去思考為什麼會有這樣的東西,它解決了什麼問題,或者它的運行機制是什麼? JS JavaScript 是互聯網上最流行的腳本語言,這門語言可用於 HTML 和 web,更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。 https://www.runoo ...


可以少去理解一些不必要的概念,而多去思考為什麼會有這樣的東西,它解決了什麼問題,或者它的運行機制是什麼?

JS

JavaScript 是互聯網上最流行的腳本語言,這門語言可用於 HTML 和 web,更可廣泛用於伺服器、PC、筆記本電腦、平板電腦和智能手機等設備。

https://www.runoob.com/js/js-intro.html

JSX

1. 什麼是 JSX

下麵我們看一段代碼:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

JSX 是一種 JavaScript 的語法擴展,運用於 React 架構中,可以讓你在 JavaScript 文件中書寫類似 HTML 的標簽。再通過翻譯器轉換到純 JavaScript 後由瀏覽器執行,在實際開發中,JSX 在產品打包階段都已經編譯成純 Javascript,不會帶來任何副作用,反而會讓代碼更加直觀並易於維護。

JSX 允許你在 JavaScript 中編寫類似 HTML 的標簽,從而使渲染的邏輯和內容可以寫在一起。有時候,你可能想要在標簽中添加一些 JavaScript 邏輯或者引用動態的屬性。這種情況下,你可以在 JSX 的大括弧內來編寫 JavaScript。

元素是構成 React 應用的最小單位,JSX 就是用來聲明 React 當中的元素,React 使用 JSX 來描述用戶界面。

可以通過以下兩個方面瞭解 JSX:

  • 擴展混合:JSX 是一種 JS 擴展的表達式,混合使用 Javascript 和類 html 來編寫代碼。
  • 混合支持:支持樣式、邏輯表達式和事件的統一混合實現。

2. JSX 編譯之 Babel 編譯器

JSX 編譯過程由 Babel 編譯器實現。所謂的 JSX 其實就是 Javascript 對象加 XML,所以使用 React 和 JSX 的時候一定要經過編譯的過程:Bable 將 JSX 編譯成 JavaScript 對象,然後通過 ReactDom.render() 構造 DOM 元素保持隨時頁面更新。

// JSX 代碼
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<div>Babel 編譯器</div>);

// JSX 編譯後
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(React.createElement("div",{id: "babel", className: "babel"}, "Babel 編譯器1"))

3. 為什麼使用 JSX?

React 認為渲染邏輯本質上與其他 UI 邏輯內在耦合,比如,在 UI 中需要綁定處理事件、在某些時刻狀態發生變化時需要通知到 UI,以及需要在 UI 中展示準備好的數據。

React 並沒有採用將標記與邏輯分離到不同文件這種人為的分離方式,而是通過將二者共同存放在稱之為“組件”的鬆散耦合單元之中,來實現關註點分離。我們將在後面章節中深入學習組件。如果你還沒有適應在 JS 中使用標記語言,這個會議討論應該可以說服你。

React 不強制要求使用 JSX,但是大多數人發現,在 JavaScript 代碼中將 JSX 和 UI 放在一起時,會在視覺上有輔助作用。它還可以使 React 顯示更多有用的錯誤和警告消息。

4. JSX 官方文檔

官網:https://zh-hans.react.dev/learn/writing-markup-with-jsx

TypeScript

TypeScript 是 JavaScript 的一個超集,支持 ECMAScript 6 標準。TypeScript 設計目標是開發大型應用,它可以編譯成純 JavaScript,編譯出來的 JavaScript 可以運行在任何瀏覽器上。

TypeScript 特點:

1)TypeScript 的定位是靜態類型語言,在寫代碼(編譯)階段就能檢查錯誤,而非運行階段(動態語言邊解析邊執行)。

2)類型系統是最好的文檔,增加了代碼的可讀性和可維護性。

3)強類型、類型推斷。

4)有一定的學習成本,需要理解介面 (Interfaces)、泛型 (Generics)、類 (Classes)等。

5)介面:介面是一系列抽象方法的聲明,是一些方法特征的集合,這些方法都應該是抽象的,需要由具體的類去實現,然後第三方就可以通過這組抽象方法調用,讓具體的類執行具體的方法。即介面也是一種規範,用來描述、約束對象、函數、類的形狀的,即規範類等裡面必須實現哪些方法。

6)TS 最後也是編譯為 JS,運行在任何瀏覽器上。

語法學習:

https://www.runoob.com/typescript/ts-tutorial.html

TSX

TSX 表明是 Typescript 文件並使用了 JSX 語法,JSX 語法參考上面提到的 JSX 詳解。最後提供一個別人寫的文章幫助理解。

https://zhuanlan.zhihu.com/p/435385184


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 引言 上一篇中 WPF 重寫DataGrid樣式,因新產品UI需要,重寫了一下微軟 WPF 原生的 DataGrid 的樣式,包含如下內容: 基礎設置,一些基本背景色,字體顏色等。 滾動條樣式。 實現圓角表格,重寫表格的一些基礎樣式,例如 CellStyle ,RowStyle,RowHeaderS ...
  • 什麼是主構造函數 把參數添加到class與record的類聲明中就是主構造函數。例如 class Person(string name) { private string _name = name; } 這種寫法與以下代碼寫法一樣 class Person { private string _nam ...
  • 背景 工作需要對接內部的日誌中台,對日誌列印有固定的格式要求,為了使Nginx的access日誌也能被採集,需要對日誌格式進行自定義,要求日誌格式為: yyyy-MM-dd HH:mm:ss.SSS LOG_LEVEL LOG_MSG > 時間格式+列印級別+業務日誌 如: 23-11-18 17: ...
  • 作為小白的我這幾天買了個香橙派3b 經過這幾天的折騰,終於進入了ssh終端(大喜 我買的是官店的8G,創客價299,連著一起買了一個閃迪的64gTF卡 簡單總結一下搭建過程: 物理準備:一臺電腦,香橙派與一張16G以上的tf卡,tf讀卡器(一般會送)一根網線,type-c線 第一步:燒錄ubuntu ...
  • CycloneIII內部資源概述 目錄CycloneIII內部資源概述Logic Elements and Logic Array Blocks(邏輯元件和邏輯陣列塊)LELABLAB InterconnectsMemory Blocks(記憶體塊)Memory modeClocking modeEm ...
  • DM8壓縮表 0、結論 行表(普通表)不支持壓縮。但是語法支持。建表之後,查詢到的占用空間會比普通表小一半。 經過測試,裝10萬數據(兩個欄位),壓縮的、未壓縮,占用空間一樣大。 列表(huge表)支持壓縮。可以壓縮表(就是壓縮所有列),也可以選擇壓縮列。但是建表的時候就要設置,否則建好表之後修改不 ...
  • 本文介紹MySQL和PostgreSQL的一些特性對比,讓大家瞭解二者的優劣,更好的做出選擇。當前國內的現狀,互聯網公司使用MySQL的較多,PostgreSQL的使用比例反而不高,但相信看到PG的新特性後,你會愛上她。當然MySQL作為最流行的資料庫,依然會吸引大部分人的眼球。 PostgreSQ ...
  • 原文:Android Material組件庫(日期選擇和時間選擇器)基本使用 - Stars-One的雜貨小窩 簡單的封裝下Material組件里的日期選擇器和時間選擇器的使用方法 效果 代碼 需要添加Material組件庫的依賴(不過後面新版本Android Studio創建的新項目都會有此依賴了 ...
一周排行
    -Advertisement-
    Play Games
  • 當使用Autofac處理一個介面有多個實現的情況時,通常會使用鍵(key)進行區分或者通過IIndex索引註入,也可以通過IEnumerable集合獲取所有實例,以下是一個具體的例子,演示如何在Autofac中註冊多個實現,並通過構造函數註入獲取指定實現。 首先,確保你已經安裝了Autofac Nu ...
  • 本篇將分享Prometheus+Grafana的監控平臺搭建,並監控之前文章所搭建的主機&服務,分享日常使用的一些使用經驗本篇將配置常用服務的監控與面板配置:包括 MySQL,MongoDB,CLickHouse,Redis,RabbitMQ,Linux,Windows,Nginx,站點訪問監控,已... ...
  • 使用Aspirate可以將Aspire程式部署到Kubernetes 集群 工具安裝 dotnet tool install -g aspirate --prerelease 註意:Aspirate 正在開發中,該軟體包將作為預覽版進行版本控制,--prelease 選項將獲得最新的預覽版。 容器註 ...
  • 前言 本文要說的這種開發模式,這種模式並不是只有blazor支持,js中有一樣的方案next.js nuxt.js;blazor還有很多其它內容,本文近關註漸進式開發模式。 是的,前後端是主流,不過以下情況也許前後端分離並不是最好的選擇: 小公司,人員不多,利潤不高,創業階段能省則省 個人開發者,接 ...
  • 在.NET中,Microsoft.Extensions.Logging是一個靈活的日誌庫,它允許你將日誌信息記錄到各種不同的目標,包括資料庫。在這個示例中,我將詳細介紹如何使用Microsoft.Extensions.Logging將日誌保存到MySQL資料庫。我們將使用Entity Framewo ...
  • chatgpt介面開發筆記3: 語音識別介面 1.文本轉語音 1、瞭解介面參數 介面地址: POST https://api.openai.com/v1/audio/speech 下麵是介面文檔描述內容: 參數: { "model": "tts-1", "input": "你好,我是饒坤,我是ter ...
  • 前面兩篇文章主要是介紹瞭如何解決高併發情況下資源爭奪的問題。但是現實的應用場景中除了要解決資源爭奪問題,高併發的情況還需要解決更多問題,比如快速處理業務數據等, 本篇文章簡要羅列一下與之相關的更多技術細節。 1、非同步編程:使用async和await關鍵字進行非同步編程,這可以避免阻塞線程,提高程式的響 ...
  • 大家好,我是棧長。 Nacos 2.3.0 前幾天正式發佈了,新增了不少實用性的新功能,真是史上最強版本。 Nacos 2.3.0 還真是一個比較重要的大版本,因為它涉及了太多重大更新,今天棧長給大家來解讀下。 Nacos 先掃個盲: Nacos 一個用於構建雲原生應用的動態服務發現、配置管理和服務 ...
  • IDEA的遠程開發功能,可以將本地的編譯、構建、調試、運行等工作都放在遠程伺服器上執行,而本地僅運行客戶端軟體進行常規的開發操作即可,舊版本IDEA目前不支持該功能.,本例使用的是IDEA2023.2.5版本 下麵介紹如何在IDEA中設置遠程連接伺服器開發環境並結合Cpolar內網穿透工具實現無公網 ...
  • 本文解釋為啥會有響應式編程,為什麼它在開發者中不太受歡迎,以及引入 Java 虛擬線程後它可能最終會消失。 命令式風格編程一直深受開發者喜愛,如 if-then-else、while 迴圈、函數和代碼塊等結構使代碼易理解、調試,異常易追蹤。然而,像所有好的東西一樣,通常也有問題。這種編程風格導致線程 ...