javascript - 动态导入 React Hooks

Question

我们可以根据传递给组件的值动态导入钩子(Hook)吗？

例如。

App.js

<BaseComponent isActive />

基础组件.js

if(props.isActive) {
  // import useActive (custom Hook)
}

我不希望导入这些(自定义 Hook )文件并增加 BaseComponent 的大小，即使 Prop 包含虚假值也是如此。

Answer 1

您可以 dynamically import钩子(Hook)，因为它只是一个函数(使用 require)，但是你不应该因为你不能在条件中使用钩子(Hook)。。 p>

参见 Rules of Hooks

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions.

如果您想有条件地使用 Hook ，请在其实现 ( look for example at skip option of useQuery hook from Apollo GraphQL Client ) 中使用条件。

const useActive = (isUsed) => {
  if (isUsed) {
    // logic
  }
}