Scaling React Apps dengan Komponen Senarai Boleh Digunakan Semula

Membina aplikasi berskala dalam React memerlukan lebih daripada logik perniagaan yang kukuh. Seni bina komponen anda memainkan peranan penting dalam bagaimana aplikasi anda boleh diselenggara, berprestasi dan fleksibel apabila ia berkembang. Salah satu tugas asas dalam banyak aplikasi web ialah mengendalikan senarai data. Sama ada memaparkan penyenaraian produk, jadual atau papan pemuka, anda akan sering menghadapi senario yang memerlukan struktur senarai yang boleh berulang dan boleh digunakan semula.

Dengan membina komponen senarai boleh guna semula, anda boleh mengurangkan kerumitan pangkalan kod anda dengan ketara sambil meningkatkan kebolehselenggaraan dan kebolehskalaan. Catatan blog ini akan meneroka cara membina komponen senarai boleh guna semula dalam React, sebab penting untuk menskalakan aplikasi dan memberikan contoh kod yang meluas untuk membantu membimbing anda melalui proses tersebut.

Mengapa Kebolehgunaan Semula Penting untuk Scaling React Apps

Kebolehgunaan semula adalah kunci untuk menskalakan apl React. Daripada menduplikasi kod untuk mengendalikan komponen senarai yang berbeza merentas apl anda, membina komponen senarai boleh guna semula membolehkan anda mengabstrak logik biasa dan struktur UI ke dalam komponen kendiri. Ini membolehkan komponen React anda berkembang secara modular dan menghalang pertindihan kod, yang boleh membawa kepada potensi pepijat dan isu penyelenggaraan apabila apl anda berkembang.

Dengan mencipta komponen boleh guna semula, anda boleh memasukkan pelbagai prop untuk mengawal pemaparan senarai, sekali gus menjadikan aplikasi anda lebih dinamik dan fleksibel tanpa menulis semula logik yang sama untuk setiap kes penggunaan. Pendekatan ini bukan sahaja menjadikan apl anda berskala tetapi juga meningkatkan pengalaman pembangun dengan memudahkan kebolehbacaan dan kebolehselenggaraan kod.

Konsep Teras Komponen Senarai Boleh Digunakan Semula

Untuk membina komponen senarai boleh guna semula boleh skala, anda perlu memahami beberapa konsep React:

Props dan Keadaan: Ini membolehkan anda menghantar data ke komponen anda dan mengawal gelagat dalaman komponen anda, masing-masing.

Kaedah Tatasusunan: Kaedah seperti .map(), .filter(), dan .reduce() adalah penting untuk mengubah tatasusunan dalam komponen React.

Komposisi berbanding Warisan: Dalam React, corak gubahan lebih diutamakan daripada warisan. Anda boleh membina UI yang kompleks dengan menggabungkan komponen yang lebih kecil dan boleh diguna semula.

UI Didorong Prop: Komponen senarai boleh guna semula hendaklah didorong oleh prop. Ini membolehkan anda menghantar data yang berbeza, logik pemaparan dan juga gaya daripada komponen induk.

Contoh 1: Komponen Senarai Mudah Digunakan Semula

Mari kita mulakan dengan mencipta komponen senarai yang ringkas dan boleh digunakan semula yang boleh menerima pelbagai item sebagai prop dan menjadikannya secara dinamik:

import React from 'react';

const SimpleList = ({ items }) => {
  return (
    ff6d136ddc5fdfeffaf53ff6ee95f185
      {items.map((item, index) => (
        ba933d1ba6eb3b125bac48a5e6256165{item}bed06894275b65c1ab86501b08a632eb
      ))}
    929d1f5ca49e04fdcb27f9465b944689
  );
};

export default SimpleList;

