在前端开发的江湖里摸爬滚打这么多年，你有没有过这种时刻：盯着屏幕上那一坨密密麻麻的组件代码，感觉脑瓜子嗡嗡的？特别是当你发现，明明是两个完全不同的业务场景，底层的逻辑却惊人地相似，这时候，复制粘贴大法虽然Neng解燃眉之急，但心里总觉得哪里不对劲。说实话，这种“代码搬运工”的日子，谁过谁累。

React Hook 的出现，简直就是给这种困境开了一剂良方。它不仅仅是一个新特性，geng像是一种全新的思维方式。今天咱们不聊那些枯燥的官方文档定义，我想用一种geng接地气、geng实战的方式，带你kankan如何利用自定义 Hook 把那些散落在各处的逻辑像搭积木一样封装起来让你的代码复用性瞬间提升一个档次。

在 Hook 还没诞生之前，React 社区主要靠高阶组件和 Render Props 来复用逻辑。但这两种方案，说实话，dou有点“反人类”。要么是组件嵌套像洋葱一样一层包一层，调试起来让人怀疑人生；要么就是代码结构被拆得七零八落，逻辑连贯性大打折扣。

而自定义 Hook 的出现，彻底改变了这个局面。它允许你将一段业务逻辑抽离出来变成一个独立的函数。这个函数以 `use` 开头，内部Ke以调用其他的 Hook。Zui妙的是它完全遵循普通函数的规则，却拥有了 React 状态的魔力。这就意味着，你Ke以把那些关于“怎么Zuo事”的细节统统藏起来只暴露出“Zuo什么”的接口。

举个Zui简单的例子，计数器逻辑。这玩意儿在项目中出现的频率简直高得离谱，不管是商品数量选择，还是分页器，dou离不开它。

import { useState } from 'react';
// 定义一个简单的计数器 Hook
const useCounter =  => {
  const  = useState;
  const increment =  => setCount;
  const decrement =  => setCount;
  const reset =  => setCount;
  return { count, increment, decrement, reset };
};
// 在组件中使用
function CounterDemo {
  const { count, increment, decrement } = useCounter;
  return (
    

      
当前数值: {count}
      减少
      增加
    
  );
}

你kan，原本散落在组件里的 `useState` 和各种事件处理函数，现在dou被 `useCounter` 这一层薄薄的包装给收编了。组件代码瞬间清爽了不少，而且这个 Hook Ke以在任何需要计数的地方直接拿来用，完全不用重复造轮子。

当然实际业务往往比简单的计数器复杂得多。有时候我们需要限制Zui大值、Zui小值，甚至需要处理异步操作。这时候，自定义 Hook 的灵活性就体现出来了。

比如我们Ke以 一下上面的计数器，让它支持边界检查：

interface Options {
  min?: number;
  max?: number;
}
const useCounter =  => {
  const { min, max } = options;
  const  = useState;
  const increment =  => {
    setCount(prev => {
      if  return prev;
      return prev + 1;
    });
  };
  const decrement =  => {
    setCount(prev => {
      if  return prev;
      return prev - 1;
    });
  };
  // ...其他方法
  return { count, increment, decrement };
};

这样一来复杂的业务规则就被封装在了 Hook 内部，组件使用者根本不需要关心这些细节，只需要调用方法即可。这种“黑盒”式的封装，正是我们追求的高内聚、低耦合。

组件的挂载和卸载，就像是人的出生和离世。在这个过程中，我们经常需要Zuo一些“身后事”或者“准备工作”。比如组件挂载时请求数据，卸载时清除定时器或者取消订阅。Ru果在每个组件里dou写一遍 `useEffect`，那代码重复度简直没眼kan。

这时候，我们Ke以搞一个 `useLifecycles` 出来把生命周期相关的逻辑打包成一个简单的接口。

import { useEffect } from 'react';
const useLifecycles =  => {
  useEffect => {
    if  {
      onMount;
    }
    return  => {
      if  {
        onUnmount;
      }
    };
  }, );
};

用起来就像给组件安排了“入场”和“退场”的节目单，清晰明了：

const Child =  => {
  useLifecycles(
     => console.log,
     => console.log
  );
  return ;
};

当你在父组件中控制这个子组件的显示与隐藏时就Neng在控制台清晰地kan到它的“生老病死”。这种封装方式，对于处理那些需要在特定时机执行逻辑的场景特别有效，比如埋点上报、连接 WebSocket 等。

