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

Question

Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.

✅ Call Hooks from custom Hooks (we’ll learn about them on the next page).

By following this rule, you ensure that all stateful logic in a component is clearly visible from its source code.

仅从 React 函数组件调用 Hooks 是什么意思？React 函数与我所说的常规函数组件有何不同？

在我看来它们是一样的：

const App = () => {
    useEffect(() => //do stuff);

    return (
        // return some sort of stuff here
    )
}

我问的原因是我的 hooks 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 组件内，而不是其他地方，如果它被用作钩子，例如在这个非常 arbitrary/simple 的例子中：

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 could/would 抱怨的一个原因是 hooks 应该被格式化为 useXXX 例如在你的情况下，而不是 checkPermissions，像 usePermissionChecker （或 useCheckPermissions 取决于你在代码中的想法）应该让 linter 认识到这个函数是一个自定义钩子。

我也同意——这种措辞可能会得到改进——钩子的自定义规则一开始也让我有点困惑。我不是 100% 确定为什么会这样，但这正是我从中得到的。

我不确定 React 是否在内部将其他变量附加到钩子上，例如计算它们的 instances/prototypes 但我猜测如果 React 团队不这样做，他们会保留继续这样做的权利。在任何一种情况下，使用 useHooks 约定将 React 状态代码与非 React 业务逻辑和挂钩分开会更清晰，因为它们的细微差别有点古怪。

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

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

Hooks in React Native: Only Call Hooks from React Functions

reactjs

react-native

react-hooks