React 學習之 Hello World
React 簡介
React是一個用于構建用戶界面的JavaScript庫，由Facebook開發(fā)并維護。React通過聲明式的方式來構建UI，使得代碼更易于理解和測試。React的核心概念包括組件（Component）和虛擬DOM（Virtual DOM）。
組件：在React中，UI被構建為組件的集合。組件是封裝了HTML、CSS和JavaScript代碼的可重用單元。它們可以是函數或類，接受輸入（稱為“props”）并返回React元素樹，這些元素樹描述了用戶界面在某一時刻的外觀。
虛擬DOM：React使用虛擬DOM來提高性能。當組件的狀態(tài)或屬性發(fā)生變化時，React會創(chuàng)建一個新的虛擬DOM樹，并將其與之前的樹進行比較。然后，React計算出差異并僅將這些差異應用到實際的DOM中，從而實現(xiàn)高效的UI更新。
React的生態(tài)系統(tǒng)非常豐富，包括React Native（用于構建原生移動應用的框架）、Redux（用于管理應用狀態(tài)的庫）以及許多其他工具和庫。這使得React成為構建復雜Web和移動應用的強大工具。
React的優(yōu)點包括：
組件化：通過將UI拆分為獨立的、可重用的組件，可以提高代碼的可維護性和可測試性。
聲明式：React使用聲明式語法來描述UI，這使得代碼更易于閱讀和理解。
高效性能：虛擬DOM和React的更新策略使得應用能夠高效地響應狀態(tài)變化。
靈活性：React可以與多種其他庫和工具配合使用，以滿足不同項目的需求。
然而，React也有其局限性，例如學習曲線較陡峭，需要一定的JavaScript基礎才能有效使用。此外，對于大型項目，可能需要額外的工具和庫來管理狀態(tài)和路由等復雜問題。
總之，React是一個強大的JavaScript庫，適用于構建各種規(guī)模和復雜度的Web和移動應用。通過掌握React的核心概念和生態(tài)系統(tǒng)中的工具，開發(fā)者可以創(chuàng)建出高效、可維護且用戶友好的界面。
React的核心概念是什么
React的核心概念主要包括以下幾個方面：文章來源：http://www.zghlxwxcb.cn/news/detail-844265.html
- 組件（Components）：
- React中構建用戶界面的基本單位是組件。組件可以看作是一個獨立的、可復用的代碼塊，它接受輸入（通常是以“props”形式傳遞的數據）并返回React元素樹，這些元素樹描述了用戶界面的一部分。
- 組件可以是函數組件或類組件。函數組件接受props并返回JSX元素；類組件則繼承自React.Component類，具有更多的生命周期方法和狀態(tài)管理功能。
- JSX（JavaScript XML）：
- JSX是React中用于描述用戶界面的一種語法擴展。它允許我們在JavaScript代碼中編寫類似HTML的結構，并在編譯時轉換成React元素。JSX使得組件的代碼更加直觀和易于理解。
- 虛擬DOM（Virtual DOM）：
- React使用虛擬DOM來提高應用的性能。當組件的狀態(tài)或屬性發(fā)生變化時，React會創(chuàng)建一個新的虛擬DOM樹，并與之前的虛擬DOM樹進行比較。通過比較這兩個樹，React能夠計算出最小的DOM操作來更新實際的DOM，從而實現(xiàn)高效的UI更新。
- 狀態(tài)（State）和屬性（Props）：
- 狀態(tài)是組件內部的數據，它決定了組件的渲染輸出。狀態(tài)是私有的，并且只能通過組件內部的方法（如setState）來更新。
- 屬性是父組件傳遞給子組件的數據。子組件通過props接收這些數據，并使用它們來渲染輸出。屬性是只讀的，子組件不能修改它們。
- 生命周期方法（Lifecycle Methods）：
- 類組件具有一系列的生命周期方法，這些方法在組件的不同階段（如掛載、更新、卸載）被調用。生命周期方法允許開發(fā)者在組件的不同階段執(zhí)行特定的邏輯，如數據獲取、副作用處理等。
- 鉤子（Hooks）：
- Hooks是React 16.8版本中引入的新特性，它們允許開發(fā)者在不編寫類的情況下使用state以及其他的React特性。通過使用鉤子，函數組件可以擁有與類組件相同的功能，同時保持代碼的簡潔和可維護性。
這些核心概念共同構成了React的基礎，使得開發(fā)者能夠高效地構建出復雜且響應式的用戶界面。通過掌握這些概念，開發(fā)者可以充分利用React的優(yōu)勢來創(chuàng)建出高質量的Web應用。文章來源地址http://www.zghlxwxcb.cn/news/detail-844265.html
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
// // 創(chuàng)建一個div
// const div = document.createElement('div'); // 創(chuàng)建一個DOM元素
// // 向div中添加內容
// div.innerText = '我是一個div';
// // 獲取頁面中的root節(jié)點
// const root = document.getElementById('root');
// // 將div添加到root節(jié)點中
// root.appendChild(div);
// 通過React向頁面中添加一個div
/*
React.createElement()
- 用來創(chuàng)建一個React元素
- 參數1：表示創(chuàng)建元素的類型，比如div、p、span等 元素名(組件名)
- 參數2：表示創(chuàng)建元素的屬性，比如className、id等 元素中的屬性
- 參數3：表示創(chuàng)建元素的文本內容 元素的子元素（內容）
- 返回值：表示創(chuàng)建的React元素
*/
const div = React.createElement('div', {}, '我是React創(chuàng)建的div'); // 創(chuàng)建一個 React 元素
// 獲取頁面中的root節(jié)點
const root = document.getElementById('root');
// 獲取根元素對應的React元素
// ReactDOM.createRoot()
// - 用來創(chuàng)建一個React根元素
// - createRoot 允許在瀏覽器的 DOM 節(jié)點中創(chuàng)建根節(jié)點以顯示 React 組件。
// - 參數1：表示創(chuàng)建的根元素對應的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 節(jié)點”）在 React 的根節(jié)點中渲染為 DOM 節(jié)點并顯示。
// https://zh-hans.react.dev/reference/react-dom/client/createRoot#root-render
react_root.render(div);
</script>
</body>
</html>
參考
- React 官網
- React 中文網
- React 中文文檔
到了這里，關于React 學習之 Hello World的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
