每個開發人員都應該了解可擴展和高效應用程式的頂級 React 設計模式-js教程-PHP中文網

Top React Design Patterns Every Developer Should Know for Scalable and Efficient Apps

隨著 React 繼續主導前端生態系統，掌握其設計模式可以顯著提高應用程式的效率和可擴展性。 React 設計模式提供了組織和建置元件、管理狀態、處理 props 和提高可重複使用性的最佳實踐。在本部落格中，我們將探討一些關鍵的 React 設計模式，這些模式可以讓您的開發流程從優秀走向卓越。

1. 展示組件和容器組件

React 中的基本模式之一是 展示元件和容器元件 模式，它是關於分離關注點的：

呈現組件：這些組件負責事物的外觀。他們透過 props 接收資料和回調，但沒有自己的邏輯。它們的唯一目的是渲染 UI。
容器組件：這些元件管理事物的工作方式。它們包含邏輯、管理狀態並處理資料擷取或事件處理。容器組件將資料傳遞給展示組件。


// Presentational Component
const UserProfile = ({ user }) => (
  <div>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </div>
);

// Container Component
const UserProfileContainer = () => {
  const [user, setUser] = useState({ name: 'John Doe', email: 'john@example.com' });

  return <UserProfile user={user} />;
};

登入後複製

這種模式鼓勵關注點分離，使程式碼更易於維護和測試。

2. 高階組件（HOC）

高階元件 (HOC) 是重複使用元件邏輯的強大設計模式。 HOC 是一個函數，它接受一個元件並傳回一個具有增強行為或添加功能的新元件。

此模式通常用於橫切關注點，例如驗證、主題或資料擷取。


// Higher-Order Component for authentication
const withAuth = (WrappedComponent) => {
  return (props) => {
    const isAuthenticated = // logic to check auth;

    if (!isAuthenticated) {
      return <div>You need to log in!</div>;
    }

    return <WrappedComponent {...props} />;
  };
};

// Usage
const Dashboard = () => <div>Welcome to the dashboard</div>;
export default withAuth(Dashboard);

登入後複製

HOC 透過跨多個元件實現可重複使用邏輯來推廣 DRY（不要重複自己）原則。

3. 渲染道具

Render Props 模式涉及將函數作為 prop 傳遞給元件，從而允許基於該函數動態渲染內容。這對於在不使用 HOC 的情況下在元件之間共享狀態邏輯特別有用。


// Render Prop Component
class MouseTracker extends React.Component {
  state = { x: 0, y: 0 };

  handleMouseMove = (event) => {
    this.setState({ x: event.clientX, y: event.clientY });
  };

  render() {
    return (
      <div onMouseMove={this.handleMouseMove}>
        {this.props.render(this.state)}
      </div>
    );
  }
}

// Usage
const App = () => (
  <MouseTracker render={({ x, y }) => <h1>Mouse position: {x}, {y}</h1>} />
);

登入後複製

此模式透過將邏輯與 UI 分離來為您提供靈活性，使元件更具可重複使用性和可自訂性。

4. 複合組件

複合元件模式通常用於react-select 或react-table 等函式庫。它允許父元件控制一組子元件。這種模式提高了建構可重複使用和動態介面的靈活性。


// Compound Component
const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0);

  return (
    <div>
      <div>
        {children.map((child, index) => (
          <button key={index} onClick={() => setActiveTab(index)}>
            {child.props.title}
          </button>
        ))}
      </div>
      <div>{children[activeTab]}</div>
    </div>
  );
};

// Usage
<Tabs>
  <div title="Tab 1">Content of Tab 1</div>
  <div title="Tab 2">Content of Tab 2</div>
</Tabs>;

登入後複製

此模式為父子通訊提供了一個乾淨的 API，同時保持元件的靈活性和可自訂性。

5. 受控組件與非受控組件

React 提供了兩種管理表單輸入的方式：受控元件 和 非受控元件。

受控元件：這些元件的狀態完全由 React 透過 props 控制，這使得它們更可預測。
不受控制的組件：這些組件依賴 ref 直接操作 DOM，提供較少的控制，但可能提高性能。


// Controlled Component
const ControlledInput = () => {
  const [value, setValue] = useState('');

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
};

// Uncontrolled Component
const UncontrolledInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return <input ref={inputRef} />;
};

登入後複製

在這些模式之間進行選擇取決於您是否需要細粒度控製或輕量級效能最佳化。

6. 自訂掛鉤

React Hooks 允許我們以可重複使用的方式建立自訂邏輯。透過將通用邏輯提取到自訂鉤子中，我們可以避免程式碼重複並使我們的程式碼庫更加模組化。


// Custom Hook
const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => setError(error));
  }, [url]);

  return { data, error };
};

// Usage
const DataFetchingComponent = () => {
  const { data, error } = useFetch('https://api.example.com/data');

  if (error) return <p>Error: {error.message}</p>;
  if (!data) return <p>Loading...</p>;

  return <div>{data.someField}</div>;
};

登入後複製

自訂掛鉤可以更好地分離關注點並以聲明方式重複使用常見功能。