Bagaimana untuk mengemas kini keadaan dalam Konteks dalam React.js tanpa memberikan komponen semula?

Question

Jadi pada asasnya saya menggunakan API Peta Google dan apabila saya mengklik pada bangunan ia menunjukkan modal dengan beberapa maklumat. Keadaan mod adalah dalam konteks dan dikemas kini melalui acara klik pada peta. Apa yang berlaku ialah apabila keadaan mengemas kini, ia memaparkan semula keseluruhan Peta semula (menjadikannya lebih kecil) kerana keadaan dikemas kini daripada komponen Peta itu sendiri. Bagaimanakah saya boleh mengemas kini keadaan konteks tetapi tidak mempunyai pemaparan semula peta?

Saya cuba menggunakan memo dan useCallback tetapi memandangkan prop sedang dikemas kini (konteks) ia memaparkan semula peta sekali lagi.

Answer 1

Jika peta anda menggunakan nilai daripada konteks yang kerap berubah, tiada cara untuk menghalang pemaparan semula. Jika anda berbuat demikian, ia tidak akan berfungsi lagi

useContext(Context) membuat komponen anda dipaparkan semula apabila nilai dalam pembekal berubah. Tidak kira apa yang anda gunakan dalam konteks komponen, ia akan dipaparkan semula jika anda menggunakan useContext . Anda tidak boleh menghalang ini, itulah cara konteks berfungsi. Walau bagaimanapun, jika komponen anda menggunakan sesuatu dalam konteks yang tidak kerap berubah, terdapat teknik yang boleh anda gunakan untuk menghentikan pemaparan semula.

Buat komponen baharu yang menggunakan komponen yang anda ingin ingat. Konteksnya dipanggil di sana. Hantarkannya sebagai prop kepada komponen anda. Gunakan React.memo pada komponen anda. Tetapi anda perlu memastikan bahawa semua sifat yang dihantar kepada komponen diingati.

Selain itu, anda boleh menggunakan hujah kedua dalam memo untuk mengecualikan perkara yang tidak menyimpan rujukan antara pemaparan (tidak disyorkan jika anda tidak tahu apa yang anda lakukan, ia boleh menyebabkan isu penutupan)

const YourComponent = React.memo(({someContextValue}) => ...)
const YourNewComponent = () => {
   const {someContextValue} = useContext(SomeContext)
   // here someContextValue is a thing that does not change its value often
   return 
}

Maka anda perlu menggunakan YourNewComponent dan bukannya komponen anda