【问题标题】：using custom hook make re-render every time每次使用自定义钩子重新渲染
【发布时间】：2020-06-19 04:38:43
【问题描述】：

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

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

组件正在重新渲染，因为它的状态和上下文正在更新。这个组件快速重新渲染，React 仍然与 DOM 不同，只写入更改的内容，所以这不是问题。

另外，你不应该像这样将 Redux 存储状态复制到 React 状态，useLoading 中的 loading 状态很可能会过时。相反，直接使用useSelector 而不使用useState，然后调度事件来设置它。 https://codesandbox.io/s/use-custom-hook-loading-w4pc0?file=/src/hooks/loading.js

【讨论】：

感谢您的回答，当我在主组件中使用 useDispatch current 时，它不再呈现了

【解决方案2】：

问题：

基本上，React 框架可以在渲染阶段几乎任意次渲染组件，以计算差异，以查看在提交阶段需要刷新到 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>
  );
}

【讨论】：