React 揭秘：從新手到高手的進階之路

React：前端開發新寵?

React 初相識?

什么是 React?

React 的核心特性?

1.組件化開發

2.虛擬 DOM 與 Diff 算法

單向數據流

搭建 React 開發環境

環境準備?

創建 React 項目

項目結構解析

React 基礎語法與核心概念

JSX 語法?

基本語法規則?

屬性與表達式?

注意事項?

React 組件

函數式組件

類組件

組件通信?

狀態管理（State）?

狀態的定義與初始化?

狀態更新?

函數式組件中的狀態（Hooks）?

React：前端開發新寵?

在當今的前端開發領域，React 已然成為了一顆耀眼的明星，備受開發者們的青睞。它由 Facebook 開發并開源，自誕生以來，便以其獨特的理念和強大的功能，迅速改變了前端開發的格局，成為構建現代用戶界面的首選工具之一。無論是大型企業級應用，還是小型創業項目，React 都展現出了卓越的適應性和強大的生命力。那么，React 究竟有何魅力，能讓眾多開發者為之傾心呢？接下來，就讓我們一同深入探索 React 的世界，揭開它神秘的面紗。

React 初相識?

什么是 React?

React 是一個用于構建用戶界面的 JavaScript 庫，它采用了一種聲明式的編程風格，讓開發者可以用簡潔直觀的方式描述用戶界面的結構和行為。React 的核心思想是將用戶界面拆分成一個個獨立的、可復用的組件，每個組件都有自己的狀態和邏輯，通過組合這些組件來構建復雜的應用程序。它由 Facebook 開發并開源，如今已經成為了前端開發領域中最受歡迎和廣泛使用的庫之一。?

React 的核心特性?

1.組件化開發

在 React 中，組件是構建用戶界面的基本單元，就像是搭建積木一樣，我們可以將一個個小的組件組合起來，構建出復雜的頁面。以一個簡單的按鈕組件為例，我們可以這樣定義：

import React from 'react';// 定義一個Button組件
const Button = (props) => {return <button onClick={props.onClick}>{props.label}</button>;
};export default Button;

在上述代碼中，我們定義了一個名為 Button 的函數組件，它接受兩個屬性：onClick和label。onClick是按鈕的點擊事件處理函數，label是按鈕上顯示的文本。通過這種方式，我們將按鈕的功能和樣式封裝在了一個組件中，在其他地方使用這個按鈕時，只需要傳入相應的屬性即可。

組件化開發的優勢在于：?

1.代碼復用：減少重復代碼，提高開發效率。比如，我們在多個頁面中都需要使用一個按鈕，只需要定義一次Button組件，然后在不同的頁面中引入即可。?

2.易于維護：每個組件都有自己獨立的邏輯和狀態，當某個組件出現問題時，我們可以快速定位和修復，而不會影響到其他組件。?

3.可擴展性：隨著應用程序的不斷發展，我們可以方便地添加新的組件，或者對現有組件進行修改和擴展。

2.虛擬 DOM 與 Diff 算法

虛擬 DOM（Virtual DOM）是 React 的另一個重要特性。在傳統的前端開發中，當數據發生變化時，我們需要直接操作真實的 DOM，這會導致瀏覽器頻繁地重新渲染頁面，從而影響性能。而 React 引入了虛擬 DOM 的概念，它在內存中維護一個與真實 DOM 對應的虛擬樹，當數據發生變化時，React 會先計算虛擬 DOM 的差異，然后再將這些差異一次性更新到真實 DOM 上，從而大大減少了對真實 DOM 的直接操作，提高了應用的性能。?

Diff 算法是 React 用于計算虛擬 DOM 差異的算法。它的核心思想是通過對比新舊虛擬 DOM 樹，找出最小的變化集，然后只更新這些變化的部分。下面是一個簡單的例子，展示了 Diff 算法的工作原理：

import React, { useState } from'react';const List = () => {const [items, setItems] = useState([1, 2, 3]);const addItem = () => {setItems([...items, items.length + 1]);};return (<div><ul>{items.map(item => (<li key={item}>{item}</li>))}</ul><button onClick={addItem}>添加項目</button></div>);
};export default List;

在上述代碼中，我們定義了一個List組件，它包含一個列表和一個按鈕。當點擊按鈕時，會向列表中添加一個新的項目。在這個過程中，React 會使用 Diff 算法來計算虛擬 DOM 的差異，只更新新增的列表項，而不會重新渲染整個列表，從而提高了頁面的渲染效率。

