React Native Academy · Pelajaran

Mengelakkan Isu Prestasi Konteks

Kenal pasti pemaparan semula yang tidak perlu akibat perubahan nilai konteks, pecahkan konteks kepada beberapa penyedia dan memoisasikan nilai konteks untuk mengoptimumkan prestasi.

Pelajaran 4 daripada 413 langkah

Mengelakkan Isu Prestasi Konteks ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Masalah Pemaparan Semula Konteks

Apabila Provider konteks dipaparkan semula dengan value baharu, setiap komponen yang memanggil useContext untuk konteks tersebut akan dipaparkan semula, tanpa mengira sama ada bahagian khusus nilai yang digunakan oleh komponen itu telah berubah. Dalam aplikasi besar dengan banyak komponen pengguna, keadaan ini boleh menyebabkan masalah prestasi yang ketara.

Mendiagnosis Pemaparan Semula Konteks yang Tidak Diperlukan

Gunakan Profiler React DevTools untuk mengenal pasti komponen yang terlalu kerap dipaparkan semula. Rakam interaksi yang sepatutnya hanya mempengaruhi satu bahagian antara muka, kemudian periksa komponen yang diserlahkan dalam carta api. Jika komponen yang hanya membaca satu bahagian konteks turut dipaparkan semula apabila bahagian yang tidak berkaitan berubah, anda menghadapi masalah prestasi.

Corak Antipola Objek Sebaris

Punca paling biasa pemaparan semula konteks yang tidak diperlukan ialah penciptaan objek nilai secara sebaris dalam JSX. Ini mencipta rujukan objek baharu setiap kali Provider dipaparkan semula, lalu React menganggap nilai itu telah berubah — walaupun kandungannya sama — dan mencetuskan pemaparan semula berantai pada semua komponen pengguna.

// Bad: new object on every render
<MyContext.Provider value={{ user, logout }}>

// Good: stable reference with useMemo
const value = useMemo(() => ({ user, logout }), [user, logout]);
<MyContext.Provider value={value}>

Memo Nilai Konteks dengan useMemo

Balut objek nilai konteks dengan useMemo di dalam Provider. React hanya akan mencipta objek baharu, lalu memaklumkan komponen pengguna, apabila salah satu kebergantungan yang disenaraikan berubah. Ini ialah pembaikan paling mudah dan paling berkesan untuk masalah prestasi konteks.

function CartProvider({ children }) {
  const [items, setItems] = useState([]);

  const addItem = useCallback((item) => {
    setItems((prev) => [...prev, item]);
  }, []);

  const value = useMemo(() => ({
    items,
    addItem,
    total: items.reduce((sum, i) => sum + i.price, 0),
  }), [items, addItem]);

  return <CartContext.Provider value={value}>{children}</CartContext.Provider>;
}

Memisahkan Konteks untuk Keperluan Berasingan

Jika konteks anda menyimpan nilai yang kerap berubah, seperti bilangan item troli, dan nilai yang jarang berubah, seperti profil pengguna, komponen yang hanya memerlukan data stabil terpaksa dipaparkan semula setiap kali data yang berubah-ubah itu berubah. Penyelesaiannya ialah memisahkan konteks kepada dua penyedia berasingan — satu untuk setiap keperluan.

// Instead of one big UserContext:
export const UserDataContext = createContext(null);    // changes rarely
export const UserActionsContext = createContext(null); // changes rarely
export const CartItemsContext = createContext([]);     // changes often

// Consumers only subscribe to what they use

Memisahkan Keadaan daripada Penghantaran

Satu corak yang telah terbukti ialah memisahkan konteks kepada konteks keadaan dan konteks penghantaran. Fungsi penghantaran tidak pernah berubah (useCallback atau penghantaran useReducer adalah stabil), jadi komponen yang hanya menghantar tindakan tidak pernah dipaparkan semula akibat perubahan keadaan. Hanya komponen yang membaca keadaan akan dipaparkan semula apabila keadaan berubah.

export const AppStateContext = createContext(null);
export const AppDispatchContext = createContext(null);

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(appReducer, initialState);

  return (
    <AppStateContext.Provider value={state}>
      <AppDispatchContext.Provider value={dispatch}>
        {children}
      </AppDispatchContext.Provider>
    </AppStateContext.Provider>
  );
}

React.memo TIDAK Membantu Komponen Pengguna Konteks

