React-[入門篇]- JSX聲明式語法


我們可以了解元件是組成使用者UI介面的一部分:

因此,每一個元件都有自己的資料/邏輯/外觀:

在上面單一元件的圖片中,專注在紅色區塊的"appearance",這就跟JSX有很大的關係!

什麼是JSX?

JSX是描述元件外觀和工作模式的聲明性語法:

  • 元件必須返回一個JSX的區塊
  • JSX是JS語法的擴展,允許我們將JavaScript、CSS和React元件嵌入HTML中(瀏覽器不懂JSX,會需要透過babel工具來編譯)
  • 每個JSX元素都轉換為一個React.createElement函式調用
  • 我們可以在React中不使用JSX

    (圖片取自:udemy- Jonas-The Ultimate React Course)

但如上圖所示,我們當然可以不寫JSX,但是仔細看程式碼,如果全部都調用React.createElement函式,真的很不好閱讀,通常我們寫元件都會return JSX 區塊,透過babel編譯


(圖片取自:udemy- Jonas-The Ultimate React Course)

在React中,我們會利用JSX聲明式語法來告訴React我們想要在螢幕上看到什麼

補充:

Imperative (命令式):

  • Imperative編程風格關注的是如何完成一個任務,通過指定具體的指令和步驟來達到目標。
  • 它需要明確地指定每個操作的執行順序,通常包括控制結構(如if語句、for循環等)和改變狀態的操作。
  • 典型的示例是使用命令式風格編寫的傳統的JavaScript或其他編程語言。
    function findElement(arr, target) {
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] === target) {
        return i;
      }
    }
    return -1;
    }
    

Declarative (聲明式):

  • Declarative編程風格關注的是描述期望的結果,而不是指定具體的執行步驟。
  • 它更加抽象,通常使用高級函數、配置文件或特定語法來定義所需的操作。
  • Declarative編程風格使得代碼更容易閱讀、理解和維護,因為它隱藏了實現細節,只需要關心目標。
  • React和SQL等領域中的某些語言和庫,以及許多界面和數據處理框架,都使用了聲明式編程風格
    function findElement(arr, target) {
    return arr.indexOf(target);
    }
    

命令式版本需要明確地定義循環和條件,而聲明式版本只需一行代碼就能達到相同的目標,這是一個簡單的比較,但它展示了這兩種風格之間的差異。聲明式編程風格通常更具可讀性和維護性,因為它專注於"做什麼"而不是"怎麼做"

#React入門 #JSX #declarative







你可能感興趣的文章

第 19 期 Python 程式設計入門-作業任務7

第 19 期 Python 程式設計入門-作業任務7

MTR04_0629

MTR04_0629

CSS保健室|background-blend-mode

CSS保健室|background-blend-mode






留言討論