單向數據流

單向數據流是 React 的數據管理方式。在 React 中，數據從父組件流向子組件，子組件只能接收父組件傳遞過來的數據，而不能直接修改這些數據。如果子組件需要修改數據，需要通過回調函數通知父組件，由父組件來更新數據，然后再將新的數據傳遞給子組件。這種數據流動方式使得數據的流向更加清晰，易于調試和維護。?

以下是一個父子組件數據傳遞的示例：

import React, { useState } from'react';// 子組件
const Child = ({ count, increment }) => {return (<div><p>計數: {count}</p><button onClick={increment}>增加計數</button></div>);
};// 父組件
const Parent = () => {const [count, setCount] = useState(0);const incrementCount = () => {setCount(count + 1);};return (<div><Child count={count} increment={incrementCount} /></div>);
};export default Parent;

在上述代碼中，Parent組件通過count和incrementCount兩個屬性將數據和回調函數傳遞給Child組件。Child組件可以通過count屬性讀取數據，通過increment回調函數通知父組件更新數據。這種單向數據流的設計使得組件之間的依賴關系更加明確，降低了組件之間的耦合度。

搭建 React 開發環境

環境準備?

在開始 React 開發之前，我們需要確保開發環境中安裝了 Node.js 和 npm（Node Package Manager）。Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行時，它允許我們在服務器端運行 JavaScript 代碼。npm 是 Node.js 的包管理器，用于安裝和管理項目所需的依賴包。?

你可以通過以下步驟安裝 Node.js 和 npm：?

1.下載安裝包：訪問 Node.js 官方網站（Node.js — Run JavaScript Everywhere），根據你的操作系統下載對應的安裝包。?

2.安裝 Node.js：運行下載的安裝包，按照安裝向導的提示完成安裝。在安裝過程中，npm 會自動被安裝。?

3.驗證安裝：打開命令行工具，輸入node -v和npm -v，如果顯示出版本號，則說明安裝成功。例如：

$ node -v
v18.12.1
$ npm -v
8.19.2

Node.js 和 npm 對于 React 開發至關重要。Node.js 提供了運行 React 應用所需的 JavaScript 環境，而 npm 則用于安裝 React 及其相關的依賴包，如 React Router、Redux 等。通過 npm，我們可以輕松地管理項目的依賴關系，確保項目在不同環境中能夠穩定運行。

創建 React 項目

為了快速創建一個 React 項目，我們可以使用 Create React App，它是一個官方提供的腳手架工具，用于快速搭建 React 應用的基礎架構。?

使用 Create React App 創建新項目的步驟如下：?

1.打開命令行工具：在你希望創建項目的目錄下，打開命令行工具（如 Windows 下的命令提示符或 PowerShell，Mac 下的終端）。?

2.運行創建項目命令：輸入以下命令來創建一個名為my - react - app的項目（你可以將my - react - app替換為你想要的項目名稱）：
npx create-react-app my-react-app
npx是 npm 5.2 及以上版本自帶的命令，用于運行 npm 包中的可執行文件。這里，它會自動下載并運行create - react - app，創建一個新的 React 項目。?

3. 等待項目創建完成：命令執行后，create - react - app會自動下載并安裝項目所需的依賴包，這個過程可能需要一些時間，具體取決于你的網絡速度。?

4. 進入項目目錄：項目創建完成后，進入項目目錄：
cd my-react-app
5.啟動項目：在項目目錄下，運行以下命令啟動開發服務器：
npm start
執行npm start后，開發服務器會啟動，并自動打開瀏覽器，訪問http://localhost:3000，你將看到一個默認的 React 應用界面，這表明你的 React 項目已經成功創建并運行。

項目結構解析

當我們使用 Create React App 創建一個 React 項目后，項目的目錄結構如下：

my-react-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

下面我們來詳細解釋各文件和文件夾的作用：?

node_modules：該目錄包含了項目的所有依賴包，由 npm 自動管理。在項目中，我們一般不需要手動修改這個目錄。?

public：該目錄存放靜態資源，如 HTML 文件、圖標等。其中，index.html是 React 應用的入口 HTML 文件，它提供了一個基本的 HTML 結構，React 應用最終會被渲染到這個文件中的root節點上。favicon.ico是網站的圖標，manifest.json用于配置漸進式 Web 應用（PWA）的相關信息，robots.txt用于控制搜索引擎爬蟲的行為。?

