在HoC中使用react钩子时发出警告

Question

我已经创建了一个高阶组件，它应该为我的组件添加一些额外的功能。然而，当我在这个组件中使用反应钩子时，我会得到以下eslint警告。

不能在回调内调用React钩子“React.useffect”。必须在React函数组件或自定义React钩子函数中调用React钩子。（吊钩/吊钩规则）

为什么我会收到这个警告？在HoC中使用钩子被认为是不好的做法吗？

最简单的例子：

const Hello = props => <p>Greetings {props.name}</p>;

const Wrapper = Component => props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

export default Wrapper(Hello)

Codesandbox：https://codesandbox.io/s/proud-tree-5kscc

Answer 1

您可以在功能组件或自定义钩子中使用反应钩子。重写您的HOC：

const Hello = props => <p>Greetings {props.name}</p>;

const HookDoSomething = () => {
  React.useEffect(() => {
    // Do something here
  }, []);
}

const Wrapper = Component => props => {
  HookDoSomething()
  return <Component {...props} />;
};

export default Wrapper(Hello)

Answer 2

官方文件说：

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

✅ 来自React函数组件的调用挂钩。

✅ 从自定义钩子调用钩子。

正如@asafavi所说，您应该将HOC重构为一个定制的钩子，以避免违反钩子的规则。

原因在常见问题解答中描述如下：

React跟踪当前渲染组件。多亏了钩子的规则，我们知道钩子只能从React组件调用（或者自定义钩子，也只能从React组件调用）。

有一个与每个组件相关的“存储单元”的内部列表。它们只是我们可以放一些数据的JavaScript对象。当你调用像useState（）这样的钩子时，它会读取当前单元格（或者在第一次渲染时初始化它），然后将指针移动到下一个单元格。这就是多个useState（）调用各自获得独立本地状态的方式。

Answer 3

转换

props => {
  React.useEffect(() => {
    // Do something here
  }, []);
  return <Component {...props} />;
};

在您的HOC内部，指向一个函数（react hooks/rules of hooks抛出您在HOC返回的arrow函数中使用时显示的警告）

所以，把它改成

const Wrapper = Component =>
  function Comp(props) {
    React.useEffect(() => {
      console.log("useEffect");
    }, []);
    return <Component {...props} />;
  };

效果就会被触发。

下面是一个关于codesandbox的工作示例