在React Hooks 上有一节，我不太明白它在说什么：
仅从 React 函数调用钩子
不要从常规的 JavaScript 函数调用 Hooks。相反，您可以：
✅ 从 React 函数组件调用钩子。
✅ 从自定义 Hooks 调用 Hooks(我们将在下一页了解它们)。
通过遵循此规则，可以确保组件中的所有有状态逻辑从其源代码中清晰可见。
仅从 React 函数组件调用 Hook 是什么意思，React 函数与我所说的常规函数组件有何不同？
在我看来，它们是相同的：
const App = () => {
useEffect(() => //do stuff);
return (
// return some sort of stuff here
)
}
我问的原因是我对钩子的 eslint 抱怨我在这里使用useState的方式：
const checkPermissions = () => { //when I change this to 'usePermissions', it works fine
const [locPermission, setLocPermission] = useState(null); // eslint error here
//'React Hook "useState" is called in function "checkPermissions" which
//is neither a React function component or a custom React Hook function.'
//Check for and set state for permissions here
return locPermission;
};
他们的意思是一组钩子的入口点应该在 React 组件中，而不是其他地方，如果它用作钩子，例如在这个非常任意/简单的例子中：
my-utils/useCustomHook.js
任意自定义钩子
import { setState } from 'React'
export default function useCustomHook() {
const [state, setState] = useState(()=> 'anyRandomState');
// ...possibly re-using other custom hooks here,
// then returning something for our component to consume
}
MyComponent.js你的 React 组件
import React, { setState } from 'react'
import useCustomHook from 'my-utils/useCustomHook'
function MyComponent() {
const offDaHook = useCustomHook();
return (
<div>
Hi, I'm your component with a custom hook.
I see that the value returned was {offDaHook}.
</div>
);
}
random-other-business-logic.js另一个文件，该文件执行不包括渲染的其他操作
import useCustomHook from `my-utils/useCustomHook.js`
useCustomHook(); // Arbitrarily calling from non React component!
// do other things...
ESLint 可以/会抱怨的一个原因是钩子应该格式化为useXXX例如，在您的情况下，而不是checkPermissions，类似于usePermissionChecker(或useCheckPermissions取决于您在代码中的想法)应该让 linter 认识到这个函数是一个自定义钩子。
我也同意 - 这个措辞可能会得到改进 - 钩子的自定义规则一开始也让我有点循环。我不是100%确定为什么会这样，但这正是我从中得到的。
我不确定 React 是否在内部将其他变量附加到钩子中，例如计算它们的实例/原型，但猜测如果 React 团队不这样做，他们希望保留这样做的权利。无论哪种情况，使用useHooks约定将你的 React-state 代码与非 React 业务逻辑和钩子分开都要干净得多，因为它们的细微差别有点时髦。
绝对是一些有趣的研究，希望我能告诉你更多，但这只是目前来自另一个用户世界程序员。