使用 React Hooks 防止重新渲染

Question

我正在zustand为全局状态实施，但在设置自己的全局状态时遇到了同样的问题。

只要我将一个组件附加到一个简单的 useStore 挂钩上，我的组件就会在每次更新时呈现两次。尽管发生了这种情况：

• 我不更新任何状态

• 没有道具被改变

• 我将组件包装在 React.memo() 中只是为了确定

• 商店（使用 zustand 创建）中的任何内容都没有改变 - 除了应该触发一次更新的一项更改。

这是一个 Codesandbox - 一个您可以检查日志的最小示例 - 在重新加载和每次更新后，它总是记录两次。对于那些宁愿在没有运行的情况下查看代码的人：

import React from "react";

import create from "zustand";

const useStore = create((set) => ({

  bears: 0,

  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),

  removeAllBears: () => set({ bears: 0 })

}));

const sessionId = Math.random().toString().slice(2, 7);

const App = React.memo(() => {

  const { bears, increasePopulation } = useStore((state) => state);

  console.log("RENDER Bears", bears, sessionId); // always logs twice

  return (

    <div className="App">

      <h1>Hello CodeSandbox</h1>

      <h2>Start editing to see some magic happen.!</h2>

      <button onClick={increasePopulation}>increase</button>

    </div>

  );

});

export default App;

现在，我明白有一个额外的渲染并不是真正的问题，只是当我的应用程序增长时，我倾向于将这些组件中的几个嵌套在一起，所以当我确实想最小化渲染量时，很难知道从哪里开始。

所以，我的问题是：

• 为什么会这样？

• 我可以防止这种双重渲染吗？如果可以，怎么做？

• 如果不是，处理这个问题的正确方法是什么？

Answer 1

这可能是因为您的应用程序包装在React.StrictMode. React 核心团队表示双重渲染是有意为之的。这是 StrictMode 的一个有意特性。这只发生在开发中，并有助于发现放入渲染阶段的意外副作用。我们只对带有 Hooks 的组件执行此操作，因为它们更有可能在错误的位置意外产生副作用。