Menguasai Pengoptimuman Prestasi dalam React: Penyelaman Mendalam ke dalam useCallback dan useMemo

pengenalan

Sebagai pembangun bahagian hadapan yang bekerja dengan React dan Next.js, saya sering menghadapi cabaran prestasi mengikut skala aplikasi. Salah satu cara paling berkesan untuk menangani isu ini ialah melalui teknik pengoptimuman, terutamanya menggunakan cangkuk useCallback dan useMemo. Dalam catatan blog ini, saya akan menerangkan cara cangkuk ini berfungsi, memberikan contoh praktikal dan menggambarkan cara ia boleh digunakan dalam projek dunia sebenar untuk meningkatkan prestasi.

Memahami Pengoptimuman Prestasi dalam React

React dibina untuk kecekapan, tetapi apabila aplikasi anda berkembang, prestasi boleh terjejas akibat pemaparan semula yang tidak perlu. Setiap kali komponen dipaparkan semula, sebarang fungsi yang ditakrifkan di dalamnya dicipta semula, yang boleh menyebabkan kesesakan prestasi. Di sinilah useCallback dan useMemo menjadi alat penting untuk mengoptimumkan aplikasi React anda.

Apakah useCallback?

Kait useCallback digunakan untuk menghafal fungsi. Ia mengembalikan versi ingatan fungsi panggil balik yang hanya berubah jika salah satu kebergantungannya telah berubah. Ini amat berguna apabila menghantar panggilan balik kepada komponen anak yang bergantung pada kesamaan rujukan untuk mengelakkan pemaparan yang tidak perlu.

const memoizedCallback = useCallback(() => {
  // callback logic
}, [dependencies]);

Contoh Dunia Sebenar: Penyerahan Komen dalam Aplikasi Blog

Bayangkan anda sedang membina bahagian komen untuk aplikasi blog. Setiap penyerahan ulasan mencetuskan pemaparan semula senarai ulasan. Dengan menggunakan useCallback, anda boleh mengoptimumkan pengendali penyerahan untuk mengelakkan pemaparan semula yang tidak perlu.

import React, { useState, useCallback } from 'react';

const CommentSection = ({ postId }) => {
  const [comments, setComments] = useState([]);
  const [newComment, setNewComment] = useState('');

  const handleCommentSubmission = useCallback(() => {
    setComments((prevComments) => [...prevComments, newComment]);
    setNewComment('');
  }, [newComment]);

  return (
    <div>
      <h2>Comments</h2>
      <ul>
        {comments.map((comment, index) => (
          <li key={index}>{comment}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newComment}
        onChange={(e) => setNewComment(e.target.value)}
      />
      <button onClick={handleCommentSubmission}>Submit</button>
    </div>
  );
};

Dalam contoh ini, fungsi _handleCommentSubmission _diingatkan. Ia hanya akan dicipta semula jika Komen baru berubah, sekali gus menghalang pemaparan semula yang tidak perlu bagi mana-mana komponen anak yang bergantung pada fungsi ini.

Apakah useMemo?

Kail useMemo digunakan untuk menghafal pengiraan yang mahal. Ia mengembalikan nilai hafalan yang hanya dikira semula apabila salah satu kebergantungannya berubah. Ini membantu mengelakkan pengiraan semula yang mahal pada setiap paparan.

const memoizedValue = useMemo(() => {
  // Expensive calculation
  return computedValue;
}, [dependencies]);

Contoh Dunia Sebenar: Menapis Set Data Besar

Pertimbangkan aplikasi yang memaparkan senarai besar produk. Apabila menapis senarai ini berdasarkan input pengguna, mengira semula hasil yang ditapis pada setiap paparan boleh menjadi tidak cekap. Menggunakan useMemo, anda boleh mengoptimumkan proses ini.

import React, { useState, useMemo } from 'react';

const ProductList = ({ products }) => {
  const [filterText, setFilterText] = useState('');

  const filteredProducts = useMemo(() => {
    return products.filter((product) =>
      product.name.toLowerCase().includes(filterText.toLowerCase())
    );
  }, [filterText, products]);

  return (
    <div>
      <input
        type="text"
        placeholder="Search products..."
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
      />
      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
};

Dalam contoh ini, tatasusunan FilteredProducts dikira hanya apabila filterText atau produk berubah. Ini menghalang pengiraan penapisan yang tidak perlu semasa pemaparan semula apabila pembolehubah keadaan lain berubah.

Amalan Terbaik untuk Menggunakan useCallback dan useMemo

1. Gunakan Apabila Perlu: Hanya laksanakan cangkuk ini apabila anda mendapati masalah prestasi disebabkan oleh pemaparan semula yang kerap atau pengiraan yang mahal.

2. Pastikan Ketergantungan Tepat: Pastikan tatasusunan kebergantungan anda betul untuk mengelakkan penutupan lapuk atau nilai yang salah.

3. Gabungkan dengan React.memo: Gunakan React.memo untuk komponen kanak-kanak bersama cangkuk ini untuk prestasi optimum.

Kesimpulan

Mengoptimumkan prestasi dalam aplikasi React adalah penting untuk menyampaikan pengalaman pengguna yang lancar. Dengan menggunakan useCallback dan useMemo secara berkesan, anda boleh meminimumkan pemaparan semula yang tidak perlu dan pengiraan mahal dalam komponen anda. Semasa anda meneruskan perjalanan anda sebagai pembangun bahagian hadapan, ingatlah alatan ini dan gunakannya dengan bijak untuk meningkatkan kecekapan aplikasi anda.

Jangan ragu untuk berkongsi pendapat anda atau bertanya soalan dalam komen di bawah! Maklum balas anda membantu saya menambah baik dan mencipta kandungan yang lebih berharga untuk rakan pembangun. Selamat mengekod!

Atas ialah kandungan terperinci Menguasai Pengoptimuman Prestasi dalam React: Penyelaman Mendalam ke dalam useCallback dan useMemo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!