在 React Native 中，可以使用自定义的 Hooks 来封装一个防抖函数。

下面是一个使用 Hooks 封装的防抖函数的示例：

import { useEffect, useRef } from 'react';

const useDebounce = (callback, delay) => {
  const timerRef = useRef(null);

  useEffect(() => {
    return () => {
      clearTimeout(timerRef.current);
    };
  }, []);

  const debouncedCallback = (...args) => {
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => {
      callback(...args);
    }, delay);
  };

  return debouncedCallback;
};

export default useDebounce;

在上述代码中，我们使用 useRef 来创建一个持久的计时器引用 timerRef，并在 useEffect 中进行清理。

然后，定义了一个 debouncedCallback 函数，它接受任意数量的参数，并在防抖的延迟时间内等待调用，并执行传入的回调函数 callback。

最后，将 debouncedCallback 函数作为自定义 Hook useDebounce 的返回值。

使用封装的防抖函数的示例如下：

import React, { useState } from 'react';
import useDebounce from './useDebounce';

const MyComponent = () => {
  const [keyword, setKeyword] = useState('');

  const handleSearch = useDebounce((value) => {
    // 根据关键字进行搜索
    console.log('搜索关键字:', value);
  }, 300);

  const handleChange = (value) => {
    setKeyword(value);
    handleSearch(value);
  };

  return (
    <TextInput
      value={keyword}
      onChangeText={handleChange}
    />
  );
};

export default MyComponent;

在上述示例中，使用了自定义的 Hook useDebounce 来创建一个防抖函数 handleSearch。在输入框的 onChangeText 事件中，将输入的关键字传递给 handleChange 函数，并在其中调用 handleSearch 函数进行搜索操作。

这样，当用户输入时，防抖函数会等待一段时间后执行搜索操作，避免了连续触发搜索的问题。根据具体的需求和场景，你可以根据需要调整防抖的延迟时间和回调函数。

#头条文章养成计划#