React組件的復用策略與案例分析

React組件的復用策略主要依賴于組件化開發的思想，即將復雜的UI拆分成多個獨立的、可復用的組件。這樣可以提高代碼的可維護性、可讀性和可測試性。以下是一些常見的React組件復用策略及案例分析：

1. 函數組件

函數組件是最簡單的復用策略。你可以創建一個通用的函數組件，然后在其他組件中通過props傳遞參數來使用它。

// 通用函數組件
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 使用函數組件
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

2. 類組件

類組件也可以通過props傳遞參數來復用。

// 通用類組件
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 使用類組件
function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

3. 高階組件（HOC）

高階組件是一種更高級的復用策略，它允許你創建一個組件，該組件可以包裝另一個組件并添加額外的功能。

// 高階組件
function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log(`Logged: ${WrappedComponent.name} mounted`);
    }

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

// 使用高階組件
class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

const LoggedGreeting = withLogging(Greeting);

function App() {
  return (
    <div>
      <LoggedGreeting name="Alice" />
      <LoggedGreeting name="Bob" />
    </div>
  );
}

4. 組合組件

組合組件是一種通過將多個組件組合在一起來復用邏輯的方法。

// 組合組件
function Header() {
  return <h1>Header</h1>;
}

function Content() {
  return <p>Content</p>;
}

function Footer() {
  return <p>Footer</p>;
}

// 使用組合組件
function App() {
  return (
    <div>
      <Header />
      <Content />
      <Footer />
    </div>
  );
}

5. 渲染屬性（Render Props）

渲染屬性是一種通過props傳遞函數來復用組件邏輯的方法。

// 渲染屬性
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  function GreetingRenderer(props) {
    return <Greeting name={props.name} />;
  }

  return (
    <div>
      <GreetingRenderer name="Alice" />
      <GreetingRenderer name="Bob" />
    </div>
  );
}

案例分析

假設我們要創建一個通用的表單組件，可以用于不同的場景（如登錄表單、注冊表單等）。

// 通用表單組件
function Form(props) {
  const { fields, onSubmit } = props;

  return (
    <form onSubmit={onSubmit}>
      {fields.map((field, index) => (
        <div key={index}>
          <label htmlFor={field.id}>{field.label}</label>
          <input type={field.type} id={field.id} />
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
}

// 使用通用表單組件
function LoginForm() {
  const fields = [
    { id: 'username', label: 'Username', type: 'text' },
    { id: 'password', label: 'Password', type: 'password' }
  ];

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', fields);
  };

  return (
    <Form fields={fields} onSubmit={handleSubmit} />
  );
}

function RegisterForm() {
  const fields = [
    { id: 'email', label: 'Email', type: 'email' },
    { id: 'password', label: 'Password', type: 'password' },
    { id: 'confirmPassword', label: 'Confirm Password', type: 'password' }
  ];

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', fields);
  };

  return (
    <Form fields={fields} onSubmit={handleSubmit} />
  );
}

function App() {
  return (
    <div>
      <LoginForm />
      <RegisterForm />
    </div>
  );
}

在這個案例中，我們創建了一個通用的Form組件，通過props傳遞fields和onSubmit函數來復用表單邏輯。然后我們創建了兩個具體的表單組件LoginForm和RegisterForm，分別用于登錄和注冊場景。

通過這些策略，我們可以有效地復用React組件，提高代碼的可維護性和可擴展性。