前端开发中，鼠标悬停效果简直是家常便饭。传统的写法需要给元素绑定 `onMouseEnter` 和 `onMouseLeave` 事件，然后在状态里切来切去。Ru果页面里有好几个地方dou需要这种交互，代码里就会到处dou是 `setHover` 和 `setHover`，kan着dou眼花。

通过自定义 Hook，我们Ke以把这个逻辑抽离出来甚至利用 React 的 `cloneElement` 技巧，把状态直接“注入”到元素里。

import { useState, cloneElement } from 'react';
export default function useHover {
  const  = useState;
  const onMouseEnter =  => {
    return  => {
      originalOnMouseEnter?.;
      setState;
    };
  };
  const onMouseLeave =  => {
    return  => {
      originalOnMouseLeave?.;
      setState;
    };
  };
  if  {
    element = element;
  }
  const el = cloneElement(element, {
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
  });
  return ;
}

在组件里使用时就像给元素装了个“小雷达”，鼠标一靠近，它就Neng感知到：

import useHover from './hooks/useHover';
export default function App3 {
  const element =  => {
    return 
Hover me! {hovered && 'Thanks!'}
  };
  const  = useHover;
  return (
    

      {hoverable}
      {hovered ? 'yes ✅' : 'no ❌'}
    
  );
}

当鼠标移上去的时候，不仅元素本身会发生变化，下方的状态指示器也会同步geng新。这种将逻辑与 UI 细致解耦的方式，让代码的可维护性大大增强。geng重要的是组件内部的代码描述的是“想要Zuo什么”，而不是“怎么Zuo”。

你有没有遇到过这种让人抓狂的情况：组件里的 `setTimeout` 或者接口请求还没跑完，用户手快把页面关了组件卸载了。结果控制台立刻甩给你一个红色的警告：“Can't perform a React state update on an unmounted component.”。这感觉就像是你给一个Yi经“去世”的人打

别慌，咱们用 `useMountedState` 这个自定义 Hook 就Neng完美解决。它就像一个“生命检测仪”，时刻告诉你组件是否还活着。

import { useRef, useEffect } from 'react';
export default function useMountedState {
  const mounted = useRef;
  const get =  => mounted.current;
  useEffect => {
    mounted.current = true;
    return  => {
      mounted.current = false;
    };
  }, );
  return get;
}

有了它，你在Zuo异步geng新之前，先检查一下组件的状态，只有活着的时候才geng新，彻底告别警告：

import React, { useState, useEffect } from 'react';
import useMountedState from './hooks/useMountedState';
export default function App {
  const isMounted = useMountedState;
  const  = useState;
  useEffect => {
    setTimeout => {
      // 先检查组件是否还活着，再geng新状态
      if ) {
        setNum;
      }
    }, 5000);
  }, );
  return (
    

      {isMounted ? '组件挂载完成 🎉' : '组件还在编译 🛠️'}
    
  );
}

这种防御性编程的技巧，在处理复杂网络请求或长轮询时尤为重要，Neng避免hen多莫名其妙的内存泄漏和报错。

虽然自己手搓 Hook hen有成就感，但说实话，hen多常见的逻辑，业界的大佬们早就帮我们写好了。这时候，善用现成的库Neng极大地提升效率。这里不得不提一下 `react-use` 这个库，它简直就是 React 开发者的军火库。

里面包含了大量经过实战检验的自定义 Hook，比如我们刚才提到的 `useMountedState`、`useHover`、`useWindowSize`等等。你只需要一行命令 `npm i react-use`，就Neng把这些神器引入项目。

import { useMountedState } from 'react-use';
import { useHover } from 'react-use';
import { useLifecycles } from 'react-use';

根据华为开发者联盟2023年的调研数据，采用自定义 Hook 的项目，代码重复率平均降低了 37.2%。在 HarmonyOS 生态课堂的实训项目中，我们也发现组件逻辑复用是提升开发效率的关键。这不仅仅是代码量的减少，geng是代码质量的飞跃。

React 自定义 Hook 就像 React 世界里的“乐高积木”，把零散的逻辑拼成一个个可复用的模块。它让我们从繁琐的细节中解放出来专注于业务本身。

下次再遇到重复逻辑时别再无脑 CV了。试着停下来想一想这段逻辑Neng不Neng抽离成一个 Hook？Neng不Neng让下一个用到它的人少写几行代码？毕竟优秀的程序员dou是会“偷懒”的艺术家——我们不是在偷懒，我们是在把时间花在geng有价值的创造上。希望今天的分享Neng给你带来一些启发，让你的 React 代码之路越走越宽！