Mengelakkan Paparan Semula Tidak Perlu dalam Bertindak balas dengan Berbilang Keadaan

Lazim menggunakan keadaan untuk mengawal bahagian antara muka yang berlainan. Walau bagaimanapun, jika tidak diurus dengan baik, berbilang keadaan boleh menyebabkan pemaparan semula yang tidak perlu, menjejaskan prestasi sistem.

Masalah: Terlalu banyak keadaan === Terlalu banyak paparan semula

Mari bayangkan bahawa kita mempunyai komponen yang menguruskan data pengguna. Kami boleh mengisytiharkan negeri ini secara bebas, seperti ini:

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

Di sini kami mempunyai 6 negeri bebas, setiap kali satu daripada negeri ini dikemas kini, komponen keseluruhan dipaparkan semula, kini bayangkan bahawa kami perlu mengemas kini 6 negeri... ya, kami membuat komponen ini 6 kali.

Penyelesaian: Buat hanya 1 keadaan berkenaan maklumat pengguna

Satu cara untuk mengurangkan masalah ini adalah dengan menggabungkan semua keadaan menjadi satu objek. Daripada mempunyai keadaan yang berasingan, kami boleh menyimpan semua maklumat pengguna dalam satu keadaan, ia akan kelihatan seperti ini:

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

Sekarang, daripada mempunyai fungsi untuk setiap keadaan, kami mempunyai fungsi kemas kiniUser, yang hanya menerima perubahan yang diingini dan menggabungkannya dengan keadaan sebelumnya menggunakan operator spread (...). Ini membolehkan anda mengemas kini hanya sebahagian daripada negeri, manakala selebihnya kekal tidak berubah.

Jika anda ingin menukar hanya 1 maklumat tentang objek, lakukan ini:

setUser((prevState) => ({...prevState, age: 25}))

Perbezaan

Apabila kami menggunakan keadaan berasingan, setiap perubahan keadaan individu menyebabkan pemaparan semula komponen. Apabila kita menyatukan semua keadaan menjadi satu objek, kita masih mempunyai satu pemaparan semula, tetapi ia hanya berlaku sekali, walaupun beberapa bahagian objek berubah.

Kelebihan

- Pengurangan Paparan Semula: Dengan menyatukan keadaan, kami mengelakkan berbilang pemaparan semula yang tidak perlu, meningkatkan prestasi.
- Penyelenggaraan Lebih Mudah: Lebih mudah untuk mengurus maklumat pengguna dalam satu keadaan, memudahkan kod dan menjadikannya lebih mudah dibaca.
- Kemas Kini Separa Terkawal: Kami hanya boleh menukar bahagian negeri yang perlu diubah suai, tanpa menyentuh yang lain.

Itu sahaja! Saya harap saya membantu!!!
Walaupun saya masih membangun, tetapi inilah portfolio saya: https://lucaslima.vercel.app (saya harap apabila anda mengaksesnya, ia sudah siap hahhaha)

Berjaya! ?

Atas ialah kandungan terperinci Mengelakkan Paparan Semula Tidak Perlu dalam Bertindak balas dengan Berbilang Keadaan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!