useCallback dan useMemo untuk Prestasi
Memoisasikan fungsi panggilan balik dengan useCallback untuk mengelakkan pemaparan semula anak yang tidak perlu, dan cachenilai terhitung yang mahal dengan useMemo.
useCallback dan useMemo untuk Prestasi ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 3 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 Render Semula
Setiap kali komponen melakukan render semula dalam React, semua nilai yang dicipta dalam isi fungsi akan dicipta semula. Ini termasuk objek, tatasusunan dan yang paling penting — fungsi. Jika fungsi atau nilai yang dicipta semula dihantar sebagai prop kepada komponen anak, komponen anak itu melihat rujukan baharu lalu melakukan render semula, walaupun nilai logiknya tidak berubah.
Apakah useCallback?
useCallback(fn, deps) mengembalikan versi fungsi panggilan balik yang dimemo dan hanya berubah jika salah satu kebergantungan berubah. Membalut panggilan balik dalam useCallback mengekalkan rujukan fungsi yang sama merentasi render, lalu menghalang render semula yang tidak diperlukan pada komponen anak yang menerimanya sebagai prop.
import { useCallback } from 'react';
function Parent() {
const [count, setCount] = useState(0);
// handlePress is the SAME function reference between renders
// as long as count does not change
const handlePress = useCallback(() => {
console.log('Pressed, count is:', count);
}, [count]);
return <Child onPress={handlePress} />;
}useCallback dengan React.memo
useCallback paling berkesan apabila digandingkan dengan React.memo pada komponen anak. Tanpa React.memo, komponen anak tetap melakukan render semula tanpa mengira kesamaan rujukan prop. Gabungan React.memo pada anak dan useCallback pada panggilan balik induk menghalang render semula apabila tingkah laku dan data tidak berubah.
const ChildButton = React.memo(({ onPress, label }) => (
<Button title={label} onPress={onPress} />
));
function Parent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
// ChildButton will NOT re-render when text changes
const handleCount = useCallback(() => setCount(c => c + 1), []);
return (
<>
<TextInput value={text} onChangeText={setText} />
<ChildButton label='Count' onPress={handleCount} />
</>
);
}Apakah useMemo?
useMemo(computeFn, deps) mememo hasil pengiraan yang mahal. React memanggil computeFn pada render pertama dan menyimpan nilai pulangannya. Pada render seterusnya, React mengembalikan nilai yang disimpan kecuali jika kebergantungan berubah. Ini mengelakkan pengulangan pengiraan berat pada setiap render.
import { useMemo } from 'react';
function ProductList({ products, category }) {
// Only recomputes when products or category changes
const filtered = useMemo(
() => products.filter((p) => p.category === category),
[products, category]
);
return <FlatList data={filtered} renderItem={renderItem} />;
}useMemo untuk Rujukan Objek yang Stabil
Objek dan tatasusunan yang dicipta sebaris dalam JSX ialah rujukan baharu pada setiap render. Jika dihantar kepada komponen yang dimemo, objek dan tatasusunan itu menggagalkan pememoan. Balutkannya dalam useMemo untuk mencipta rujukan stabil yang hanya berubah apabila data asas berubah. Ini amat penting untuk tatasusunan gaya dan objek konfigurasi.
function Chart({ data, color }) {
// New object on every render without useMemo
const chartConfig = useMemo(() => ({
backgroundColor: color,
dataPoints: data.map((d) => d.value),
}), [data, color]);
return <ChartComponent config={chartConfig} />;
}Tatasusunan Kebergantungan: Menetapkannya dengan Betul
Kedua-dua useCallback dan useMemo memerlukan tatasusunan kebergantungan yang tepat. Sertakan setiap nilai daripada skop komponen yang digunakan dalam fungsi atau pengiraan yang dimemo. Kebergantungan yang tertinggal menyebabkan nilai yang dimemo menggunakan penutupan lapuk; terlalu banyak kebergantungan menyebabkan pengiraan semula yang tidak diperlukan. Peraturan exhaustive-deps ESLint membantu memastikan ketepatan.
// Wrong: missing userId dependency — stale closure bug
const fetchUser = useCallback(() => fetch('/user/' + userId), []);
// Correct: userId is listed
const fetchUser = useCallback(() => fetch('/user/' + userId), [userId]);Bila TIDAK Menggunakan useCallback
useCallback mempunyai kos: React menyimpan fungsi dalam memori dan menyemak tatasusunan kebergantungan pada setiap render. Untuk pengendali mudah yang tidak dihantar kepada komponen anak yang dimemo, overhed useCallback melebihi manfaatnya. Gunakannya secara terpilih — hanya apabila komponen anak dibalut dalam React.memo dan kesamaan prop penting untuk prestasi.
// Unnecessary: Button re-renders anyway; no child is memoized
const handlePress = useCallback(() => setVisible(true), []);
// Fine without useCallback in this case
const handlePress = () => setVisible(true);useMemo untuk Transformasi yang Mahal
Gunakan useMemo apabila pengiraan mengambil masa yang ketara — menyusun tatasusunan besar, menghuraikan data kompleks atau menjalankan pengiraan statistik. Panduan umum: jika pengiraan mengambil masa lebih daripada satu milisaat dan berjalan pada setiap render, pertimbangkan untuk mememokannya. Untuk operasi remeh seperti menambah dua nombor, overhed pememoan lebih besar daripada pengiraan itu sendiri.
const sortedAndFiltered = useMemo(() => {
return items
.filter((item) => item.status === selectedStatus)
.sort((a, b) => b.createdAt - a.createdAt)
.slice(0, 100);
}, [items, selectedStatus]);useCallback untuk renderItem dalam FlatList
Membalut fungsi renderItem bagi FlatList dalam useCallback menghalang penciptaan rujukan fungsi baharu pada setiap render induk, yang sebaliknya menyebabkan setiap baris FlatList yang kelihatan melakukan render semula. Ini ialah salah satu peningkatan prestasi paling besar kesannya dalam aplikasi React Native yang banyak menggunakan senarai.
const renderItem = useCallback(({ item }) => (
<ProductCard
product={item}
onPress={handleSelectProduct}
/>
), [handleSelectProduct]); // handleSelectProduct also memoized
<FlatList
data={products}
renderItem={renderItem}
keyExtractor={(item) => item.id}
/>Mengukur Kesan
Sebelum menambah pememoan di mana-mana, ukur kesan sebenar menggunakan React DevTools Profiler. Rakam suatu interaksi, lihat carta nyalaan untuk mengenal pasti komponen yang melakukan render semula tanpa perlu, dan hanya tambah useCallback atau useMemo apabila pemprofil menunjukkan kesesakan sebenar. Pengoptimuman pramatang menambah kerumitan kod tanpa manfaat yang boleh diukur.
Perbandingan Ringkasan
Ingat perbezaan utama: useCallback mememo fungsi (menghalang penciptaan semula rujukan fungsi), manakala useMemo mememo nilai yang dikira (menghalang pengulangan pengiraan mahal). Kedua-duanya menerima tatasusunan kebergantungan dan hanya mengira semula apabila kebergantungan yang disenaraikan berubah.
// useCallback — memoize a function
const fn = useCallback(() => doSomething(a, b), [a, b]);
// useMemo — memoize a computed value
const val = useMemo(() => computeExpensive(a, b), [a, b]);
// Relationship: useCallback(fn, deps) === useMemo(() => fn, deps)Semakan Pantas
Uji pemahaman anda tentang useCallback dan useMemo untuk prestasi daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini anda telah mempelajari bahawa: useCallback mememo rujukan fungsi untuk menghalang render semula anak yang tidak diperlukan, useMemo mememo nilai yang dikira dengan mahal untuk melangkau pengiraan semula pada setiap render, dan kedua-duanya berfungsi paling baik apabila digabungkan dengan React.memo dan tatasusunan kebergantungan yang tepat. Seterusnya kita akan meneroka penulisan cangkuk tersuai untuk berkongsi logik berkeadaan antara komponen.
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
Soalan Lazim
Adakah pelajaran “useCallback dan useMemo untuk Prestasi” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “useCallback dan useMemo untuk Prestasi”, 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 “useCallback dan useMemo untuk Prestasi”?
Memoisasikan fungsi panggilan balik dengan useCallback untuk mengelakkan pemaparan semula anak yang tidak perlu, dan cachenilai terhitung yang mahal dengan useMemo. 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 3 daripada 4.
Berapa lamakah pelajaran “useCallback dan useMemo untuk Prestasi” 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
- useRef untuk Nod DOM dan Nilai Boleh Ubah
- useReducer untuk Logik Keadaan Kompleks
- useCallback dan useMemo untuk Prestasi
- Menulis Cangkuk Tersuai