javascript - 自定义 React Hook 是否会导致依赖组件的重新渲染？

Question

我刚刚创建了一个在内部使用 useState 和 useEffect 的自定义 Hook 。

当我将该钩子(Hook)导入另一个 React 函数组件时，将其称为 ComponentA，只要自定义钩子(Hook)中的状态发生变化，ComponentA 就会重新渲染。

当它使用的钩子(Hook)返回新值时，ComponentA 应该重新渲染是否正确？

请参阅代码中的注释，以获取更多问题说明。

代码:

const ComponentA = props => {
  const myValue = useMyValue();

  // COMMENTS:
  // Whenever myValue returns a new value, ComponentA re-renders
  // This in turn will cause the useMyValue() function to run.
  // Seems unnatural with such a circular effect.
  // Is my suspicion unfounded? Is this how it should work?
}

Answer 1

自定义可以简单地视为从功能组件内执行的函数，并且有效地将自定义钩子(Hook)中存在的钩子(Hook)转移到组件。因此，如果自定义钩子(Hook)中的代码直接编写在功能组件中，则通常会导致组件重新渲染的任何更改都会导致重新渲染，即使该钩子(Hook)是自定义钩子(Hook)也是如此。