cari

Rumah  >  Soal Jawab  >  teks badan

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

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.

P粉322319601P粉322319601271 hari yang lalu436

membalas semua(1)saya akan balas

  • P粉590428357

    P粉5904283572024-02-26 16:12:50

    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

    balas
    0
  • Batalbalas