React Native 中的 Hooks：仅从 React 函数调用 Hooks答案

【问题标题】：Hooks in React Native: Only Call Hooks from React FunctionsReact Native 中的 Hooks：仅从 React 函数调用 Hooks
【发布时间】：2019-10-17 23:36:22
【问题描述】：

有this section on React Hooks我不太明白它在说什么：

仅来自 React 函数的调用挂钩

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

✅ 从 React 函数组件调用 Hooks。

✅ 从自定义 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;
};

【问题讨论】：

当您将checkPermissions 添加到任何“React 函数”（任何返回 React 元素的函数）时，eslint 可能会停止抱怨。我同意这是令人困惑的术语。

标签： reactjs react-native react-hooks

【解决方案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 团队不这样做，他们希望保留继续这样做的权利。无论哪种情况，使用useHooks 约定将 React 状态代码与非 React 业务逻辑和钩子分开会更干净，因为它们的细微差别有点奇怪。

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

【讨论】：