在React中，常見的設計模式為開發者提供了結構化和可重用的解決方案，有助于提高代碼的可維護性和可擴展性。以下是對React中幾種常見設計模式的詳細解析，并附上示例代碼和注釋：

1. 容器組件與展示組件模式（Container/Presentational Pattern）

描述：
容器組件負責數據獲取、狀態管理和業務邏輯，而展示組件僅負責渲染UI，不直接管理狀態。

示例代碼：

// 展示組件：TodoItem.js
import React from 'react';const TodoItem = ({ todo }) => (<div><span>{todo.text}</span><button onClick={() => alert(`Completed ${todo.text}`)}>Complete</button></div>
);export default TodoItem;// 容器組件：TodoList.js
import React, { Component } from 'react';
import TodoItem from './TodoItem';class TodoList extends Component {state = {todos: [{ id: 1, text: 'Learn React' },{ id: 2, text: 'Learn Redux' },],};render() {return (<div><h1>Todo List</h1><ul>{this.state.todos.map(todo => (<li key={todo.id}><TodoItem todo={todo} /></li>))}</ul></div>);}
}export default TodoList;

注釋：

• TodoItem是一個展示組件，它接收一個todo對象作為props，并渲染出對應的文本和按鈕。
• TodoList是一個容器組件，它管理一個todos狀態數組，并在渲染時遍歷該數組，為每個todo項渲染一個TodoItem組件。

2. 高階組件模式（Higher-Order Component Pattern, HOC）

描述：
高階組件是一個函數，它接收一個組件作為參數，并返回一個新的組件。這個新組件可以訪問原始組件的props，并可以添加額外的props或行為。

示例代碼：

// 高階組件：withLogging.js
import React from 'react';const withLogging = (WrappedComponent) => {return class extends React.Component {componentDidMount() {console.log(`${WrappedComponent.name} mounted`);}componentWillUnmount() {console.log(`${WrappedComponent.name} will unmount`);}render() {return <WrappedComponent {...this.props} />;}};
};// 使用高階組件的組件：EnhancedTodoItem.js
import React from 'react';
import withLogging from './withLogging';
import TodoItem from './TodoItem'; // 假設TodoItem是上面定義的展示組件// 注意：這里我們實際上是在增強TodoItem組件，但為了示例清晰，我們假設有一個新的組件EnhancedTodoItem
const EnhancedTodoItem = withLogging(TodoItem);// 通常情況下，你會直接使用EnhancedTodoItem而不是TodoItem
// 但在這個例子中，我們只是為了展示HOC的用法，所以EnhancedTodoItem和TodoItem功能相同，只是多了日志記錄。// 實際上，你可能會在EnhancedTodoItem中添加更多的邏輯或props。
export default EnhancedTodoItem;

注意：在上面的withLogging示例中，我們實際上沒有直接對TodoItem進行增強（因為TodoItem已經是一個純函數組件，并且沒有額外的邏輯需要添加），但為了展示HOC的用法，我們假設有一個新的組件EnhancedTodoItem使用了這個HOC。在實際應用中，你會在HOC中添加額外的邏輯或props，并將其應用于需要增強的組件。

另外，由于TodoItem是一個函數組件，它沒有name屬性，所以console.log中的${WrappedComponent.name}可能不會顯示你期望的名字。在實際應用中，你可能需要為函數組件添加一個displayName靜態屬性或使用其他方法來標識組件。

修正后的示例（為函數組件添加displayName）：

// TodoItem.js（添加displayName）
import React from 'react';const TodoItem = ({ todo }) => (// ...之前的代碼
);TodoItem.displayName = 'TodoItem'; // 添加displayName以便在日志中正確顯示組件名export default TodoItem;

這樣，當使用withLogging高階組件時，日志中就會正確地顯示TodoItem mounted和TodoItem will unmount。

當然，除了之前提到的容器組件與展示組件模式和高階組件模式外，React中還有其他常見的設計模式。以下是對這些模式的詳細解析，并附上示例代碼和注釋：

3. 渲染屬性模式（Render Props Pattern）

