React 應用程式的基本設計模式：升級您的組件遊戲-js教程-PHP中文網

Essential Design Patterns for React Apps: Leveling Up Your Component Game

如果您已經進入 React 世界一段時間，您可能聽說過「這只是 JavaScript」這句話。雖然這是事實，但這並不意味著我們不能從一些經過驗證的模式中受益，使我們的 React 應用程式更易於維護、可重複使用並且使用起來更加愉快。讓我們深入研究一些基本的設計模式，這些模式可以讓你的 React 元件從「meh」到「marvelous」！

為什麼設計模式在 React 中很重要

在我們開始之前，讓我們先解決一下房間裡的大象：為什麼要費心設計模式呢？好吧，我的 React 愛好者同胞，設計模式就像編碼世界的秘方。它們是針對常見問題的經過實戰檢驗的解決方案，可以：

讓您的程式碼更具可讀性和可維護性
促進整個應用程式的可重複使用性
用優雅的解決方案解決複雜問題
幫助您更有效地與其他開發者交流想法

現在我們已經達成共識，讓我們探索一些模式，讓您的 React 組件比剛打蠟的跑車更加閃亮！

1. 組件組合模式

React 的元件模型本身就已經是一種強大的模式，但透過組合更進一步可以帶來更靈活和可重複使用的程式碼。

// Instead of this:
const Button = ({ label, icon, onClick }) => (
  <button onClick={onClick}>
    {icon && <Icon name={icon} />}
    {label}
  </button>
);

// Consider this:
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

const IconButton = ({ icon, label }) => (
  <Button>
    <Icon name={icon} />
    {label}
  </Button>
);

登入後複製

為什麼它很棒：

更靈活可重複使用的組件
更容易客製化和擴充
遵循單一責任原則

專業提示：將您的組件視為樂高積木。它們的模組化程度和可組合性越高，您可以建造的結構就越令人驚嘆！

2. 容器/展示模式

此模式將組件的邏輯與其表示分離，使其更容易推理和測試。

// Container Component
const UserListContainer = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers);
  }, []);

  return <UserList users={users} />;
};

// Presentational Component
const UserList = ({ users }) => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

登入後複製

為何如此震撼：

明確的關注分離
更容易測試和維護
促進展示組件的可重複使用性

請記住：容器就像戲劇的後台工作人員，處理所有幕後工作，而演示組件則是演員，只專注於為觀眾提供好看的外觀。

3. 高階組件（HOC）模式

HOC 是接受元件並傳回帶有一些附加功能的新元件的函數。它們就像您的組件的電源！

const withLoader = (WrappedComponent) => {
  return ({ isLoading, ...props }) => {
    if (isLoading) {
      return <LoadingSpinner />;
    }
    return <WrappedComponent {...props} />;
  };
};

const EnhancedUserList = withLoader(UserList);

登入後複製

為什麼這麼酷：

允許跨不同元件重複使用程式碼
保持組件清潔與集中
可以組合進行多項增強

警告：雖然 HOC 很強大，但如果過度使用，它們可能會導致「包裝地獄」。明智地使用它們！

4. 渲染道具模式

此模式涉及將函數作為道具傳遞給元件，讓您可以更好地控制渲染的內容。

const MouseTracker = ({ render }) => {
  const [position, setPosition] = useState({ x: 0, y: 0 });

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

  return (
    <div onMouseMove={handleMouseMove}>
      {render(position)}
    </div>
  );
};

// Usage
<MouseTracker
  render={({ x, y }) => (
    <h1>The mouse is at ({x}, {y})</h1>
  )}
/>

登入後複製

為什麼它很漂亮：

高度靈活且可重複使用
避免 HOC 問題，例如道具命名衝突
允許基於提供的函數進行動態渲染

有趣的事實：渲染道具模式非常靈活，它甚至可以實現我們討論過的大多數其他模式！

5. 自訂 Hook 模式

鉤子是 React 中的新成員，自訂鉤子可讓您將元件邏輯提取到可重複使用的函數中。

const useWindowSize = () => {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Set initial size

    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
};

// Usage
const MyComponent = () => {
  const { width, height } = useWindowSize();
  return <div>Window size: {width} x {height}</div>;
};

登入後複製

為何如此神奇：