Derivasi dinamik dan cara untuk membunuh useEffect

Tajuknya sedikit "umpan klik", tetapi ideanya tidak salah.

Saya tidak mempunyai pendapat bahawa useEffect adalah cangkuk yang buruk, sebenarnya ia adalah sebaliknya. Tetapi dalam React, yang berfungsi sebagai mesin terbitan, untuk menggunakan useEffect untuk penyegerakan keadaan bukanlah pilihan terbaik dan tidak disyorkan oleh pasukan teras.

Tetapi tunggu, dan jika saya mempunyai kes di mana saya perlu menyegerakkan keadaan?

Ya, ini adalah kes yang sangat jarang berlaku dan mungkin terdapat pilihan penyelesaian yang lebih baik, tetapi bayangkan kami mempunyai siaran dalam apl dan kami mahu mempunyai keadaan setempat untuk mengendalikan kemas kini yang optimistik, apabila pengguna mengklik butang suka, tetapi ia menyegerakkan dengan keadaan luaran (datang dari bahagian belakang) untuk benar-benar mengetahui sama ada perkara seperti itu berlaku.

Terbitan boleh ubah

Ini adalah kes di mana kita memerlukan primitif di mana kita boleh melakukan keadaan dan terbitan pada masa yang sama. Dari segi konsep, kita boleh menganggapnya sebagai terbitan boleh ubah. Ryan Carniato mempunyai catatan blog yang bagus tentangnya, tetapi terdapat beberapa batasan yang berkaitan dengan cara React menguruskan kereaktifan, tetapi primitif baharu ini akan menjadi terbitan dan keadaan hanya dalam satu:
Terbitan sebagai gelagat lalai, mendapatkan sumber kebenaran terkini yang dikemas kini (prop data datang daripada pelayan).
Nyatakan apabila pengguna mengklik butang suka. Perubahan ini bersifat sementara dan akan ditimpa pada perubahan kebergantungan seterusnya.

Kami tidak mempunyainya di React, sudah tentu, tetapi kami boleh membayangkan primitif seperti itu. Perkara positifnya:

• ia mengeluarkan satu lagi bekas penggunaan daripada useEffect.
• ia menjelaskan bahawa kita mempunyai terbitan yang boleh dikendalikan sebagai keadaan.

gunakanMemoState

const [internalState, setInternalState] = useMemoState(() => data, [data]);

Cangkuk menerima dua argumen seperti useMemo biasa, sebagai yang pertama fungsi memo, yang akan dilaksanakan pada kali pertama biasanya, nilai yang dikembalikan ialah keadaan. Argumen kedua ialah tatasusunan kebergantungan yang terkenal, untuk menjejaki nilai dan mengira semula memo jika perlu. Ia mengembalikan tuple dengan dua nilai, nilai keadaan/memo dan penetap yang akan mengubah keadaan buat sementara waktu.

Menggunakan cangkuk adalah seperti contoh ini:

function MemoState ({ data }: { data: State}) {
  const [internalState, setInternalState] = useMemoState(() => data, [data]);

  return (
    

      
name: {internalState?.title}
      
{internalState?.like ? "liked post" : "not liked post"}
       {
        // likePost();
        setInternalState(state => ({
          ...state,
          like: !state.like
        }))
      }}>Like Button
    
  )
}

Dengan cara ini anda mengalih keluar keperluan useEffect di sini, mengetahui dengan tepat apa yang dilakukan dan mampu cangkuk ini, dan mengisi jurang konsep ini, di mana masalah kita memerlukan keadaan dan terbitan pada masa yang sama. Ironinya, ia menghilangkan keperluan untuk kesan sebagai akibatnya.

Bagaimanakah kita boleh melakukan sesuatu yang serupa dalam React?

Untuk mematuhi peraturan React dan memastikan cangkuk selamat, kami perlu menggunakan useEffect untuk mencipta sesuatu yang serupa dalam React hari ini. Saya tidak fikir cangkuk seperti itu akan dibuat pada masa hadapan, tetapi siapa tahu, bukan?

Untuk mengelakkan penggunaan useEffect di sini, kami perlu menggunakan beberapa kod luaran seperti perpustakaan negeri mini untuk mengendalikannya, atau jika kami ingin mengekalkan primitif React yang ketat, gunakan useRef untuk mengekalkan penyegerakan nilai.

Masalah dengan pendekatan ini ialah ia melanggar peraturan React dan ia tidak disyorkan oleh dokumen. Kerana satu-satunya cara untuk ia berfungsi tanpa kesan, adalah dengan menyegerakkan ref semasa pemaparan komponen, tidak selamat sama sekali.

Jadi, untuk memastikannya mudah dan selamat, contoh cangkuk adalah seperti itu:

const [internalState, setInternalState] = useMemoState(() => data, [data]);

Atas ialah kandungan terperinci Derivasi dinamik dan cara untuk membunuh useEffect. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!