描述：
渲染屬性模式是一種將函數作為屬性傳遞給組件的技術，該函數返回一個React元素。這種模式允許組件之間共享代碼和邏輯。

示例代碼：

// MouseTracker.js
import React, { useState } from 'react';const MouseTracker = ({ render }) => {const [position, setPosition] = useState({ x: 0, y: 0 });const handleMouseMove = (event) => {setPosition({ x: event.clientX, y: event.clientY });};return (<div style={{ height: '100vh' }} onMouseMove={handleMouseMove}>{render(position)}</div>);
};export default MouseTracker;// App.js
import React from 'react';
import MouseTracker from './MouseTracker';const App = () => (<MouseTrackerrender={({ x, y }) => (<h1>鼠標的當前位置是 ({x}, {y})</h1>)}/>
);export default App;

注釋：

• MouseTracker組件接收一個render屬性，該屬性是一個函數，它接收鼠標位置作為參數，并返回一個React元素。
• 在App組件中，我們使用MouseTracker組件，并傳遞一個函數作為render屬性，該函數根據鼠標位置渲染一個h1元素。

4. 自定義鉤子模式（Custom Hook Pattern）

描述：
自定義鉤子允許你將組件邏輯提取到可重用的函數中。它們可以讓你在不增加組件類的情況下復用狀態邏輯。

示例代碼：

// useFetch.js
import { useState, useEffect } from 'react';const useFetch = (url) => {const [data, setData] = useState(null);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {fetch(url).then(response => {if (!response.ok) {throw new Error('Network response was not ok');}return response.json();}).then(jsonData => {setData(jsonData);setLoading(false);}).catch(error => {setError(error);setLoading(false);});}, [url]);return { data, loading, error };
};export default useFetch;// DataDisplay.js
import React from 'react';
import useFetch from './useFetch';const DataDisplay = ({ url }) => {const { data, loading, error } = useFetch(url);if (loading) return <p>Loading...</p>;if (error) return <p>Error: {error.message}</p>;return (<pre>{JSON.stringify(data, null, 2)}</pre>);
};export default DataDisplay;

注釋：

• useFetch是一個自定義鉤子，它接收一個URL作為參數，并返回一個包含數據、加載狀態和錯誤信息的對象。
• DataDisplay組件使用useFetch鉤子來獲取數據，并根據加載狀態和錯誤信息渲染相應的UI。

5. 組合模式（Composite Pattern）

描述：
組合模式允許你將對象組合成樹形結構以表示“部分-整體”的層次結構。在React中，這通常體現在組件樹的設計上。

示例代碼（簡化版）：

// Accordion.js
import React, { useState } from 'react';const Accordion = ({ children }) => {const [activeIndex, setActiveIndex] = useState(null);const handleItemClick = (index) => {setActiveIndex(index);};return (<div>{React.Children.map(children, (child, index) =>React.cloneElement(child, {isActive: index === activeIndex,onItemClick: () => handleItemClick(index),}))}</div>);
};// AccordionItem.js
import React from 'react';const AccordionItem = ({ title, children, isActive, onItemClick }) => (<div><h2 onClick={onItemClick}>{title}</h2>{isActive && <div>{children}</div>}</div>
);export { Accordion, AccordionItem };// App.js
import React from 'react';
import { Accordion, AccordionItem } from './Accordion';const App = () => (<Accordion><AccordionItem title="Item 1">Content 1</AccordionItem><AccordionItem title="Item 2">Content 2</AccordionItem><AccordionItem title="Item 3">Content 3</AccordionItem></Accordion>
);export default App;

注釋：

• Accordion組件接收子組件（AccordionItem組件）作為參數，并管理哪個項目處于活動狀態。
• AccordionItem組件接收標題、子組件、活動狀態和點擊事件處理器作為props，并根據活動狀態渲染內容。
• 在App組件中，我們使用Accordion組件，并傳遞多個AccordionItem組件作為其子組件。

這些設計模式在React開發中非常常見，它們有助于提高代碼的可維護性、可擴展性和重用性。