src：這是我們開發的主要目錄，存放所有的 React 組件、樣式和其他資源。其中，index.js是項目的入口文件，它負責渲染 React 應用的根組件到index.html中的root節點上。App.js是應用的主要組件，通常包含應用的主要邏輯和布局。App.css用于定義App.js組件的樣式。index.css是全局樣式文件。App.test.js用于編寫App.js組件的測試用例，reportWebVitals.js用于報告應用的性能指標，setupTests.js用于配置測試環境。?

.gitignore：該文件用于指定哪些文件和目錄不需要被 Git 版本控制系統追蹤，例如node_modules目錄通常會被忽略，以避免將龐大的依賴包上傳到版本庫中。?

package.json：這是項目的配置文件，包含了項目的元數據、依賴包信息、腳本命令等。例如，我們可以在scripts字段中定義各種腳本命令，如start用于啟動開發服務器，build用于打包生產環境代碼等。dependencies字段列出了項目運行時所依賴的包，devDependencies字段列出了項目開發時所依賴的包。?

package - lock.json：該文件用于鎖定依賴包的版本，確保在不同環境中安裝的依賴包版本一致，避免因版本差異導致的兼容性問題。?

README.md：這是項目的說明文檔，用于記錄項目的基本信息、使用方法、安裝步驟等，方便其他開發者了解和使用項目。

React 基礎語法與核心概念

JSX 語法?

基本語法規則?

JSX（JavaScript XML）是一種 JavaScript 的語法擴展，它允許我們在 JavaScript 代碼中直接編寫類似 HTML 的代碼。React 使用 JSX 來描述用戶界面，它可以很好地描述 UI 應該呈現出的交互本質形式，并且能和 JavaScript 完美融合。例如：

const element = <h1>Hello, React!</h1>;

在上述代碼中，我們使用 JSX 創建了一個<h1>元素，它看起來就像普通的 HTML 標簽，但實際上它是一個 JavaScript 表達式。在編譯時，JSX 會被轉換為React.createElement函數調用，上述代碼等價于：

const element = React.createElement('h1', null, 'Hello, React!');

這種轉換使得我們可以在 JavaScript 中更直觀地構建用戶界面，同時利用 JavaScript 的強大功能來動態生成和操作 UI。?

屬性與表達式?

在 JSX 中，我們可以像在 HTML 中一樣設置元素的屬性。例如，為<img>標簽設置src和alt屬性：

const imgUrl = 'https://example.com/image.jpg';
const imgAlt = '示例圖片';const imageElement = <img src={imgUrl} alt={imgAlt} />;

注意，當屬性值是一個 JavaScript 表達式時，我們需要使用大括號{}將其包裹起來。這里的src={imgUrl}和alt={imgAlt}，imgUrl和imgAlt都是 JavaScript 變量，它們的值會在運行時被計算并賦值給相應的屬性。?

除了屬性，我們還可以在 JSX 中使用 JavaScript 表達式來動態生成內容。例如，使用三元運算符根據條件渲染不同的內容：

const isLoggedIn = true;const greetingElement = (<div>{isLoggedIn ? <p>歡迎回來！</p> : <p>請登錄。</p>}</div>
);

在上述代碼中，根據isLoggedIn的值，greetingElement會渲染不同的<p>元素。?

注意事項?

使用 JSX 時，有一些語法要求需要注意：?

1.必須有一個根元素：JSX 中所有的元素必須包含在一個外層元素中，例如<div>、<section>等。如果不需要實際的 DOM 元素包裹，可以使用空標簽<></>（也稱為 React Fragment）。例如：

// 正確，使用div作為根元素
const validElement1 = (<div><p>段落1</p><p>段落2</p></div>
);// 正確，使用React Fragment作為根元素
const validElement2 = (<><p>段落1</p><p>段落2</p></>
);// 錯誤，沒有根元素
const invalidElement = (<p>段落1</p><p>段落2</p>
);

2.標簽必須閉合：在 JSX 中，所有標簽都必須正確閉合，無論是單標簽（如<img>、<input>）還是雙標簽（如<div></div>、<p></p>）。例如：

// 正確，單標簽閉合
const validSingleTag = <input type="text" />;// 錯誤，單標簽未閉合
const invalidSingleTag = <input type="text">;// 正確，雙標簽閉合
const validDoubleTag = <div><p>內容</p></div>;// 錯誤，雙標簽未閉合
const invalidDoubleTag = <div><p>內容</p>;

3.區分大小寫：JSX 中標簽和屬性名是區分大小寫的。一般來說，HTML 標簽使用小寫字母，而自定義組件使用大寫字母開頭。例如：

