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

Question

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

要测试，滚动窗口并打开控制台，这将显示每次滚动/更新 Zusand 状态时都会触发 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)}