React Native 中的钩子：仅从 React 函数调用钩子

Question

有关于 React Hooks 的这一节，我真的不明白它在说什么：

仅从 React 函数调用钩子

不要从常规 JavaScript 函数调用 Hook。相反，您可以：

? 从 React 函数组件调用 Hook。

? 从自定义 Hooks 调用 Hooks（我们将在下一页了解它们）。

通过遵循此规则，您可以确保组件中的所有有状态逻辑在其源代码中都清晰可见。

仅从 React 函数组件调用 Hooks 是什么意思，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;
};

Answer 1

他们的意思是，如果将一组钩子用作钩子，则它们的入口点应该位于 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 团队不这样做，他们将保留未来这样做的权利。无论哪种情况，使用约定将 React 状态代码与非 React 业务逻辑和钩子分开都会更清晰，useHooks因为它们的细微差别有点奇怪。

绝对是一些有趣的东西，希望我能告诉你更多，但这只是目前来自另一个用户世界程序员的。