// 正確，HTML標簽小寫
const htmlElement = <div>這是一個div</div>;// 錯誤，HTML標簽大寫
const wrongHtmlElement = <DIV>這是錯誤的</DIV>;// 定義一個自定義組件
const MyComponent = () => {return <p>這是一個自定義組件</p>;
};// 正確，自定義組件大寫
const customElement = <MyComponent />;// 錯誤，自定義組件小寫
const wrongCustomElement = <myComponent />;

React 組件

函數式組件

函數式組件是定義 React 組件的一種簡潔方式，它是一個普通的 JavaScript 函數，接收props（屬性）作為參數，并返回一個 React 元素。例如，我們定義一個簡單的函數式組件Welcome：

import React from'react';// 定義一個函數式組件
const Welcome = (props) => {return <p>歡迎，{props.name}！</p>;
};export default Welcome;

在上述代碼中，Welcome組件接收一個props對象，其中包含name屬性。組件通過props.name獲取傳入的名字，并渲染在<p>標簽中。?

使用函數式組件時，我們可以通過屬性傳遞數據。例如，在另一個組件中使用Welcome組件：

import React from'react';
import Welcome from './Welcome';const App = () => {return (<div><Welcome name="張三" /></div>);
};export default App;

在App組件中，我們將name屬性設置為"張三"，并傳遞給Welcome組件，Welcome組件會顯示"歡迎，張三！"。

類組件

類組件是基于 ES6 類的方式定義的 React 組件，它具有自己的狀態（state）和生命周期方法。類組件需要繼承React.Component類，并實現render方法來返回組件的 UI。下面是一個簡單的類組件示例，實現一個計數器功能：

