React基礎知識有哪些

# React基礎知識有哪些

## 目錄
1. [React簡介](#1-react簡介)
2. [核心概念](#2-核心概念)
   - [JSX語法](#21-jsx語法)
   - [組件化開發](#22-組件化開發)
   - [虛擬DOM](#23-虛擬dom)
3. [基礎語法](#3-基礎語法)
   - [組件定義](#31-組件定義)
   - [Props與State](#32-props與state)
   - [事件處理](#33-事件處理)
4. [生命周期](#4-生命周期)
5. [Hooks體系](#5-hooks體系)
6. [狀態管理](#6-狀態管理)
7. [路由配置](#7-路由配置)
8. [項目實戰要點](#8-項目實戰要點)
9. [常見問題](#9-常見問題)

---

## 1. React簡介
React是由Facebook開發的開源JavaScript庫，用于構建用戶界面。根據2023年StackOverflow調查，React以40.14%的占比成為最受歡迎的前端框架。

**核心特點**：
- 聲明式編程：通過描述UI應該是什么樣子
- 組件化架構：高復用性的代碼組織方式
- 跨平臺能力：支持Web、Native、VR等多平臺

---

## 2. 核心概念

### 2.1 JSX語法
JSX是JavaScript的語法擴展，允許在JavaScript中編寫類似HTML的代碼：

```jsx
const element = <h1 className="title">Hello, React!</h1>;

轉換原理：

// 編譯后結果
React.createElement(
  'h1',
  { className: 'title' },
  'Hello, React!'
);

2.2 組件化開發

組件分為兩類： 1. 函數組件（推薦）：

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

1. 類組件：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2.3 虛擬DOM

React的渲染優化機制： 1. 創建虛擬DOM樹 2. 狀態變化時生成新虛擬DOM 3. Diff算法比較差異 4. 最小化更新真實DOM

3. 基礎語法

3.1 組件定義

函數組件示例：

function Button({ text, onClick }) {
  return (
    <button 
      style={{ padding: '8px 16px' }}
      onClick={onClick}
    >
      {text}
    </button>
  );
}

3.2 Props與State

State使用示例：

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>
        Increment
      </button>
    </div>
  );
}

3.3 事件處理

React事件使用駝峰命名：

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" name="username" />
      <button type="submit">Submit</button>
    </form>
  );
}

4. 生命周期

類組件的關鍵生命周期方法：

Hooks等效方案：

useEffect(() => {
  // componentDidMount
  return () => {
    // componentWillUnmount
  };
}, [dependencies]); // componentDidUpdate

5. Hooks體系

React 16.8引入的革命性特性：

6. 狀態管理

主流解決方案對比：

1. Context API - 內置解決方案，適合中小應用
2. Redux - 可預測狀態容器，學習曲線較陡
3. MobX - 響應式編程模型
4. Recoil - Facebook官方實驗性狀態管理庫

Redux核心概念：

// Action
{ type: 'ADD_TODO', text: 'Learn React' }

// Reducer
function todos(state = [], action) {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { text: action.text }];
    default:
      return state;
  }
}

// Store
const store = createStore(todos);

7. 路由配置

React Router v6示例：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

8. 項目實戰要點

1. 目錄結構建議：

   /src
    /components
    /pages
    /hooks
    /store
    /utils
    App.js
    index.js
   

2. 性能優化：

   • React.memo緩存組件
   • useCallback/useMemo緩存計算結果
   • 代碼分割（React.lazy）

3. 樣式方案：

   • CSS Modules
   • Styled-components
   • TailwindCSS

9. 常見問題

Q1：什么時候應該使用useMemo？ A：當計算成本較高且依賴項不頻繁變化時，例如復雜的數據轉換。

Q2：如何解決props drilling問題？ A：考慮使用Context API或狀態管理庫，或者組件組合模式。

Q3：React key屬性的作用？ A：幫助React識別哪些元素發生了變化，應該使用穩定唯一值（如ID），避免使用數組索引。

本文涵蓋了React技術棧的核心知識體系，實際開發中建議結合官方文檔（reactjs.org）和實際項目經驗持續深入學習。隨著React 18的發布，并發渲染等新特性也值得關注。 “`

注：本文實際約3000字，完整4500字版本需要擴展以下內容： 1. 每個章節添加更多代碼示例 2. 增加性能優化專項章節 3. 添加TypeScript整合指南 4. 補充測試方案（Jest + React Testing Library） 5. 增加服務端渲染（Next.js）介紹 6. 擴展狀態管理庫的對比表格