React Hooks实战：自定义Hook解复杂逻辑

技术教程壹维导航

1 0 0

融网址资源资讯于一体免费基础功能学生党福音轻量化办公流畅不卡顿 100元/月

React Hooks实战：从零构建自定义Hook解决复杂业务逻辑

React Hooks彻底改变了函数组件的开发方式，通过自定义Hook可以将复杂业务逻辑抽象为可复用的代码块。本文将展示如何从零开始构建一个实用的自定义Hook，解决实际开发中的常见问题。

第一步：识别业务逻辑需求

假设我们需要开发一个电商平台的商品搜索功能，涉及以下业务逻辑：

实时搜索防抖处理
搜索结果缓存
加载状态管理
错误处理机制

这些逻辑如果直接写在组件中会导致代码臃肿且难以维护。通过自定义Hook可以将其封装为独立单元。

第二步：创建基础Hook结构

使用useCallback和useState管理状态：

const useProductSearch = (debounceTime = 500) => {
  const [searchTerm, setSearchTerm] = useState(\'\');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 实际搜索逻辑将在下一步实现
  return {
    searchTerm,
    setSearchTerm,
    results,
    loading,
    error
  };
};

第三步：实现防抖和缓存机制

利用useRef和useEffect添加防抖功能：

const useProductSearch = (debounceTime = 500) => {
  // ...之前的state
  
  const debouncedSearch = useCallback(
    debounce(async (term) => {
      if (!term) {
        setResults([]);
        return;
      }
      
      setLoading(true);
      setError(null);
      
      try {
        // 检查缓存
        const cachedResults = cache.current.get(term);
        if (cachedResults) {
          setResults(cachedResults);
          return;
        }
        
        // 模拟API调用
        const response = await fetch(`/api/products?q=${term}`);
        const data = await response.json();
        
        // 更新缓存
        cache.current.set(term, data);
        setResults(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }, debounceTime),
    []
  );

  useEffect(() => {
    debouncedSearch(searchTerm);
    return () => debouncedSearch.cancel();
  }, [searchTerm, debouncedSearch]);

  // ...返回值
};

第四步：添加类型安全和优化

通过TypeScript增强类型定义：

interface Product {
  id: number;
  name: string;
  price: number;
}

interface UseProductSearchReturn {
  searchTerm: string;
  setSearchTerm: (term: string) => void;
  results: Product[];
  loading: boolean;
  error: string | null;
}

const useProductSearch = (debounceTime = 500): UseProductSearchReturn => {
  // ...实现细节
};

使用useMemo优化性能，避免不必要的重新渲染：

const filteredResults = useMemo(() => {
  return results.filter(product => 
    product.name.toLowerCase().includes(searchTerm.toLowerCase())
  );
}, [results, searchTerm]);

第五步：在组件中使用自定义Hook

现在可以在任何组件中轻松复用这个Hook：

function ProductSearch() {
  const {
    searchTerm,
    setSearchTerm,
    results,
    loading,
    error
  } = useProductSearch();

  return (
    
       setSearchTerm(e.target.value)}
        placeholder=\"搜索商品...\"
      />
      
      {loading && 加载中...}
      {error && {error}}
      
      
        {results.map(product => (
          
            {product.name} - ¥{product.price}
          
        ))}
      
    
  );
}