Question

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

仅来自React函数的呼叫挂钩

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

✅从React函数组件中调用Hook。

✅从自定义挂钩中调用挂钩（我们将在下一页中了解它们）。

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

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

在我看来，它们是相同的：

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

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

我问的原因是我无所适从，这是在抱怨我在这里使用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
}

MyComponent.js 您的React组件

import React, { setState } from 'react'
import useCustomHook from 'my-utils/useCustomHook'

function MyComponent() {
     useCustomHook();
}

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的东西，具体取决于您在代码中的想法）之类的东西应该可以使lint认识到此函数是一个自定义钩子。

我也同意-这个措词可能会得到改善-钩子的自定义规则一开始也让我有点循环。我不是100％知道为什么会这样，但这就是我从中得到的结果。我不确定React是否在内部将其他变量附加到钩子上，例如对它们的实例/原型进行计数，但是我猜想如果他们不这样做，他们将保留继续进行此操作的权利。无论哪种情况，使用useHooks约定将React状态代码与非React业务逻辑和钩子分开都是一种更清洁的方法，因为它们之间的细微差别有点时髦。

绝对值得研究，希望我现在能告诉您更多信息。

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

1 个答案: