React Toolset untuk Pengurusan Kod Cekap

Pengenalan

Dokumentasi ini menggariskan pendekatan komprehensif untuk menstruktur dan mengurus aplikasi React menggunakan set alat dan amalan terbaik yang dipilih susun. Dengan mematuhi garis panduan ini, anda boleh membuat aplikasi berskala, boleh diselenggara dan cekap.

Pengurusan Negeri

Zustand:

• Tujuan: Menyediakan cara yang mudah dan berprestasi untuk mengurus keadaan aplikasi global.
• Kebaikan:
  • API yang jelas dan ringkas.
  • Kemas kini yang cekap dan pengoptimuman prestasi.
  • Penyatuan mudah dengan bahagian lain aplikasi.
• Contoh:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Pertanyaan Reaksi:

• Tujuan: Mengurus pengambilan data tak segerak dan caching.
• Kebaikan:
  • Pengambilan data automatik dan caching.
  • Pengendalian keadaan pemuatan, ralat dan kejayaan yang mudah.
  • Pembatalan pertanyaan terbina dalam dan pengambilan semula.
• Contoh:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Manipulasi Data

Mutasi:

• Tujuan: Mengendalikan mutasi keadaan yang dicetuskan oleh tindakan pengguna atau panggilan API.
• Kebaikan:
  • Logik mutasi terpusat.
  • Penyatuan mudah dengan React Query untuk kemas kini yang optimistik.
• Contoh:

import { useMutation } from 'react-query';

const createUser = async (userData) => {
  const response = await fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(userData),
  });
  return response.json();
};

const CreateUserForm = () => {
  const [createUserMutation] = useMutation(createUser);

  const handleSubmit = (userData) => {
    createUserMutation(userData)
      .then(() => {
        // Handle success
      })
      .catch((error) => {
        // Handle error
      });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Create User</button>
    </form>
  );
};

Pengurusan Meja

Jadual TanStack:

• Tujuan: Menyediakan komponen jadual yang fleksibel dan berprestasi.
• Kebaikan:
  • Boleh disesuaikan dan dipanjangkan.
  • Menyokong set data yang besar dan interaksi yang kompleks.
  • Bersepadu dengan baik dengan React Query untuk pengambilan data.
• Contoh:

import { useTable } from 'tanstack/react-table';

const columns = [
  { header: 'Name', accessor: 'name' },
  { header: 'Email', accessor: 'email' },
];

const data = [
  { name: 'John Doe', email: 'john@example.com' },
  // ...
];

const TableComponent = () => {
  const { getTableProps, getTableBodyProps, headerGroups, rows } = useTable({
    columns,
    data,
  });

  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map((headerGroup) => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map((column) => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => (
          <tr {...row.getRowProps()}>
            {row.cells.map((cell) => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Perpustakaan Komponen

UI Radix:

• Tujuan: Menyediakan koleksi komponen UI tanpa kepala.
• Kebaikan:
  • Boleh disesuaikan dan fleksibel.
  • Memfokus pada fungsi teras tanpa penggayaan.
  • Disepadukan dengan baik dengan standard kebolehaksesan.
• Contoh:

import { Menu } from '@radix-ui/react-menu';

const MenuComponent = () => {
  return (
    <Menu>
      <Menu.Button>Open Menu</Menu.Button>
      <Menu.Items>
        <Menu.Item>Item 1</Menu.Item>
        <Menu.Item>Item 2</Menu.Item>
      </Menu.Items>
    </Menu>
  );
};

CSS Tailwind:

• Tujuan: Rangka kerja CSS mengutamakan utiliti.
• Kebaikan:
  • Pembangunan dan penggayaan pesat.
  • Penggayaan yang konsisten dan boleh diramal.
  • Mudah disesuaikan.
• Contoh:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

Pengurusan Borang

Formik dengan Yup:

• Tujuan: Mengendalikan keadaan borang, pengesahan dan penyerahan.
• Kebaikan:
  • Pengurusan borang yang dipermudahkan.
  • Peraturan pengesahan deklaratif.
  • Penyatuan mudah dengan perpustakaan lain.
• Contoh:

import { useQuery } from 'react-query';

const fetchUsers = async () => {
  const response = await fetch('https://api.example.com/users');
  return response.json();
};

const UsersList = () => {
  const { isLoading, isError, data, error } = useQuery('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (isError) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

Skrip Jenis

• Tujuan: Superset JavaScript yang ditaip secara statik.
• Kebaikan:
  • Kualiti dan kebolehselenggaraan kod yang dipertingkatkan.
  • Pengesanan awal ralat.
  • Keselamatan jenis yang lebih baik dan penyelesaian kod.

Struktur Projek

src/
├── komponen/
│ ├── Butang.jsx
│ ├── Input.jsx
│ └── ...
├── halaman/
│ ├── Home.jsx
│ │ komponen/
│ │ ├── Hero.jsx
│ │ └── ...
│ ├── About.jsx
│ └── ...
├── lib/
│ ├── utils.js
│ └── ...
├── tindakan/
│ ├── api.js
│ └── ...
├── kedai/
│ ├── counterStore.js
│ └── ...

Kesimpulan

Dengan mengikuti garis panduan ini dan menggunakan alatan yang disyorkan, anda boleh membina aplikasi React yang teguh, berskala dan boleh diselenggara. Pendekatan ini menggalakkan organisasi kod, kebolehgunaan semula dan pengurusan negeri yang cekap, menghasilkan pengalaman pembangunan yang lebih baik dan perisian berkualiti tinggi.

Atas ialah kandungan terperinci React Toolset untuk Pengurusan Kod Cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!