如何在React中封装useMount/useUnmount避免useEffect依赖警告

1. 修复自定义Hook的规则报错 #

你封装的Hook命名已经符合React自定义Hook的use开头规范，正常在组件顶层调用不会触发「非组件函数内调用useEffect」的报错，如果出现这个提示请先检查两个点：

• 调用useMount/useUnmount的位置是否在函数组件的顶层，不要在条件判断、循环、事件回调函数内调用
• 确认你的eslint-plugin-react-hooks版本是官方正式版，它会自动识别use开头的函数为自定义Hook，不会误报调用规则

2. 正确封装无警告的生命周期Hook #

你之前的封装存在两个问题：一是useUnmount存在闭包陷阱，二是没有彻底规避eslint依赖检查的逻辑，下面是可用的封装实现：

import { useEffect, useRef } from 'react';

// 挂载钩子
export const useMount = (callback) => {
  useEffect(() => {
    callback();
  }, []);
};

// 卸载钩子
export const useUnmount = (callback) => {
  // 用ref存储最新的callback，避免闭包问题
  const callbackRef = useRef(callback);
  callbackRef.current = callback;

  useEffect(() => {
    return () => {
      callbackRef.current();
    };
  }, []);
};

使用方式和你预期的完全一致，在组件内直接调用即可，不需要加任何eslint禁用注释：

export default function MusicPlayback(...) {
  // ...
  useUnmount(stopMusic);
  // ...
}

这个方案的优势： #

• 完全规避eslint的依赖项警告：useEffect的依赖项只有空数组，用到的callbackRef是稳定的ref引用，不需要加入依赖
• 解决了闭包陷阱：如果你的callback依赖组件内部状态，每次渲染都会更新ref里的callback引用，卸载时执行的永远是最新的逻辑，不会拿到旧的状态值
• 符合React Hooks的使用规则，不会触发任何运行时警告

额外说明 #

如果不想封装Hook，也可以用useCallback把你要执行的卸载逻辑包一层，保证引用稳定后再传入useEffect的依赖项，就不会触发重复执行的问题，但这种方式需要写更多冗余代码，不如自定义Hook省心。

内容的提问来源于stack exchange，提问作者Jordan