动态导入 React Hooks

Question

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

例如

App.js

<BaseComponent isActive />

BaseComponent.js

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

我不希望导入这些（自定义挂钩）文件并增加 BaseComponent 的大小，即使道具包含虚假值也是如此。

Answer 1

你可以挂钩，因为它只是一个函数（使用 require），但是 你不应该 因为 你不能在 conditions.

中使用钩子

见Rules of Hooks

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

如果您想有条件地使用钩子，请使用其实现中的条件 ()。

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

Answer 2

您应该提取 useActive 挂钩中的逻辑并动态导入它而不是动态导入挂钩，因为您不应该 在循环、条件或嵌套函数中调用挂钩., 签出 Rules of Hooks:

假设您的 useActive 挂钩试图更新文档标题（在现实世界中，它必须是您会考虑使用动态导入的一大块代码）

可能实现如下：

// useActive.js

import { useEffect } from "react";    
export function useActive() {
  useEffect(() => {
    document.title = "(Active) Hello World!";
  }, []);
}

并且您尝试在 BaseComponent 中使用它：

// BaseComponent.js

function BaseComponent({ isActive }) {
  if (isActive) { // <-- call Hooks inside conditions ❌
    import("./useActive").then(({ useActive }) => {
      useActive();
    });
  }
  return <p>Base</p>;
}

这里你违反了规则"don't call Hooks inside conditions"，将得到一个Invalid hook call.错误。

因此，您可以提取挂钩内部的逻辑并动态导入它，而不是动态导入挂钩：

// updateTitle.js

export function updateTitle() {
  document.title = "(Active) Hello World!"
}

然后你在钩子里面做 isActive 检查：

// BaseComponent.js

function BaseComponent({ isActive }) {
  useEffect(() => {
    if (!isActive) return;

    import("./updateTitle").then(({ updateTitle }) => {
      updateTitle();
    });
  }, [isActive]);

  return <p>Base</p>;
}

在不违反任何钩子规则的情况下工作正常。

我附上了一个 CodeSandbox 供您试用：

动态导入 React Hooks

Dynamic import of react hooks

javascript

dynamic-import

reactjs

react-hooks