React.js 基礎與進階教程
React.js 是由 Facebook 開發的流行前端 JavaScript 庫，專為構建用戶界面（UI）設計，尤其適用于單頁面應用（SPA）。它采用組件化開發模式，使 UI 結構更加清晰、可維護性更強。本文將帶你快速入門 React，并深入了解其核心概念、關鍵特性及最佳實踐。
1. React 基礎概念
1.1 React 組件
React 采用組件化開發，一個組件代表 UI 的一個獨立部分。組件主要分為函數組件和類組件。
函數組件示例：
function Welcome(props) {return <h1>Hello, {props.name}!</h1>;
}
類組件示例：
class Welcome extends React.Component {render() {return <h1>Hello, {this.props.name}!</h1>;}
}
1.2 JSX 語法
JSX 是 React 提供的一種 JavaScript 語法擴展，允許在 JavaScript 代碼中直接編寫 HTML 結構。
const element = <h1>Hello, World!</h1>;
JSX 語法需要 Babel 進行編譯，最終轉換成 React.createElement 形式。
1.3 State 與 Props
- Props（屬性）：用于組件間傳遞數據。
- State（狀態）：組件內部的可變數據，影響組件的渲染。
示例：
class Counter extends React.Component {constructor(props) {super(props);this.state = { count: 0 };}increment = () => {this.setState({ count: this.state.count + 1 });};render() {return (<div><p>Count: {this.state.count}</p><button onClick={this.increment}>Increment</button></div>);}
}
2. React 進階
2.1 組件生命周期
React 組件有三個主要生命周期階段：
- 掛載（Mounting）：組件創建并插入 DOM。
- 更新（Updating）：組件狀態或屬性更新時觸發。
- 卸載（Unmounting）：組件從 DOM 中移除。
常見生命周期方法：
class Example extends React.Component {componentDidMount() {console.log('組件已掛載');}componentDidUpdate() {console.log('組件更新');}componentWillUnmount() {console.log('組件即將卸載');}
}
2.2 事件處理
在 React 中，事件處理類似于 HTML，但使用駝峰命名：
<button onClick={this.handleClick}>Click Me</button>
2.3 條件渲染
{isLoggedIn ? <UserDashboard /> : <LoginPage />}
2.4 列表渲染
const items = ['Apple', 'Banana', 'Cherry'];
const listItems = items.map(item => <li key={item}>{item}</li>);
3. React Hooks（React 16.8+）
React Hooks 允許在函數組件中使用 state 和生命周期。
3.1 useState
import { useState } from 'react';
function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increase</button></div>);
}
3.2 useEffect
import { useEffect } from 'react';
function Example() {useEffect(() => {console.log('組件渲染');}, []);
}
3.3 useContext
const ThemeContext = React.createContext('light');
function ThemedButton() {const theme = useContext(ThemeContext);return <button className={theme}>Click Me</button>;
}
4. React Router（前端路由）
React Router 允許實現單頁面應用路由。
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
function App() {return (<Router><Routes><Route path="/" element={<Home />} /><Route path="/about" element={<About />} /></Routes></Router>);
}
5. Redux（狀態管理）
Redux 解決組件間狀態共享問題。
import { createStore } from 'redux';
const reducer = (state = { count: 0 }, action) => {switch (action.type) {case 'INCREMENT': return { count: state.count + 1 };default: return state;}
};
const store = createStore(reducer);
6. React 性能優化
6.1 使用 React.memo 進行組件優化
const MemoizedComponent = React.memo(MyComponent);
6.2 使用 useCallback 記憶化函數
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);
6.3 使用 useMemo 記憶化計算結果
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
7. 結語
React 是現代前端開發的核心技術之一，掌握 React 組件、Hooks、路由和狀態管理能幫助你構建強大的 Web 應用。本教程涵蓋了 React 的基本用法和優化技巧，希望能幫助你入門并逐步深入！