Kesilapan yang biasa berlaku ialah membalut komponen pengguna konteks dengan React.memo kerana menyangka langkah itu akan menghalang pemaparan semula yang disebabkan oleh perubahan konteks. Ia tidak berbuat demikian — React.memo hanya membandingkan prop, bukan langganan konteks. Komponen yang menggunakan konteks akan sentiasa dipaparkan semula apabila nilai konteks berubah, tanpa mengira React.memo.

// React.memo does NOT prevent context-driven re-renders
const MyComponent = React.memo(() => {
  const { value } = useContext(MyContext);
  // Still re-renders every time MyContext changes
  return <Text>{value}</Text>;
});

// Solution: Split context or memoize the value in the Provider

Corak Pemilih untuk Konteks

Jika anda memerlukan langganan terperinci seperti useSelector Redux, anda boleh melaksanakan corak pemilih yang mudah. Cangkuk tersuai menerima fungsi pemilih dan memo nilai yang dipilih dengan useMemo. Pemaparan semula hanya berlaku apabila nilai yang dipilih berubah, bukan apabila keseluruhan konteks berubah.

function useCartTotal() {
  const { items } = useContext(CartContext);
  // Only recomputes when items changes
  return useMemo(
    () => items.reduce((sum, item) => sum + item.price, 0),
    [items]
  );
}

// Component only re-renders when the total number changes
function CartBadge() {
  const total = useCartTotal();
  return <Text>${total.toFixed(2)}</Text>;
}

Mengekalkan Provider agar Ringan

Komponen Provider itu sendiri hendaklah sesederhana mungkin. Pindahkan pengiraan yang mahal daripada pemaparan Provider ke dalam useMemo atau reducer. Elakkan mengambil data, menjalankan transformasi berat, atau mencipta objek besar secara sebaris dalam JSX Provider pada setiap pemaparan.

Komposisi Berbanding Satu Konteks Gergasi

Elakkan godaan untuk meletakkan semua keadaan global aplikasi dalam satu konteks. Seni bina yang lebih baik menggunakan banyak konteks kecil dan khusus: AuthContext untuk pengesahan, ThemeContext untuk warna, CartContext untuk troli, dan NotificationContext untuk amaran. Setiap konteks hanya memaparkan semula komponen penggunanya sendiri, lalu memastikan skop setiap pemaparan semula kecil dan boleh dijangka.

// Architecture with focused contexts
export default function App() {
  return (
    <AuthProvider>
      <ThemeProvider>
        <CartProvider>
          <NotificationProvider>
            <AppContent />
          </NotificationProvider>
        </CartProvider>
      </ThemeProvider>
    </AuthProvider>
  );
}

Bila Perlu Mempertimbangkan Zustand atau Redux

Jika pengoptimuman prestasi konteks menjadi terlalu rumit — atau jika anda mendapati diri anda sedang membina sistem pemilih yang kompleks — pertimbangkan untuk beralih kepada Zustand atau Redux Toolkit. Pustaka ini menyediakan langganan terperinci sejak awal dan direka untuk pengurusan keadaan berskala besar. Konteks kekal sesuai untuk nilai global yang mudah seperti tema, pengesahan, dan keutamaan.

Semakan Pantas

Uji pemahaman anda tentang cara mengelakkan masalah prestasi konteks daripada pelajaran ini.

Jawab dalam pelajaran interaktif

Ringkasan Pelajaran

Dalam pelajaran ini, anda belajar bahawa: objek nilai sebaris dalam JSX Provider menyebabkan pemaparan semula yang tidak diperlukan — gunakan useMemo untuk menstabilkannya, bahagikan konteks besar kepada konteks kecil yang khusus untuk mengehadkan skop pemaparan semula, dan asingkan keadaan serta penghantaran kepada dua konteks supaya komponen yang hanya melakukan tindakan tidak dipaparkan semula apabila keadaan berubah. Seterusnya, kita akan meneroka cangkuk useEffect dan tatasusunan kebergantungan untuk pengambilan data.

Percuma untuk bermula

Pelajari JavaScript 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: 30
Pelajaran: 120

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengelakkan Isu Prestasi Konteks” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “Mengelakkan Isu Prestasi Konteks”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengelakkan Isu Prestasi Konteks”?

Kenal pasti pemaparan semula yang tidak perlu akibat perubahan nilai konteks, pecahkan konteks kepada beberapa penyedia dan memoisasikan nilai konteks untuk mengoptimumkan prestasi. Anda berlatih React Native 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 Native Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native 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 4 daripada 4.

Berapa lamakah pelajaran “Mengelakkan Isu Prestasi Konteks” 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 Native Academy ini?

Ya. Setiap pelajaran React Native 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

← Kembali ke React Native Academy