Question

我刚刚创建了一个内部使用@MockBean和useState的自定义钩子。

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

ComponentA在使用的钩子返回新值时是否应该重新渲染？

有关其他问题的说明，请参见代码中的注释。

代码：

ComponentA

Answer 1

自定义可以简单地视为一个函数，可以从功能组件内部执行，并且有效地将自定义钩子中存在的钩子转移到该组件上。因此，即使直接在功能组件内编写了自定义挂钩中的代码，通常会导致组件重新呈现的任何更改也将导致重新呈现，即使该挂钩是自定义挂钩。

Answer 2

钩子是简单的函数，可以使用其他钩子，并且一个函数除非被调用就不能返回值，在这里，如果我们要在自定义钩子中维护useState或useEffect，则在渲染组件时首先使用componentA实例调用自定义钩子（此处将调用useMyValue），而后者又在其中使用相同的componentA调用其中的useState或useEffect钩子实例，然后将初始化值返回给componentA。

const useMyValue = () => {
  const [count, setCount] = useState(0);
  // ...do something
  return [count, setCount];
};

const ComponentA = (props) => {
  const [value, setValue] = useMyValue();
};

现在，如果要更新componentA中的 value ，我们正在调用setValue，该setValue从自定义钩子引用了setCount，则count得到了更新，但useState还将更新/重新渲染其组件保存实例，这里是componentA，然后在重新渲染时，componentA将再次调用useMyValue钩子，后者又再次调用useState并接收更新的计数值，最后将其更新的值返回给componentA。

自定义React挂钩是否应导致重新渲染相关组件？

2 个答案: