React 學習之 Hello World React 簡介 React是一個用於構建用戶界面的JavaScript庫，由Facebook開發並維護。React通過聲明式的方式來構建UI，使得代碼更易於理解和測試。React的核心概念包括組件（Component）和虛擬DOM（Virtual DOM ...
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的核心概念主要包括以下幾個方面：
- 組件（Components）：
- React中構建用戶界面的基本單位是組件。組件可以看作是一個獨立的、可復用的代碼塊，它接受輸入（通常是以“props”形式傳遞的數據）並返回React元素樹，這些元素樹描述了用戶界面的一部分。
- 組件可以是函數組件或類組件。函數組件接受props並返回JSX元素；類組件則繼承自React.Component類，具有更多的生命周期方法和狀態管理功能。
- JSX（JavaScript XML）：
- JSX是React中用於描述用戶界面的一種語法擴展。它允許我們在JavaScript代碼中編寫類似HTML的結構，併在編譯時轉換成React元素。JSX使得組件的代碼更加直觀和易於理解。
- 虛擬DOM（Virtual DOM）：
- React使用虛擬DOM來提高應用的性能。當組件的狀態或屬性發生變化時，React會創建一個新的虛擬DOM樹，並與之前的虛擬DOM樹進行比較。通過比較這兩個樹，React能夠計算出最小的DOM操作來更新實際的DOM，從而實現高效的UI更新。
- 狀態（State）和屬性（Props）：
- 狀態是組件內部的數據，它決定了組件的渲染輸出。狀態是私有的，並且只能通過組件內部的方法（如setState）來更新。
- 屬性是父組件傳遞給子組件的數據。子組件通過props接收這些數據，並使用它們來渲染輸出。屬性是只讀的，子組件不能修改它們。
- 生命周期方法（Lifecycle Methods）：
- 類組件具有一系列的生命周期方法，這些方法在組件的不同階段（如掛載、更新、卸載）被調用。生命周期方法允許開發者在組件的不同階段執行特定的邏輯，如數據獲取、副作用處理等。
- 鉤子（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/[email protected]/umd/react.development.js
https://unpkg.com/[email protected]/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>
參考
本文來自博客園，作者：尋月隱君，轉載請註明原文鏈接：https://www.cnblogs.com/QiaoPengjun/p/18118157
