每次使用自定义钩子使重新渲染

Question

我创建了一个自定义钩子，使用redux变量 isLoading ，可以将 isLoading 更改为true或false。我在组件中导入useLoading挂钩。但是当触发调度时，我的组件总是重新渲染，我不明白为什么。 我的演示非常简单https://codesandbox.io/s/use-custom-hook-loading-oqn8e。 您能否解释一下为什么我的组件总是重新渲染并建议我修复它。非常感谢。

Answer 1

问题：

基本上，react框架可以在呈现阶段将组件呈现几乎 any 次，以计算差异以查看在提交阶段需要向DOM刷新的内容。您的控制台日志位于函数主体中，因此每次react在计算此差异时都会执行该日志。

“渲染阶段” ...可能被React暂停，中止或 重新启动 。

解决方案：

尝试使用效果来记录任何内容，因为可以保证每个渲染周期（渲染+提交）运行 一次 。在此，每次对setLoading的更新/调用都只会看到一个日志。

function Main() {
  useEffect(() => {
    console.log("Main re-render");
  })
  const [, setLoading] = useLoading();
  return (
    <div>
      <h3>Main</h3>
      <button onClick={() => setLoading(true)}>Start Loading</button>
      <button onClick={() => setLoading(false)}>End Loading</button>
    </div>
  );
}

Answer 2

组件正在重新呈现，因为其状态和上下文正在更新。这个组件很快就被释放了，React仍然对DOM不满意，只写改变了的东西，所以这不是问题。

此外，您不应该像这样将Redux存储状态复制到React状态，loading中的useLoading状态可能会过时。而是直接使用useSelector而不使用useState并只是调度事件以对其进行设置。 https://codesandbox.io/s/use-custom-hook-loading-w4pc0?file=/src/hooks/loading.js