React自定义Hook

自定义 Hook和普通函数的核心区别在于:自定义 Hook 可以调用 React 内置 Hook(如 useState、useEffect),从而拥有 "状态管理" 和 "副作用处理" 能力,而普通函数无法做到这一点

举个具体场景理解:
例 1:用普通函数封装 "数据请求逻辑"

javascript 复制代码
// 普通函数:只能处理纯逻辑,无法维护状态
function fetchData(url) {
  let data = null;
  let loading = true;
  
  fetch(url)
    .then(res => res.json())
    .then(result => {
      data = result;
      loading = false;
      // 这里无法触发组件重新渲染!
    });
  
  return { data, loading };
}

// 组件中使用
function UserComponent() {
  // 问题:数据请求完成后,组件不会重新渲染,UI 不会更新
  const { data, loading } = fetchData('/api/user');
  
  return <div>{loading ? '加载中' : data?.name}</div>;
}

缺陷:普通函数无法维护组件状态,也无法在数据变化时通知 React 重新渲染

例 2:用自定义 Hook 封装 "带状态的数据请求"

javascript 复制代码
// 自定义 Hook:可以使用 React 内置 Hook 维护状态和副作用
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  
  // 用 useEffect 处理副作用(数据请求)
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(result => {
        setData(result); // 更新状态,触发组件重新渲染
        setLoading(false);
      });
  }, [url]); // 依赖变化时重新请求
  
  return { data, loading };
}

// 组件中使用
function UserComponent() {
  // 优势:数据更新后,组件会自动重新渲染
  const { data, loading } = useFetch('/api/user');
  
  return <div>{loading ? '加载中' : data?.name}</div>;
}

核心价值:自定义 Hook 通过内置 Hook 获得了 "状态管理" 和 "响应式更新" 能力,既复用了逻辑,又能和组件渲染机制联动

为什么不用普通函数?

  • 状态关联性:普通函数只能处理纯逻辑,无法持有和更新组件状态;自定义 Hook 能通过 useState 维护状态,并在状态变化时触发组件重新渲染。
  • 副作用管理:普通函数无法处理需要 "清理" 的副作用(如事件监听、定时器);自定义 Hook 可以用 useEffect 统一管理副作用的执行和清理(如组件卸载时取消请求)。
  • React 机制集成:自定义 Hook 遵循 React 的 Hooks 规则(如只能在函数组件或其他 Hook 中调用),能和 React 的调度机制(如并发渲染)协同工作;普通函数没有这种集成能力。

总结
自定义 Hook 的本质是 "可以调用其他 Hook 的函数",它解决了 "普通函数无法复用包含状态和副作用的逻辑" 的问题。当需要复用的逻辑涉及状态管理、生命周期或副作用时,必须用自定义 Hook;若只是纯逻辑计算(无状态、无副作用),普通函数更合适。

相关推荐
IT_陈寒11 分钟前
Java并发编程避坑指南:7个常见陷阱与性能提升30%的解决方案
前端·人工智能·后端
HBR666_25 分钟前
AI编辑器(FIM补全,AI扩写)简介
前端·ai·编辑器·fim·tiptap
excel29 分钟前
一文读懂 Vue 组件间通信机制(含 Vue2 / Vue3 区别)
前端·javascript·vue.js
JarvanMo33 分钟前
Flutter 应用生命周期:使用 AppLifecycleListener 阻止应用崩溃
前端
我的xiaodoujiao1 小时前
从 0 到 1 搭建 Python 语言 Web UI自动化测试学习系列 9--基础知识 5--常用函数 3
前端·python·测试工具·ui
李鸿耀3 小时前
Flex 布局下文字省略不生效?原因其实很简单
前端
皮蛋瘦肉粥_1214 小时前
pink老师html5+css3day06
前端·css3·html5
华仔啊9 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel9 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴9 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa