"如何实现“isHook”功能？"

Question

如何检测传递的函数是否是 React Hook 函数？

isHook(useState); // return true
isHook(() => {}); // return false;

我需要知道对象属性的附加函数是否是钩子。 如果它是另一个函数的“正常函数”，我需要调用该函数。

Answer 1

可以通过将内置挂钩与已知的React挂钩进行比较来识别它们，

[React.useState, React.useReducer, /*...*/].includes(hookFn);

没有办法知道一个函数是否是自定义钩子，即一个在内部调用React内置钩子的函数。

如果某个函数可以自定义挂钩，则应根据挂钩规则对其进行调用，即在功能组件内部无条件调用。

React 自定义钩子通常具有use...名称，这样开发人员就可以通过视觉识别它们。 在客户端应用程序中，切勿通过名称来以编程方式标识它们，因为原始函数name在缩小过程中会丢失，并且可能根本不存在，这取决于定义函数的方式。

Answer 2

在这里聚会有点晚了，但希望这会有所帮助。

React 盲目地认为任何命名的函数（“use”后跟一个大写字母）都是 Hook。

知道了这一点，您可以引用一个函数，将其名称作为字符串获取，并应用相同的盲匹配。

const useMyCustomHook = () => {...}

useMyCustomHook.name; // "useMyCustomHook"

const isAHook = (ref) =>
    ref && typeof(useTest) === 'function' && /^use[A-Z]+/.test(ref.name)

isAHook(useMyCustomHook); // true