Amalan Terbaik ReactJS: Menulis Kod Bersih dan Boleh Diselenggara

ReactJS ialah perpustakaan JavaScript yang berkuasa dan popular untuk membina antara muka pengguna yang dinamik. Walau bagaimanapun, apabila aplikasi anda berkembang, mengekalkan kod yang bersih dan teratur menjadi penting untuk memastikan ia berskala, cekap dan boleh dibaca. Berikut ialah beberapa amalan terbaik untuk membantu anda menulis kod React yang bersih dan boleh diselenggara.

1. Atur Struktur Projek Anda Mewujudkan struktur folder yang jelas membantu anda dan pasukan anda mencari fail dengan mudah. Struktur biasa mengikut pendekatan "berasaskan ciri" di mana setiap ciri mempunyai folder sendiri:

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

Memisahkan komponen mengikut ciri (atau tanggungjawab) boleh menjadikan pangkalan kod lebih modular dan lebih mudah untuk dinavigasi semasa ia berkembang.

1. Gunakan Komponen Berfungsi dan Cangkuk React Hooks telah menggantikan komponen kelas dalam banyak kes dan memudahkan kod dengan mengelakkan pengikatan ini. Komponen berfungsi biasanya lebih pendek, lebih mudah dibaca dan lebih mudah untuk diuji.

Contoh:

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

1. Pecah Komponen
   Komponen besar sukar diselenggara dan digunakan semula. Bertujuan untuk mencipta komponen kecil dan fokus yang masing-masing mengendalikan satu tugas. Jika komponen melakukan berbilang perkara, pertimbangkan untuk memecahkannya kepada subkomponen yang lebih kecil.

2. Gunakan PropTypes atau TypeScript
   Penaipan statik React's PropTypes atau TypeScript boleh membantu menangkap ralat jenis lebih awal. Menentukan jenis prop yang dijangka menjadikan komponen lebih mudah diramal dan kurang terdedah kepada ralat.

Contoh dengan PropTypes:

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

Contoh dengan TypeScript:

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

1. Pastikan Logik Komponen Asingkan daripada UI Untuk memastikan kod bersih dan boleh diuji, asingkan logik daripada pembentangan. Contohnya, gunakan cangkuk tersuai untuk mengendalikan logik dan mengurus keadaan, kemudian hantar data sebagai prop kepada komponen yang mengendalikan UI.

Contoh cangkuk tersuai:

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data));
  }, [url]);

  return data;
}

// UI Component:
function DataDisplay({ url }) {
  const data = useFetchData(url);
  return <div>{data ? data.title : 'Loading...'}</div>;
}

1. Gunakan Penamaan Bermakna dan Konsisten Konvensyen penamaan yang konsisten menjadikan kod anda lebih mudah dibaca. Gunakan camelCase untuk fungsi dan pembolehubah, PascalCase untuk nama komponen dan nama deskriptif untuk semua prop dan pembolehubah keadaan.

Contoh:

// Good:
const isLoggedIn = true;
const userProfile = { name: "John", age: 30 };

// Poor:
const x = true;
const obj = { name: "John", age: 30 };

1. Gunakan API Konteks Berhati-hati API Konteks React ialah alat yang berkuasa untuk mengurus keadaan secara global, tetapi penggunaan yang berlebihan boleh menjadikan kod anda rumit dan sukar untuk dinyahpepijat. Gunakannya dengan berhati-hati dan pertimbangkan untuk menggunakan perpustakaan pengurusan negeri seperti Redux atau Zustand untuk aplikasi yang lebih besar.

Contoh:

import React, { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  return (
    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

1. Hafal Fungsi dan Komponen Mahal React memaparkan semula komponen setiap kali komponen induk memaparkan semula. Untuk mengelakkan pemaparan semula yang tidak perlu, gunakan React.memo untuk komponen dan gunakanMemo/useCallback untuk fungsi.

Contoh:

src/
├── components/
│   └── Button/
│       ├── Button.js
│       ├── Button.css
│       └── index.js
├── pages/
│   └── Home.js
└── App.js

1. Gunakan Modul CSS atau Komponen Bergaya Elakkan gaya global dengan menggunakan Modul CSS, komponen gaya atau alatan yang serupa. Ia membantu gaya skop kepada komponen individu, mengurangkan konflik gaya dan meningkatkan kebolehbacaan.

Contoh dengan Modul CSS:

// Instead of class component:
class MyComponent extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return <button onClick={this.increment}>{this.state.count}</button>;
  }
}

// Use functional component with hooks:
import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Contoh dengan Komponen Bergaya:

import PropTypes from 'prop-types';

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

1. Uji Komponen Anda Pengujian memastikan komponen anda berfungsi seperti yang diharapkan dan membantu menangkap pepijat lebih awal. Gunakan Pustaka Pengujian Jest dan React untuk menulis ujian unit bagi komponen dan menyepadukan ujian ke dalam aliran kerja anda.

Contoh Asas dengan Pustaka Pengujian React:

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}</h1>;
};

Kesimpulan

Dengan mengikuti amalan terbaik ini, anda boleh menulis kod React yang bersih, berskala dan mudah diselenggara. Menyusun fail, menggunakan komponen berfungsi, mengasingkan logik daripada UI dan menguji komponen hanyalah beberapa cara untuk menjadikan aplikasi React anda lebih cekap dan menyeronokkan untuk digunakan. Mula gunakan teknik ini dalam projek anda untuk meningkatkan kualiti kod anda dan menjadikan pembangunan masa depan lebih pantas dan menyeronokkan.

Atas ialah kandungan terperinci Amalan Terbaik ReactJS: Menulis Kod Bersih dan Boleh Diselenggara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!