React: 自定义 Hook的概念

更准确的理解
Hook本质上是：

// Hook = useState + useEffect + useMemo + 业务逻辑的组合
const useVizData = () => {
  // 1. 状态声明
  const [state1, setState1] = useState();
  const [state2, setState2] = useState();
  
  // 2. 计算逻辑
  const computed = useMemo(() => {
    return complexCalculation(state1, state2);
  }, [state1, state2]);
  
  // 3. 副作用逻辑
  useEffect(() => {
    // 复杂的业务逻辑
  }, [dependencies]);
  
  // 4. 事件处理函数
  const handleSomething = useCallback(() => {
    // 处理逻辑
  }, []);
  
  // 5. 返回接口
  return {
    // 状态
    state1, state2,
    // 计算值
    computed,
    // 操作函数
    setState1, setState2, handleSomething
  };
};

总结

虽然最终效果看起来像是在组件中声明了一堆 useState，但 Hook 实际上是：

1. 状态管理 + 业务逻辑 + 副作用处理 的完整封装
2. 可复用的逻辑单元，不仅仅是状态声明
3. 关注点分离的实现，让组件更清晰
4. 测试友好的代码组织方式

所以，Hook 比单纯的 useState 声明要强大得多！ 🚀