React 中的設計模式 [HOC、渲染道具、鉤子]-js教程-PHP中文網

React 中的設計模式 [HOC、渲染道具、鉤子]

PHPz

發布： 2024-08-06 10:08:22

原創

856 人瀏覽過

Padrões de Projeto em React [HOCs, Render Props, Hooks]

介紹

設計模式是軟體開發中常見問題的經過驗證的解決方案。在 React 中，應用這些模式可以讓您的程式碼更加模組化、可重複使用且更易於維護。在本文中，我們將探討 React 中一些最常見和最有用的設計模式：高階元件 (HOC)、渲染道具和 Hook。

1. 高階組件 (HOC)

高階組件（HOC）是接收組件並傳回具有附加功能的新組件的函數。它們通常用於向多個元件添加通用邏輯。

HOC 範例

讓我們建立一個簡單的 HOC，只需點擊按鈕即可新增日誌記錄功能：

import React from 'react';

// Higher Order Component
const withLogger = (WrappedComponent) => {
  return class extends React.Component {
    handleClick = () => {
      console.log('Button clicked!');
    };

    render() {
      return <WrappedComponent onClick={this.handleClick} {...this.props} />;
    }
  };
};

// Componente Original
const Button = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

// Componente Envolvido com HOC
const ButtonWithLogger = withLogger(Button);

export default ButtonWithLogger;

登入後複製

2. 渲染道具

Render Props 是一種允許您使用值為函數的 prop 在元件之間共用邏輯的技術。此函數接收渲染內容所需的資料。

渲染道具範例

讓我們建立一個元件來管理可見性狀態並透過渲染道具提供此邏輯：

import React, { useState } from 'react';

// Componente de Render Props
const Toggle = ({ children }) => {
  const [isVisible, setIsVisible] = useState(false);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return children({ isVisible, toggleVisibility });
};

// Componente que utiliza Render Props
const App = () => (
  <Toggle>
    {({ isVisible, toggleVisibility }) => (
      <div>
        <button onClick={toggleVisibility}>Toggle</button>
        {isVisible && <p>Content is visible</p>}
      </div>
    )}
  </Toggle>
);

export default App;

登入後複製

3. 掛鉤

Hooks 是 React 的最新新增功能，它允許您在不編寫類別的情況下使用狀態和其他 React 功能。它們是 HOC 和渲染道具的強大且靈活的替代方案。

自訂掛鉤範例

讓我們建立一個自訂掛鉤來管理可見性狀態：

import { useState } from 'react';

// Hook Personalizado
const useToggle = (initialState = false) => {
  const [isVisible, setIsVisible] = useState(initialState);

  const toggleVisibility = () => setIsVisible(!isVisible);

  return [isVisible, toggleVisibility];
};

// Componente que utiliza o Hook
const App = () => {
  const [isVisible, toggleVisibility] = useToggle();

  return (
    <div>
      <button onClick={toggleVisibility}>Toggle</button>
      {isVisible && <p>Content is visible</p>}
    </div>
  );
};

export default App;

登入後複製

HOC、Render Props 與 Hook 的比較

高階組件 (HOC):
- 何時使用：在不修改程式碼的情況下新增行為給多個元件。
- 好處：邏輯重用，關注點分離。
- 缺點：可能導致組件過度嵌套（包裝地獄）。
渲染道具:
- 何時使用：在元件之間共用複雜的邏輯。
- 優點：組件組成的彈性。
- 缺點：可能導致程式碼更加冗長且可讀性較差。
掛鉤:
- 何時使用：管理功能組件中的狀態和副作用。
- 優點：簡單、簡潔、易於組合。
- 缺點：需熟悉 Hooks API。