React 學習之 Hello World

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

React 學習之 Hello World

React 簡介

React是一個用於構建使用者介面的JavaScript庫，由Facebook開發並維護。React透過宣告式的方式來構建UI，使得程式碼更易於理解和測試。React的核心概念包括元件（Component）和虛擬DOM（Virtual DOM）。

元件：在React中，UI被構建為元件的集合。元件是封裝了HTML、CSS和JavaScript程式碼的可重用單元。它們可以是函式或類，接受輸入（稱為“props”）並返回React元素樹，這些元素樹描述了使用者介面在某一時刻的外觀。

虛擬DOM：React使用虛擬DOM來提高效能。當元件的狀態或屬性發生變化時，React會建立一個新的虛擬DOM樹，並將其與之前的樹進行比較。然後，React計算出差異並僅將這些差異應用到實際的DOM中，從而實現高效的UI更新。

React的生態系統非常豐富，包括React Native（用於構建原生移動應用的框架）、Redux（用於管理應用狀態的庫）以及許多其他工具和庫。這使得React成為構建複雜Web和移動應用的強大工具。

React的優點包括：

元件化：透過將UI拆分為獨立的、可重用的元件，可以提高程式碼的可維護性和可測試性。
宣告式：React使用宣告式語法來描述UI，這使得程式碼更易於閱讀和理解。
高效效能：虛擬DOM和React的更新策略使得應用能夠高效地響應狀態變化。
靈活性：React可以與多種其他庫和工具配合使用，以滿足不同專案的需求。
然而，React也有其侷限性，例如學習曲線較陡峭，需要一定的JavaScript基礎才能有效使用。此外，對於大型專案，可能需要額外的工具和庫來管理狀態和路由等複雜問題。

總之，React是一個強大的JavaScript庫，適用於構建各種規模和複雜度的Web和移動應用。透過掌握React的核心概念和生態系統中的工具，開發者可以建立出高效、可維護且使用者友好的介面。

React的核心概念是什麼

React的核心概念主要包括以下幾個方面：

  1. 元件（Components）：
    • React中構建使用者介面的基本單位是元件。元件可以看作是一個獨立的、可複用的程式碼塊，它接受輸入（通常是以“props”形式傳遞的資料）並返回React元素樹，這些元素樹描述了使用者介面的一部分。
    • 元件可以是函式元件或類元件。函式元件接受props並返回JSX元素；類元件則繼承自React.Component類，具有更多的生命週期方法和狀態管理功能。
  2. JSX（JavaScript XML）：
    • JSX是React中用於描述使用者介面的一種語法擴充套件。它允許我們在JavaScript程式碼中編寫類似HTML的結構，並在編譯時轉換成React元素。JSX使得元件的程式碼更加直觀和易於理解。
  3. 虛擬DOM（Virtual DOM）：
    • React使用虛擬DOM來提高應用的效能。當元件的狀態或屬性發生變化時，React會建立一個新的虛擬DOM樹，並與之前的虛擬DOM樹進行比較。透過比較這兩個樹，React能夠計算出最小的DOM操作來更新實際的DOM，從而實現高效的UI更新。
  4. 狀態（State）和屬性（Props）：
    • 狀態是元件內部的資料，它決定了元件的渲染輸出。狀態是私有的，並且只能透過元件內部的方法（如setState）來更新。
    • 屬性是父元件傳遞給子元件的資料。子元件透過props接收這些資料，並使用它們來渲染輸出。屬性是隻讀的，子元件不能修改它們。
  5. 生命週期方法（Lifecycle Methods）：
    • 類元件具有一系列的生命週期方法，這些方法在元件的不同階段（如掛載、更新、解除安裝）被呼叫。生命週期方法允許開發者在元件的不同階段執行特定的邏輯，如資料獲取、副作用處理等。
  6. 鉤子（Hooks）：
    • Hooks是React 16.8版本中引入的新特性，它們允許開發者在不編寫類的情況下使用state以及其他的React特性。透過使用鉤子，函式元件可以擁有與類元件相同的功能，同時保持程式碼的簡潔和可維護性。

這些核心概念共同構成了React的基礎，使得開發者能夠高效地構建出複雜且響應式的使用者介面。透過掌握這些概念，開發者可以充分利用React的優勢來建立出高質量的Web應用。

React 示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>

    <!-- 引入React 的核心庫 -->
    <script src="script/react.development.js"></script>
    <!-- 引入React 的DOM庫 -->
    <script src="script/react-dom.development.js"></script>
</head>

<body>
    <div id="root"></div>
    <script>
        /*
        https://unpkg.com/react@18.2.0/umd/react.development.js
        https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js
        */
        // React 就是用來代替DOM的

        // // 透過DOM向頁面中新增一個div
        // // 建立一個div
        // const div = document.createElement('div'); // 建立一個DOM元素
        // // 向div中新增內容
        // div.innerText = '我是一個div';
        // // 獲取頁面中的root節點
        // const root = document.getElementById('root');
        // // 將div新增到root節點中
        // root.appendChild(div);

        // 透過React向頁面中新增一個div
        /*
        
        React.createElement()
            - 用來建立一個React元素
            - 引數1：表示建立元素的型別，比如div、p、span等 元素名(元件名)
            - 引數2：表示建立元素的屬性，比如className、id等 元素中的屬性
            - 引數3：表示建立元素的文字內容 元素的子元素（內容）
            - 返回值：表示建立的React元素
        */
        const div = React.createElement('div', {}, '我是React建立的div'); // 建立一個 React 元素
        // 獲取頁面中的root節點
        const root = document.getElementById('root');
        // 獲取根元素對應的React元素
        // ReactDOM.createRoot()
        // - 用來建立一個React根元素
        // - createRoot 允許在瀏覽器的 DOM 節點中建立根節點以顯示 React 元件。
        // - 引數1：表示建立的根元素對應的DOM元素
        // - createRoot 返回一個帶有兩個方法的的物件，這兩個方法是：render 和 unmount。
        // https://zh-hans.react.dev/reference/react-dom/client/createRoot
        const react_root = ReactDOM.createRoot(root);
        // 將div渲染到根元素中
        // root.render(reactNode) 
        // 呼叫 root.render 以將一段 JSX（“React 節點”）在 React 的根節點中渲染為 DOM 節點並顯示。
        // https://zh-hans.react.dev/reference/react-dom/client/createRoot#root-render
        react_root.render(div);

    </script>
</body>

</html>

參考

  • React 官網
  • React 中文網
  • React 中文文件

相關文章