React 學習之 createElement

寻月隐君發表於2024-04-07
React

React 學習之 createElement

React 元素

在 React 中，元素是 React 應用的最小構建塊。
一個 React 元素是 React 物件的一個輕量級、靜態的表示。
它們被 React 用於知道螢幕上什麼應該被渲染，並在資料改變時保持 UI 的更新。

React 元素是不可變的：一旦建立，就不能更改它的子元素或屬性。
一個元素就像電影的單幀：它代表 UI 在某一時間點的樣子。

儘管 React 元素在技術上是一個物件，但它們並不是實際的 DOM 元素。
React 使用這些物件來構建 DOM，並在必要時更新它。
React 元素是 React 的抽象表示，而不是 DOM 的直接表示。

總的來說，React 元素確實可以被視為普通的 JavaScript 物件，但它們在 React 的工作流中扮演著特殊的角色，用於描述 UI 的結構和屬性。

React.createElement

用來建立一個React元素

引數：

  • 標籤名 元素的名稱（HTML標籤必須小寫）
  • 屬性 標籤中的屬性
    • 在設定事件時，屬性名需要修改為駝峰命名法 值為一個函式
    • 例如：onClick 需要修改為 onClick
    • Warning: Invalid DOM property class. Did you mean className? class -> className
  • 子元素 標籤中的子元素
    • 例如：
      這是一個div
      子元素為"這是一個div"
    • 子元素可以是字串、數字、React元素、陣列、布林值、null、undefined
  • 返回值：一個React元素
  • 注意點：
    • React 元素最終會透過虛擬DOM轉換為真實的DOM元素
    • React 元素是一個普通的JS物件

React.createElement 是 React 庫中的一個函式，用於在 JavaScript 中建立 React 元素。在 JSX 語法被引入之前，React.createElement 是建立 React 元件樹的主要方式。儘管現在 JSX 在 React 社群中非常流行，但理解 React.createElement 仍然很重要，因為它實際上是 JSX 在編譯時轉換為的東西。

React.createElement 函式接受三個引數：

型別 (type)：這通常是一個字串（表示一個 DOM 元素，如 'div' 或 'span'）或一個 React 元件類（或函式）。
配置物件 (config)：一個可選的物件，包含該元素的 props。
子元素 (children)：可以是任何有效的 React 子元素，可以是一個或多個。
示例：

const element = React.createElement(  
  'div',  
  { id: 'myDiv', className: 'myClass' },  
  'Hello, world!',  
  React.createElement('span', null, 'This is a span.')  
);

這個示例建立了一個 div 元素，它有一個 ID 和一個類名，以及兩個子元素：一個文字節點和一個 span 元素。

當你使用 JSX 時，上述程式碼可以寫為：

const element = (  
  <div id="myDiv" className="myClass">  
    Hello, world!  
    <span>This is a span.</span>  
  </div>  
);

儘管 JSX 提供了更簡潔、更易於理解的語法，但理解 React.createElement 仍然有助於你理解 React 的底層工作原理。

React createElement 示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React learning</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
  </head>

  <body>
    <button id="btn">我是一個按鈕</button>
    <div id="root"></div>

    <script>
      /*

        在 React 中，元素是 React 應用的最小構建塊。一個 React 元素是 React 物件的一個輕量級、靜態的表示。
        它們被 React 用於知道螢幕上什麼應該被渲染，並在資料改變時保持 UI 的更新。

        React 元素是不可變的：一旦建立，就不能更改它的子元素或屬性。一個元素就像電影的單幀：它代表 UI 在某一時間點的樣子。

        儘管 React 元素在技術上是一個物件，但它們並不是實際的 DOM 元素。
        React 使用這些物件來構建 DOM，並在必要時更新它。React 元素是 React 的抽象表示，而不是 DOM 的直接表示。

        總的來說，React 元素確實可以被視為普通的 JavaScript 物件，但它們在 React 的工作流中扮演著特殊的角色，用於描述 UI 的結構和屬性。
        
        React.createElement
            - 用來建立一個React元素
            - 引數：
                - 標籤名 元素的名稱（HTML標籤必須小寫）
                - 屬性 標籤中的屬性
                    - 在設定事件時，屬性名需要修改為駝峰命名法 值為一個函式
                    - 例如：onClick 需要修改為 onClick 
                    - Warning: Invalid DOM property `class`. Did you mean `className`? class屬性需要使用 className 設定
                - 子元素 元素的內容（子元素）
            - 返回值：一個React元素
            - 注意點：
                - React 元素最終會透過虛擬DOM轉換為真實的DOM元素
                - React 元素是一個普通的JS物件
                - React 元素是不可變的，一旦建立，就不能更改它的子元素或者屬性 React 元素一旦建立就無法修改，
                    如果想要修改，只能重新建立新的元素，即只能透過新建立的元素進行替換
        
        */
      // 建立一個React元素
      const button = React.createElement(
        "button",
        {
          id: "btn",
          type: "button",
          className: "hello",
          onClick: () => {
            alert(123);
          },
        },
        "點我一下"
      );

      // 建立一個div
      const div = React.createElement("div", {}, "這是一個div", button);

      // 獲取根元素
      const root = ReactDOM.createRoot(document.getElementById("root"));

      // 將React元素渲染到根元素中 將元素在根元素中顯示
      root.render(div);

      // 獲取按鈕物件
      const btn = document.getElementById("btn");
      btn.addEventListener("click", () => {
        // 點選按鈕後，修改div中button中的文字為 click me
        const button = React.createElement(
          "button",
          {
            id: "btn",
            type: "button",
            className: "hello",
            onClick: () => {
              alert(123);
            },
          },
          "click me"
        );

        // 建立一個div
        const div = React.createElement("div", {}, "這是一個div", button);

        // 修改React元素後，必須重新渲染React根元素
        // 當呼叫render渲染頁面時，React會自動比較兩次渲染的元素，只在真實DOM中更新發生變化的部分，沒發生變化的保持不變
        // 這樣可以提高頁面的效能
        // 重新渲染React根元素
        root.render(div);
      });
    </script>
  </body>
</html>

參考

  • React 官方中文文件 https://react.docschina.org/

相關文章