为什么使用像Zustand这样的状态管理器组件仍然会重新渲染

Question

根据我的理解，如果我更改组件中的状态，这将导致组件重新渲染，但在这种情况下，我使用Zustand将值存储在组件之外，但为什么每次滚动/更新Zustand状态时，我的组件仍在重新渲染？

要进行测试，请滚动窗口并打开控制台，每次我滚动/更新Zustand状态时，都会显示console.log被激发。

制作示例演示：https://codesandbox.io/s/jovial-stonebraker-rivjo?file=/src/App.js

代码App.js

import { stateButton } from "./stateButton";
import { Scrollbar } from "react-scrollbars-custom";
export default function App() {
const { setBtn } = stateButton();
console.log("rendering");
return (
<div>
<Scrollbar
style={{ width: "250px", height: "50px" }}
onScroll={() => setBtn(1)}
>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
<div>Test</div>
</Scrollbar>
</div>
);
}

祖斯坦德州：

import create, { GetState, SetState } from "zustand";
export type typeBtn = {
getBtn: number;
setBtn: (item: number) => void;
};
export const stateButton = create<typeBtn>(
(set: SetState<typeBtn>, get: GetState<typeBtn>) => ({
getBtn: 0,
setBtn: (item) => set({ getBtn: item })
})
);

Answer 1

我修复了

const tempBtn = stateButton((state) => state.setBtn);

和

onScroll={() => tempBtn(1)}