Bagaimana anda mengelakkan kemas kini keadaan daripada menyebabkan terlalu banyak penyokongan semula?

Question

Accepted Answer

Perubahan keadaan mencetuskan penyokongan semula, dan keadaan yang tersusun dengan buruk boleh menyebabkan **jauh lebih banyak penyokongan semula daripada yang diperlukan** — melambatkan aplikasi. Strategi utama: langganan sempit, keadaan pisah, memomoimize, dan menyimpan keadaan secara tempatan. ## 1. Langgan kepada hirisan minimum yang anda perlukan ```jsx // ❌ subscribing to the whole store → re-renders on ANY change const store = useStore(); const count = store.count; // ✅ select only what you use → re-renders only when `count` changes const count = useStore((s) => s.count); ``` Langganan pilihan (Zustand/Redux selectors, atom Jotai) adalah leverage terbesar — komponen hanya disokong semula apabila hirisan spesifik mereka berubah, bukan pada setiap kemas kini kedai. ## 2. Pisahkan keadaan / konteks untuk mengehadkan jejari ledakan ```jsx // ❌ one big context → every consumer re-renders when anything changes // ✅ separate contexts so unrelated updates don't cross-trigger ... ``` ## 3. Memorikan komponen dan nilai ```jsx const Item = React.memo(ItemComponent); // skip re-render if props are unchanged const expensiveValue = useMemo(() => compute(data), [data]); const handleClick = useCallback(() => doX(id), [id]); // stable function reference ``` Memorisasi menghalang anak-anak daripada disokong semula apabila prop mereka (mengikut rujukan) tidak berubah — tetapi ia hanya berfungsi jika anda juga menyimpan prop/panggilan balik secara stabil rujukan (`useCallback`/`useMemo`) dan mengemas kini keadaan **secara tidak berubah**. ## 4. Simpan keadaan setempat mungkin ```text State high in the tree re-renders everything below it. Move state DOWN to the smallest component that needs it → smaller re-render scope. ``` ## 5. Jangan simpan nilai terbitan; elakkan rujukan baharu setiap kali mengsokongan ```jsx // ❌ a new object/array each render breaks memoization downstream // new {} every render // ✅ stable reference const config = useMemo(() => ({ a: 1 }), []); ``` ## 6. Gunakan pemilih yang diedarkan untuk data terbitan ```js const selectActive = createSelector([s => s.items], items => items.filter(i => i.active)); // returns the SAME reference when items didn't change → no needless re-render ``` ## Ukur dahulu ```text React DevTools Profiler / "why did you render" → find what actually re-renders before optimizing. Premature memoization adds complexity for no gain. ``` ## Mengapa ini penting Penyokongan semula yang berlebihan adalah punca utama aplikasi React/keadaan-didorong yang lambat, dan ia berpunca daripada cara keadaan disusun dan dilanggan. Toolkit — langganan pilihan sempit, konteks pisah, memorisasi dengan rujukan stabil, kemas kini tidak berubah, dan keadaan setempat — secara langsung mengawal skop penyokongan semula. Yang penting, anda harus **ukur** (Profiler) untuk mencari kesesakan sebenar sebelum mengoptimalkan, kerana memorisasi yang tidak berhati-hati menambah kerumitan tanpa manfaat. Memahami apa yang mencetuskan penyokongan semula dan cara membatasinya adalah penting bagi aplikasi berskala besar yang berprestasi tinggi.