精通react hook自定义封装之useDebounce

当在 React Native 中使用 TypeScript 编写 debounce 函数时，可以按照以下方式实现：

typescriptCopy code
import { useCallback, useEffect, useRef } from 'react';

const useDebounce = (func: Function, delay: number) => {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  const debounce = useCallback((...args: any[]) => {
    if (timeoutRef.current !== null) {
      clearTimeout(timeoutRef.current);
    }
    timeoutRef.current = setTimeout(() => {
      func(...args);
      timeoutRef.current = null;
    }, delay);
  }, [func, delay]);

  useEffect(() => {
    return () => {
      if (timeoutRef.current !== null) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, []);

  return debounce;
};

export default useDebounce;

这个 useDebounce 钩子使用了 useCallback 来记忆传递的函数 func，以及 useRef 来存储 setTimeout 返回的 NodeJS.Timeout 对象。useEffect 用来清理副作用，即在组件卸载时清除定时器。最后，将 debounce 函数返回。可以在函数调用时传递任何参数。

可以将此函数作为自定义钩子导出，以便在 React Native 中使用。例如：

typescriptCopy code
import React, { useState } from 'react';
import { View, TextInput } from 'react-native';
import useDebounce from './useDebounce';

const App = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce((value: string) => console.log(value), 1000);

  const handleSearch = (value: string) => {
    setSearchTerm(value);
    debouncedSearch(value);
  };

  return (
    <View>
      <TextInput
        placeholder="Search"
        onChangeText={handleSearch}
        value={searchTerm}
      />
    </View>
  );
};

export default App;

这里 App 组件中使用 useDebounce 钩子来包装 handleSearch 函数，将其传递给 TextInput 组件的 onChangeText 属性，从而实现了输入框的防抖功能。