React Academy · Pelajaran

Memoisasi Nilai Konteks dengan useMemo

Balut objek nilai konteks dalam useMemo supaya pengguna tidak melakukan pemaparan semula yang tidak perlu.

Pelajaran 2 daripada 413 langkah

Memoisasi Nilai Konteks dengan useMemo ialah pelajaran React Academy percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Selamat datang

Dalam pelajaran ini, Anda akan belajar sebab objek nilai konteks mesti dimemoisasi dengan useMemo dan cara menyediakan kebergantungan dengan betul untuk mengelakkan pemaparan semula yang tidak diperlukan.

Masalah Rujukan Objek

Setiap kali komponen penyedia dipaparkan semula, literal objek baharu `{ ... }` dicipta sebagai nilai konteks — walaupun kandungannya sama. Semua pengguna dipaparkan semula kerana rujukannya berubah.

// Every render creates a new object!
<UserCtx.Provider value={{ user, logout }}>
  {children}
</UserCtx.Provider>

Membaiki dengan useMemo

Bungkus nilai konteks dalam useMemo supaya rujukan objek yang sama dikembalikan antara pemaparan apabila tiada perkara dalam tatasusunan kebergantungan berubah.

const value = useMemo(
  () => ({ user, logout }),
  [user, logout]
);

<UserCtx.Provider value={value}>
  {children}
</UserCtx.Provider>

Memilih Kebergantungan dengan Teliti

Sertakan setiap nilai yang digunakan dalam useMemo dalam tatasusunan kebergantungan. Kebergantungan yang tertinggal menyebabkan nilai lapuk. Sertakan sifat primitif seperti rentetan dan nombor serta rujukan stabil seperti fungsi yang dibungkus dalam useCallback.

Fungsi Stabil dengan useCallback

Nilai fungsi menukar rujukan pada setiap pemaparan. Bungkusnya dalam useCallback sebelum memasukkannya ke dalam nilai konteks useMemo untuk mencegah pemaparan semula yang tidak diperlukan.

const logout = useCallback(() => {
  clearSession();
  setUser(null);
}, []);

const value = useMemo(() => ({ user, logout }), [user, logout]);

Apabila Memoisasi Tidak Diperlukan

Jika komponen penyedia tidak pernah dipaparkan semula, contohnya kerana ia berada di bahagian paling atas pepohon dan induknya tidak pernah berubah, useMemo menambah beban tanpa manfaat. Memoisasikan hanya apabila penyedia itu sendiri dipaparkan semula.

Nilai Primitif Sudah Stabil

Jika nilai konteks Anda ialah primitif seperti rentetan, nombor atau boolean, Anda NOT perlu menggunakan useMemo — primitif dibandingkan berdasarkan nilai, bukan rujukan. `value={isDark}` tidak akan menyebabkan pemaparan semula tambahan.

// No useMemo needed for primitives
<ThemeCtx.Provider value={isDark ? 'dark' : 'light'}>
  {children}
</ThemeCtx.Provider>

Membuat Profil Kesan Memoisasi

Gunakan React DevTools Profiler untuk mengesahkan bahawa pembungkusan nilai konteks dalam useMemo benar-benar mengurangkan pemaparan semula. Rakam satu sesi sebelum dan selepas untuk melihat perbezaan bilangan komit.

Konteks Bermemoisasi Bersarang

Apabila beberapa konteks disarangankan, memoisasikan setiap satunya secara berasingan. Perubahan dalam satu konteks tidak akan menjejaskan nilai bermemoisasi konteks yang lain.

Corak Komponen Penyedia

Bungkus konteks, state dan memoization di dalam komponen penyedia khusus. Eksport cangkuk tersuai untuk menggunakan konteks tersebut. Ini ialah corak kanonik untuk konteks yang boleh digunakan semula.

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const logout = useCallback(() => setUser(null), []);
  const value = useMemo(() => ({ user, logout }), [user, logout]);
  return <UserCtx.Provider value={value}>{children}</UserCtx.Provider>;
}

export const useUser = () => useContext(UserCtx);

Semakan Ringkas

Apakah sebab utama membungkus objek nilai konteks dalam useMemo?

Jawab dalam pelajaran interaktif

Ulang Kaji

Bungkus objek nilai konteks dalam useMemo dengan kebergantungan yang betul. Stabilkan nilai fungsi dengan useCallback. Primitif tidak memerlukan memoization. Bungkus persediaan konteks dalam komponen penyedia bersama cangkuk tersuai.

Seterusnya

Pelajaran seterusnya: **Corak Pemilih Konteks** — Anda akan melaksanakan cangkuk pemilih yang hanya menyebabkan pengguna dipaparkan semula apabila bahagian khusus konteks berubah.

Percuma untuk bermula

Pelajari React dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 88
Pelajaran: 324

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Memoisasi Nilai Konteks dengan useMemo” percuma?

Ya — teks penuh “Memoisasi Nilai Konteks dengan useMemo” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus React Academy, tingkat taraf kepada CoddyKit PRO. Kursus React Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Memoisasi Nilai Konteks dengan useMemo”?

Balut objek nilai konteks dalam useMemo supaya pengguna tidak melakukan pemaparan semula yang tidak perlu. Anda berlatih React Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan React Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Memoisasi Nilai Konteks dengan useMemo” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Academy ini?

Ya. Setiap pelajaran React Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Memisahkan Konteks untuk Mengehadkan Pemaparan Semula
Memoisasi Nilai Konteks dengan useMemo
Corak Pemilih Konteks
Bila Tidak Patut Menggunakan Konteks

← Kembali ke React Academy