如何解决为什么使用状态管理器像 Zustand 组件仍然重新渲染?
根据我的理解,如果我更改组件中的状态,这将导致组件重新渲染,但在这种情况下,我使用 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>
);
}
Zustand 状态:
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 })
})
);
解决方法
我修好了
const tempBtn = stateButton((state) => state.setBtn);
和
onScroll={() => tempBtn(1)}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。