React, kita perlu bercakap tentang Negeri Terbitan!

Apabila bekerja dengan React, anda akan sering menghadapi situasi di mana anda perlu mengubah atau memperoleh nilai berdasarkan keadaan atau prop lain. Konsep ini dikenali sebagai keadaan terbitan dan ia merupakan salah satu alatan yang paling berkuasa dalam kit alat React anda—jika digunakan dengan betul.

“Keadaan Terbitan: Keadaan yang boleh dikira daripada sekeping keadaan sedia ada atau prop dipanggil keadaan terbitan.”

Jadi, mari kita menyelaminya dan bersenang-senang sementara kita melakukannya.

Amalan Buruk: Menapis Senarai Produk

Mari kita mulakan dengan contoh biasa "ops, saya tidak fikir ini" Bayangkan kami mempunyai senarai produk dan kami ingin menapisnya berdasarkan apa yang ditaip pengguna ke dalam input carian. Dalam dunia yang ideal, carian kami harus dikemas kini secara dinamik dan menjadi sangat pantas. Tetapi, mari kita lihat dahulu pendekatan amalan buruk dahulu.

Begini cara kita tidak seharusnya mengendalikan perkara:

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const [products, setProducts] = useState([
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ]);
  const [filteredProducts, setFilteredProducts] = useState(products);

  const handleSearch = (e) => {
    const query = e.target.value;
    setSearchQuery(query);
    setFilteredProducts(
      products.filter(product =>
        product.name.toLowerCase().includes(query.toLowerCase())
      )
    );
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Kenapa amalan buruk ini?

Nampak macam berkesan kan? Input carian disambungkan dan ia menapis produk seperti yang diharapkan.

Tetapi inilah masalahnya: kami menyimpan produk yang ditapis sebagai keadaan yang berasingan. Ini menyebabkan pertindihan data yang tidak perlu. Kami sudah mempunyai produk dalam keadaan dan kami menyimpan hasil operasi penapis dalam keadaan lain, yang membawa kepada potensi pepijat, peningkatan penggunaan memori dan menjadikannya lebih sukar untuk memastikan segala-galanya segerak.

Pada asasnya, kami membuat perkara lebih rumit daripada yang sepatutnya.

Amalan Baik: Menggunakan Keadaan Terbitan

Sekarang, mari kita gunakan sedikit kebijaksanaan React dan betulkan kod di atas menggunakan keadaan terbitan.

Kali ini, daripada mengekalkan dua pembolehubah keadaan berasingan (produk dan Produk ditapis), kami akan memperoleh produk yang ditapis terus daripada tatasusunan produk berdasarkan searchQuery. Dengan cara ini, kita mengelakkan lebihan kerja dan menjaga kebersihan negeri kita.

Ini versi yang dipertingkatkan:

import React, { useState } from 'react';

const ProductList = () => {
  const [searchQuery, setSearchQuery] = useState('');
  const products = [
    { id: 1, name: 'Laptop' },
    { id: 2, name: 'Smartphone' },
    { id: 3, name: 'Headphones' },
    { id: 4, name: 'Smartwatch' },
  ];

  // Derived state: filter products based on the search query
  const filteredProducts = products.filter(product =>
    product.name.toLowerCase().includes(searchQuery.toLowerCase())
  );

  const handleSearch = (e) => {
    setSearchQuery(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleSearch}
        placeholder="Search for a product"
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductList;

Apakah penambahbaikan?

1. Tiada keadaan tambahan untuk produk yang ditapis: Kami tidak lagi menyimpan senarai berasingan Produk yang ditapis. Sebaliknya, kami mengira terus senarai yang ditapis daripada tatasusunan produk dan searchQuery pada setiap paparan.
2. Kod lebih bersih: Komponen lebih ringkas, dengan keadaan yang lebih sedikit untuk diurus. Ini menjadikannya lebih mudah untuk dibaca dan diselenggara.
3. Peningkatan prestasi (semacam): React tidak perlu menjejak pembolehubah keadaan tambahan. Ia hanya memperoleh senarai yang ditapis terus daripada data sedia ada, menjadikan kod lebih ramping dan lebih pantas (walaupun React mengoptimumkan kemas kini, lebih sedikit perubahan keadaan sentiasa lebih baik).

Pendekatan ini mengambil kesempatan daripada keadaan terbitan, di mana produk yang ditapis dikira daripada data sedia ada, dan bukannya menyimpan salinan tambahan data yang ditapis.

Bila Tidak Menggunakan Keadaan Terbitan

Walaupun keadaan terbitan selalunya merupakan pilihan terbaik, ia bukan peluru perak untuk segala-galanya. Jika komponen anda berurusan dengan pengiraan kompleks atau keadaan yang diperlukan merentas berbilang bahagian aplikasi, mungkin lebih baik menggunakan memoisasi atau menyimpan keadaan terbitan itu dalam komponen atau konteks peringkat lebih tinggi.

Tetapi untuk penapisan mudah, pengisihan atau nilai terbitan ringan yang lain, contoh di atas hendaklah menjadi pendekatan anda.

Kesimpulan

Ringkasnya, keadaan terbitan dalam React adalah tentang memastikan benda KERING—jangan ulangi diri sendiri. Daripada menyimpan salinan data yang sama yang tidak diperlukan dalam keadaan, hitung nilai dengan cepat berdasarkan keadaan dan prop yang sedia ada. Ini membawa kepada kod yang lebih bersih dan cekap yang lebih mudah diselenggara. Jadi, apabila anda tergoda untuk menduplikasi data dalam React, fikirkan sama ada anda boleh mengiranya terus daripada sumber lain. Diri masa depan anda akan berterima kasih!

Atas ialah kandungan terperinci React, kita perlu bercakap tentang Negeri Terbitan!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!