每個開發人員都應該了解可擴展和高效應用程式的頂級 React 設計模式

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

1. 展示組件和容器組件

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

• 呈現組件：這些組件負責事物的外觀。他們透過 props 接收資料和回調，但沒有自己的邏輯。它們的唯一目的是渲染 UI。

• 容器組件：這些元件管理事物的工作方式。它們包含邏輯、管理狀態並處理資料擷取或事件處理。容器組件將資料傳遞給展示組件。

// Presentational Component
const UserProfile = ({ user }) => (
  <div>
    <h1 id="user-name">{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}"></userprofile>;
};

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

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></wrappedcomponent>;
  };
};

// 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 id="Mouse-position-x-y">Mouse position: {x}, {y}</h1>} />
);


</mousetracker>

此模式透過將邏輯與 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>;
};

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

結論

設計模式是編寫乾淨、可維護和可擴展的 React 應用程式的關鍵部分。透過利用展示元件和容器元件、HOC、渲染道具、複合元件和自訂掛鉤等模式，您可以確保您的程式碼靈活、可重複使用且易於理解。

理解和實現這些模式可以大大改善您的開發工作流程，使您的 React 專案更有組織和高效。嘗試將它們合併到您的下一個專案中，體驗程式碼品質和可維護性方面的差異！

以上是每個開發人員都應該了解可擴展和高效應用程式的頂級 React 設計模式的詳細內容。更多資訊請關注PHP中文網其他相關文章！