Corak Reka Bentuk dalam React [HOCs, Render Props, Hooks]

pengenalan

Corak reka bentuk terbukti penyelesaian kepada masalah biasa dalam pembangunan perisian. Dalam React, menggunakan corak ini boleh menjadikan kod anda lebih modular, boleh digunakan semula dan lebih mudah diselenggara. Dalam artikel ini, kami akan meneroka beberapa corak reka bentuk yang paling biasa dan berguna dalam React: Higher Order Components (HOCs), Render Props dan Hooks.

1. Komponen Pesanan Tinggi (HOC)

Komponen Pesanan Tinggi (HOC) ialah fungsi yang menerima komponen dan mengembalikan komponen baharu dengan fungsi tambahan. Ia sering digunakan untuk menambah logik biasa kepada berbilang komponen.

Contoh HOC

Mari kita buat HOC ringkas yang menambahkan fungsi pengelogan dengan mengklik butang:

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

Render Props ialah teknik yang membolehkan anda berkongsi logik antara komponen menggunakan prop yang nilainya adalah fungsi. Fungsi ini menerima data yang diperlukan untuk memaparkan kandungan.

Contoh Props Render

Mari kita cipta komponen yang mengurus keadaan keterlihatan dan menyediakan logik ini melalui prop render:

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. Mata kail

Cangkuk ialah tambahan terbaru pada React yang membolehkan anda menggunakan keadaan dan fungsi React yang lain tanpa menulis kelas. Ia adalah alternatif yang berkuasa dan fleksibel kepada HOC dan Render Props.

Contoh Cangkuk Tersuai

Mari kita buat cangkuk tersuai untuk mengurus keadaan keterlihatan:

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;

Perbandingan antara HOC, Render Props dan Cangkuk

• Komponen Pesanan Tinggi (HOC):

  • Bila hendak digunakan: Tambahkan gelagat pada berbilang komponen tanpa mengubah suai kod anda.
  • Faedah: Penggunaan semula logik, pengasingan kebimbangan.
  • Keburukan: Boleh menyebabkan sarang komponen yang berlebihan (neraka pembalut).

• Render Props:

  • Bila hendak digunakan: Kongsi logik kompleks antara komponen.
  • Faedah: Fleksibiliti dalam komposisi komponen.
  • Kelemahan: Boleh membawa kepada kod yang lebih bertele-tele dan kurang boleh dibaca.

• Kail:

  • Bila hendak digunakan: Urus keadaan dan kesan sampingan dalam komponen berfungsi.
  • Faedah: Kesederhanaan, ringkas, mudah gubahan.
  • Kelemahan: Memerlukan kebiasaan dengan API Hooks.

Kesimpulan

Setiap corak reka bentuk dalam React mempunyai kes penggunaan dan faedahnya sendiri. Komponen Pesanan Tinggi (HOC) berguna untuk menambahkan gelagat biasa pada berbilang komponen, manakala Render Props membolehkan anda berkongsi logik kompleks secara fleksibel. Cangkuk, seterusnya, menyediakan cara yang mudah dan berkuasa untuk menguruskan keadaan dan kesan sampingan dalam komponen berfungsi. Memilih corak yang betul bergantung pada keperluan khusus projek anda dan pilihan pasukan anda.

Melaksanakan corak reka bentuk ini dalam aplikasi React anda boleh menjadikan kod anda lebih modular, boleh digunakan semula dan lebih mudah untuk diselenggara, menghasilkan pangkalan kod yang lebih mantap dan berskala.

Saya harap artikel ini berguna kepada anda. Jika anda mempunyai sebarang soalan atau cadangan, sila komen!

Atas ialah kandungan terperinci Corak Reka Bentuk dalam React [HOCs, Render Props, Hooks]. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!