Dalam contoh ini, SimpleList menerima prop item, iaitu tatasusunan. Kami menggunakan fungsi .map() untuk lelaran melalui tatasusunan dan menjadikan setiap item di dalam senarai tidak tersusun (

). Setiap item dibalut dengan elemen
• . Penyangga utama memastikan bahawa React boleh mengemas kini DOM dengan cekap apabila senarai berubah.

  Contoh Penggunaan:
  

  import React from 'react';
  import SimpleList from './SimpleList';
  
  const App = () => {
    const fruits = ['Apple', 'Banana', 'Orange', 'Mango'];
  
    return (
      <div>
        <h1>Fruit List</h1>
        <SimpleList items={fruits} />
      </div>
    );
  };
  
  export default App;
  

  Contoh ini memaparkan senarai asas buah-buahan. Komponen ini cukup fleksibel sehingga anda boleh menghantar sebarang tatasusunan data kepadanya.

  Meningkatkan Kebolehgunaan Semula Komponen Senarai

  Walaupun contoh di atas berfungsi, ia sangat terhad. Dalam aplikasi dunia nyata, anda selalunya perlu mengendalikan keperluan yang lebih kompleks seperti memaparkan item senarai secara bersyarat, menggunakan gaya tersuai atau menambahkan pendengar acara pada item individu.

  Mari jadikan SimpleList kami lebih boleh diguna semula dengan membenarkan logik render tersuai melalui prop render.

  Contoh 2: Menggunakan Props Render untuk Rendering Senarai Tersuai

  Render props ialah corak dalam React yang membolehkan anda mengawal perkara yang dipaparkan dalam komponen. Begini cara anda boleh menggunakan corak ini untuk membenarkan pemaparan tersuai item senarai:
  

  const ReusableList = ({ items, renderItem }) => {
    return (
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {renderItem(item)}
          </li>
        ))}
      </ul>
    );
  };
  

  Dalam kes ini, komponen ReusableList menerima prop renderItem, yang merupakan fungsi yang mengambil item dan mengembalikan JSX. Ini menyediakan cara yang fleksibel untuk mengawal cara setiap item senarai dipaparkan.

  Contoh Penggunaan:
  

  const App = () => {
    const users = [
      { id: 1, name: 'John Doe', age: 30 },
      { id: 2, name: 'Jane Smith', age: 25 },
    ];
  
    return (
      <div>
        <h1>User List</h1>
        <ReusableList
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  Dalam contoh ini, prop renderItem membolehkan kami menyesuaikan cara setiap pengguna dipaparkan. Kini kita boleh menggunakan semula komponen senarai yang sama untuk sebarang struktur data, menjadikannya mengikut kes penggunaan tertentu.

  Contoh 3: Membuat Komponen Senarai Boleh Diperluaskan dengan Komponen Tertib Tinggi

  Satu lagi corak berkuasa dalam React ialah Komponen Pesanan Tinggi (HOC). HOC ialah fungsi yang mengambil komponen dan mengembalikan komponen baharu dengan fungsi tambahan.

  Sebagai contoh, jika kami ingin meningkatkan ReusableList kami dengan gelagat tambahan seperti pengambilan data atau pemaparan bersyarat, kami boleh menggunakan HOC.
  

  const withLoading = (Component) => {
    return function WithLoadingComponent({ isLoading, ...props }) {
      if (isLoading) return <p>Loading...</p>;
      return <Component {...props} />;
    };
  };
  

  Di sini, withLoading HOC menambah gelagat pemuatan pada mana-mana komponen. Mari gunakannya pada ReusableList kami:
  

  const EnhancedList = withLoading(ReusableList);
  
  const App = () => {
    const [isLoading, setIsLoading] = React.useState(true);
    const [users, setUsers] = React.useState([]);
  
    React.useEffect(() => {
      setTimeout(() => {
        setUsers([
          { id: 1, name: 'John Doe', age: 30 },
          { id: 2, name: 'Jane Smith', age: 25 },
        ]);
        setIsLoading(false);
      }, 2000);
    }, []);
  
    return (
      <div>
        <h1>User List</h1>
        <EnhancedList
          isLoading={isLoading}
          items={users}
          renderItem={(user) => (
            <div>
              <h2>{user.name}</h2>
              <p>Age: {user.age}</p>
            </div>
          )}
        />
      </div>
    );
  };
  

  In this example, the withLoading HOC wraps around ReusableList, adding loading state management to it. This pattern promotes code reuse by enhancing components with additional logic without modifying the original component.

  Example 4: Advanced List Components with Hooks

  With React hooks, we can take reusable list components to another level by integrating stateful logic directly into the components. Let’s build a reusable list that can handle pagination.
  

  const usePagination = (items, itemsPerPage) => {
    const [currentPage, setCurrentPage] = React.useState(1);
    const maxPage = Math.ceil(items.length / itemsPerPage);
  
    const currentItems = items.slice(
      (currentPage - 1) * itemsPerPage,
      currentPage * itemsPerPage
    );
  
    const nextPage = () => {
      setCurrentPage((prevPage) => Math.min(prevPage + 1, maxPage));
    };
  
    const prevPage = () => {
      setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
    };
  
    return { currentItems, nextPage, prevPage, currentPage, maxPage };
  };
  

  The usePagination hook encapsulates pagination logic. We can now use this hook within our list component.
  

  const PaginatedList = ({ items, renderItem, itemsPerPage }) => {
    const { currentItems, nextPage, prevPage, currentPage, maxPage } = usePagination(
      items,
      itemsPerPage
    );
  
    return (
      <div>
        <ul>
          {currentItems.map((item, index) => (
            <li key={index}>{renderItem(item)}</li>
          ))}
        </ul>
        <div>
          <button onClick={prevPage} disabled={currentPage === 1}>
            Previous
          </button>
          <button onClick={nextPage} disabled={currentPage === maxPage}>
            Next
          </button>
        </div>
      </div>
    );
  };
  

  Usage Example:
  

  const App = () => {
    const items = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);
  
    return (
      <div>
        <h1>Paginated List</h1>
        <PaginatedList
          items={items}
          itemsPerPage={10}
          renderItem={(item) => <div>{item}</div>}
        />
      </div>
    );
  };
  

  This example demonstrates a paginated list where users can navigate through pages of items. The hook handles all pagination logic,

  making it reusable across different components.

  Conclusion

  Building reusable list components in React is a fundamental practice for creating scalable applications. By abstracting common logic, using patterns like render props, higher-order components, and hooks, you can create flexible, extensible, and maintainable list components that adapt to different use cases.

  As your React application grows, adopting reusable components not only simplifies your codebase but also enhances performance, reduces redundancy, and enables rapid iteration on new features. Whether you're handling simple lists or more complex UI requirements, investing time in creating reusable components will pay off in the long run.

  References

  React Official Documentation
  
  React Render Props
  
  React Higher-Order Components
  
  React Hooks

Atas ialah kandungan terperinci Scaling React Apps dengan Komponen Senarai Boleh Digunakan Semula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!