Cara menggunakan cangkuk anti goncang dalam React

Question

rreeee

Saya pernah membuat dan menggunakan useDebounce cangkuk. Walau bagaimanapun, terdapat beberapa isu dengan menggunakan useDebounce dalam acara ubah saiz. useDebounce hook Mesti dijalankan di atas komponen kerana ia menggunakan useEffect secara dalaman. Walau bagaimanapun, fungsi ubah saiz disediakan untuk dijalankan pada useEffect seperti yang ditunjukkan di bawah.

Selain itu, kod di atas mengambil nilai sebagai faktor, tetapi saya fikir kita perlu menerimanya sebagai panggilan balik untuk menggunakan kod di bawah.

import { useEffect, useState } from 'react';

export default function useDebounce(text: string, delay: number) {
  const [value, setValue] = useState('');

  useEffect(() => {
    const timerId = setTimeout(() => {
      setValue(text);
    }, delay);
    return () => {
      clearTimeout(timerId);
    };
  }, [text, delay]);
  return value;
}

Bagaimana untuk menggunakan kod di atas untuk memanfaatkan useDebounce yang sedia ada?

Answer 1

Jika anda menggunakan fungsi nyahlantun terus dalam komponen React anda, ia tidak akan berfungsi kerana fungsi baharu akan dibuat dengan setiap pemaparan, sebaliknya anda boleh menggunakan useDebouncecangkuk ini:

function useDebounce(callback, delay) {
  const callbackRef = React.useRef(callback)
  React.useLayoutEffect(() => {
    callbackRef.current = callback
  })
  return React.useMemo(
    () => debounce((...args) => callbackRef.current(...args), delay),
    [delay],
  )
}

useRef 确保它与上次提供的函数相同，并且 useLayoutEffect Pastikan pada setiap pemaparan, rujukan kepada fungsi itu dikemas kini.

Untuk maklumat lanjut tentang perkara ini, lihat Reaksi Mod "Rujukan Terkini"

Answer 2

Saya berpendapat bahawa daripada melaksanakan debounce melalui useEffect, adalah lebih baik untuk melaksanakan logik debounce sebagai fungsi.

useEffect 当deps 引用的状态改变时执行。也就是说，由于是一个如果只按照执行流程就容易漏掉的逻辑，所以后期维护时很难弄清楚这个useEffect Dilaksanakan apabila keadaan yang dirujuk oleh deps berubah. Dalam erti kata lain, kerana ia adalah logik yang mudah terlepas jika anda hanya mengikuti proses pelaksanaan, sukar untuk mengetahui proses mana

ini diperoleh daripada semasa penyelenggaraan kemudian, dan ia juga sukar untuk nyahpepijat.

Contoh

自定义反跳

function debounce(func, timeout = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, timeout);
  };
}

function saveInput() {
  console.log('Saving data');
}
const processChange = debounce(() => saveInput());

lodashJika anda menggunakan , anda hanya boleh mengimport untuk menggunakannya.

Lodash Debounce

import { debounce } from 'lodash';

const debounceOnChange = debounce(() => {
  console.log("This is a debounce function");
}, 500);

Semoga ini membantu :)🎜