使用 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 的组件执行此操作，因为它们更有可能在错误的位置意外产生副作用。