import React, { Component } from'react';class Counter extends Component {constructor(props) {super(props);// 初始化狀態this.state = {count: 0};}// 定義一個方法用于更新狀態increment = () => {this.setState({count: this.state.count + 1});};render() {return (<div><p>計數: {this.state.count}</p><button onClick={this.increment}>增加計數</button></div>);}
}export default Counter;

在上述代碼中：?

1.constructor方法是類的構造函數，用于初始化組件的狀態和綁定方法。通過super(props)調用父類的構造函數，確保this.props正確初始化。?

2.this.state用于定義組件的狀態，這里初始化count為 0。?

3.increment方法使用setState方法來更新狀態，setState會觸發組件的重新渲染，從而更新 UI。?

4.render方法返回組件的 UI，展示當前的計數和一個按鈕，點擊按鈕會調用increment方法增加計數。

組件通信?

1.父子組件通信：在 React 中，父子組件通信是通過屬性（props）來實現的。父組件可以將數據和方法通過 props 傳遞給子組件。例如：

import React, { useState } from'react';// 子組件
const Child = ({ count, increment }) => {return (<div><p>計數: {count}</p><button onClick={increment}>增加計數</button></div>);
};// 父組件
const Parent = () => {const [count, setCount] = useState(0);const incrementCount = () => {setCount(count + 1);};return (<div><Child count={count} increment={incrementCount} /></div>);
};export default Parent;

在上述代碼中，Parent組件通過count屬性將當前的計數值傳遞給Child組件，通過increment屬性將incrementCount方法傳遞給Child組件。Child組件可以通過props.count讀取計數值，通過props.increment調用父組件的方法來更新計數。?

2.兄弟組件通信：兄弟組件之間不能直接通信，通常需要通過它們的共同父組件作為中介來實現通信。例如，有兩個兄弟組件ComponentA和ComponentB，它們的父組件ParentComponent可以管理共享的狀態，并將狀態和更新狀態的方法傳遞給兩個子組件。以下是一個簡單的示例：

import React, { useState } from'react';// 組件A
const ComponentA = ({ count, increment }) => {return (<div><p>組件A: {count}</p><button onClick={increment}>組件A增加計數</button></div>);
};// 組件B
const ComponentB = ({ count, increment }) => {return (<div><p>組件B: {count}</p><button onClick={increment}>組件B增加計數</button></div>);
};// 父組件
const ParentComponent = () => {const [count, setCount] = useState(0);const incrementCount = () => {setCount(count + 1);};return (<div><ComponentA count={count} increment={incrementCount} /><ComponentB count={count} increment={incrementCount} /></div>);
};export default ParentComponent;

在這個示例中，ParentComponent管理著count狀態，并將count和incrementCount方法傳遞給ComponentA和ComponentB。當ComponentA或ComponentB中的按鈕被點擊時，都會調用incrementCount方法，從而更新共享的count狀態，兩個組件的 UI 也會相應更新。?

狀態管理（State）?

狀態的定義與初始化?

在 React 類組件中，狀態（state）是一個包含組件數據的 JavaScript 對象。狀態的變化會觸發組件的重新渲染，從而更新用戶界面。通常在組件的構造函數中初始化狀態。例如，我們創建一個簡單的Toggle組件，用于切換一個開關的狀態：

import React, { Component } from'react';class Toggle extends Component {constructor(props) {super(props);// 初始化狀態，isOn為false表示開關關閉this.state = {isOn: false};}render() {return (<div><button>{this.state.isOn? '關閉' : '打開'}</button></div>);}
}export default Toggle;

在上述代碼中，Toggle組件的state包含一個isOn屬性，初始值為false。在render方法中，根據isOn的值來顯示按鈕上的文本。?

狀態更新?

要更新組件的狀態，我們使用setState方法。setState方法接受一個新的狀態對象，并將其合并到當前狀態中。React 會在狀態更新后自動重新渲染組件。繼續上面的Toggle組件示例，我們添加點擊按鈕切換狀態的功能：

import React, { Component } from'react';class Toggle extends Component {constructor(props) {super(props);this.state = {isOn: false};// 綁定this，確保handleClick方法中的this指向組件實例this.handleClick = this.handleClick.bind(this);}handleClick() {// 使用setState更新狀態this.setState((prevState) => ({isOn:!prevState.isOn}));}render() {return (<div><button onClick={this.handleClick}>{this.state.isOn? '關閉' : '打開'}</button></div>);}
}export default Toggle;

在上述代碼中：?

1.handleClick方法中使用setState來更新isOn狀態。這里使用了函數形式的setState，它接受一個函數參數，該函數的參數prevState是上一個狀態，返回值是新的狀態。這樣可以確保在狀態更新依賴于前一個狀態時，能得到正確的結果。?

2.在constructor中，通過this.handleClick = this.handleClick.bind(this);將handleClick方法的this綁定到組件實例，因為在 React 中，事件處理函數中的this默認是未定義的，需要手動綁定。?

需要注意的是，setState是異步的，React 可能會將多個setState調用合并為單個更新，以提高性能。因此，不要依賴于setState調用后立即獲取最新的狀態值。例如：

// 錯誤的做法，無法保證獲取到最新的count值
this.setState({ count: this.state.count + 1 });
console.log(this.state.count); // 正確的做法，使用回調函數獲取更新后的狀態
this.setState({ count: this.state.count + 1 }, () => {console.log(this.state.count); 
});

函數式組件中的狀態（Hooks）?

在 React 16.8 及以上版本中，函數式組件可以使用 Hooks 來管理狀態。useState是一個常用的 Hook，它允許我們在函數式組件中添加狀態。例如，我們將上面的Toggle組件用函數式組件和useState實現：

import React, { useState } from'react';const Toggle = () => {// 使用useState定義狀態，isOn初始值為falseconst [isOn, setIsOn] = useState(false);const handleClick = () => {// 使用setIsOn更新狀態setIsOn(!isOn);};return (<div><button onClick={handleClick}>{isOn? '關閉' : '打開'}</button></div>);
};export default Toggle;

在上述代碼中：?

1.const [isOn, setIsOn] = useState(false);使用useState定義了一個狀態變量isOn，初始值為false，并返回一個更新狀態的函數setIsOn。?

2.handleClick函數中通過setIsOn(!isOn)來更新isOn狀態。?

3.與類組件中的setState不同，useState的更新函數setIsOn不會自動合并新的狀態，而是直接替換舊的狀態。如果需要合并狀態，可以使用展開運算符（...）。例如：

const [obj, setObj] = useState({ key1: 'value1' });const updateObj = () => {setObj({...obj,key2: 'value2'});
};

React 揭秘：從新手到高手的進階之路

React：前端開發新寵?

React 初相識?

什么是 React?

React 的核心特性?

1.組件化開發

2.虛擬 DOM 與 Diff 算法

單向數據流

搭建 React 開發環境

環境準備?

創建 React 項目

項目結構解析

React 基礎語法與核心概念

JSX 語法?

基本語法規則?

屬性與表達式?

注意事項?

React 組件

函數式組件

類組件

組件通信?

狀態管理（State）?

狀態的定義與初始化?

狀態更新?

函數式組件中的狀態（Hooks）?

相關文章