Kod Reaksi Pemfaktoran Semula adalah seperti mengubah dapur yang huru-hara menjadi syurga kuliner yang tersusun. Ini mengenai memperbaik struktur, kebolehselenggaraan dan prestasi apl anda tanpa mengubah fungsinya. Sama ada anda sedang bertarung dengan komponen kembung atau logik keadaan kusut, refactor yang dirancang dengan baik mengubah pangkalan kod anda menjadi mesin yang anggun dan cekap.

Blog ini mendedahkan senario pemfaktoran semula biasa, menyediakan penyelesaian yang boleh diambil tindakan dan melengkapkan anda untuk membuka kunci potensi sebenar apl React anda.

Saya. Apakah Pemfaktoran Semula dan Mengapa Ia Penting?

Pemfaktoran semula memperbaik struktur kod anda tanpa mengubah fungsinya. Ini bukan tentang membetulkan pepijat atau menambah ciri—ini tentang menjadikan kod anda lebih baik untuk manusia dan mesin.

Kenapa Refactor?

1. Kebolehbacaan: Menyahpepijat kod pada 3 PG menjadi lebih mudah apabila ia dibaca seperti novel yang bagus dan bukannya teka-teki samar.
2. Kebolehselenggaraan: Pangkalan kod yang bersih menjimatkan berjam-jam masa onboarding dan mempercepatkan kemas kini.
3. Prestasi: Kod yang lebih bersih sering diterjemahkan kepada masa pemuatan yang lebih pantas dan pengalaman pengguna yang lebih lancar.

? Petua Pro: Elakkan pengoptimuman pramatang. Faktorkan semula apabila terdapat keperluan yang jelas, seperti meningkatkan pengalaman pembangun atau menangani pemaparan yang perlahan.

II. Menghidu Bau Kod

Bau kod ialah isyarat halus ketidakcekapan atau kerumitan. Ia bukan ralat, tetapi ia menunjukkan bahagian yang memerlukan penambahbaikan.

Bau Kod Reaksi Biasa

1. Komponen Kembung
   • Masalah: Satu komponen mengendalikan terlalu banyak tanggungjawab, seperti mengambil data, rendering dan mengendalikan acara.

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <ProductItem key={item.id} item={item} />)}
         <button onClick={handleAddToCart}>Add to Cart</button>
       </div>
     );
   }

• Penyelesaian: Pecahkan kepada komponen yang lebih kecil dan fokus.

   function ProductPage() {
     return (
       <div>
         <ProductList />
         <CartButton />
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <ProductItem key={item.id} item={item} />);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onClick={handleAddToCart}>Add to Cart</button>;
   }

1. Penggerudian Prop
   • Masalah: Melepasi prop melalui berbilang lapisan komponen.

   <App>
     <ProductList product={product} />
   </App>

• Penyelesaian 1: Gunakan gubahan.

   <ProductList>
     <ProductItem product={product} />
   </ProductList>

• Penyelesaian 2: Gunakan Konteks.

   const ProductContext = React.createContext();

   function App() {
     const [product, setProduct] = useState({ id: 1, name: 'Example Product' }); // Example state
     return (
       <ProductContext.Provider value={product}>
         <ProductList />
       </ProductContext.Provider>
     );
   }

   function ProductList() {
     const product = useContext(ProductContext);
     return <ProductItem product={product} />;
   }

1. Neraka Ternary Bersarang
   • Masalah: Paparan bersyarat yang kompleks menggunakan ternari bersarang.

   return condition1 ? a : condition2 ? b : condition3 ? c : d;

• Penyelesaian: Refactor menggunakan fungsi pembantu atau pernyataan suis.

   function renderContent(condition) {
     switch (condition) {
       case 1: return a;
       case 2: return b;
       case 3: return c;
       default: return d;
     }
   }

   return renderContent(condition);

1. Logik Pendua
   • Masalah: Mengulang logik yang sama merentas komponen.

   function calculateTotal(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

• Penyelesaian: Alihkan logik yang dikongsi ke dalam utiliti boleh guna semula atau cangkuk tersuai.

   function calculateTotalPrice(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

   function useTotalPrice(cart) {
     return useMemo(() => calculateTotalPrice(cart), [cart]);
   }

1. Keadaan Berlebihan
   • Masalah: Menguruskan keadaan terbitan secara langsung.

   const [isLoggedIn, setIsLoggedIn] = useState(user !== null);

• Penyelesaian: Sebaliknya gunakan keadaan terbitan.

   const isLoggedIn = !!user; // Converts 'user' to boolean

III. Memudahkan Pengurusan Negeri

Pengurusan negeri adalah penting tetapi boleh menjadi huru-hara dengan cepat. Begini cara untuk memudahkannya:

Keadaan Terbitan: Kira, Jangan Simpan

• Masalah: Menyimpan keadaan berlebihan.
• Penyelesaian: Kira nilai terbitan terus daripada sumber.

  const [cartItems, setCartItems] = useState([]);
  const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);

Gunakan useReducer untuk Keadaan Kompleks

• Masalah: Berbilang keadaan saling bergantung.
• Penyelesaian: Gunakan useReducer.

  const initialState = { count: 0 };
  function reducer(state, action) {
    switch (action.type) {
      case 'increment': return { count: state.count + 1 };
      default: return state;
    }
  }
  const [state, dispatch] = useReducer(reducer, initialState);

Kolokasi Negeri

• Masalah: Keadaan global digunakan untuk data setempat.
• Penyelesaian: Alihkan keadaan lebih dekat ke tempat yang diperlukan.

  // Before:
  function App() {
    const [filter, setFilter] = useState('');
    return <ProductList filter={filter} onFilterChange={setFilter} />;
  }

  // After:
  function ProductList() {
    const [filter, setFilter] = useState('');
    return <FilterInput value={filter} onChange={setFilter} />;
  }

IV. Komponen Pemfaktoran Semula

Komponen harus melakukan satu kerja dan melakukannya dengan baik. Contohnya:

Satu Kerja Setiap Komponen

function MemberCard({ member }) {
  return (
    <div>
      <Summary member={member} />
      <SeeMore details={member.details} />
    </div>
  );
}

V. Pengoptimuman Prestasi

React Profiler

Gunakan Profiler untuk mengenal pasti kesesakan. Aksesnya dalam Alat Pembangun di bawah "Profiler."

Hafazan

Optimumkan pengiraan mahal:

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <ProductItem key={item.id} item={item} />)}
         <button onClick={handleAddToCart}>Add to Cart</button>
       </div>
     );
   }

Nota: Elakkan menggunakan memoisasi secara berlebihan untuk kebergantungan yang kerap dikemas kini.

VI. Pemfaktoran semula untuk Kebolehujian

Tulis ujian berpusatkan pengguna:

   function ProductPage() {
     return (
       <div>
         <ProductList />
         <CartButton />
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <ProductItem key={item.id} item={item} />);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onClick={handleAddToCart}>Add to Cart</button>;
   }

VII. Sentuhan Akhir untuk Kebolehselenggaraan

1. Susun mengikut ciri:

   <App>
     <ProductList product={product} />
   </App>

1. Gunakan import mutlak:

   <ProductList>
     <ProductItem product={product} />
   </ProductList>

VIII. Lembaran curang

Atas ialah kandungan terperinci Tindak Balas Pemfaktoran Semula: Menjinakkan Kekacauan, Satu Komponen pada Satu Masa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!