我应该在组件内部创建函数还是将它们放在状态中(Zustand)
Should I Create Functions Inside The Component or Put Them In The State (Zustand)
祝你一切顺利!
这是我的问题。我应该在哪里存储函数?在组件中,还是直接在商店中?
假设我有一个名为 RevisionList 的组件。一个 RevisionList 呈现多个修订(Revision 组件)。您可以通过单击 select 每个修订版。所以每次修订都需要使用名为setCurRev的方法。
所以,我有两个选择。
在 Revision 组件中定义它:
const curRevId = useStore(s => s.curRevId);
const hideRefRevFinalVer = useStore(s => s.hideRefRevFinalVer)
const app = useStore(s => s.app);
const setCurRev = (id: RevId) => {
if (id === curRevId) return;
hideRefRevFinalVer();
app.setRevisionById(id);
};
或者我可以直接在状态切片中定义它:
const setCurRev = (id: RevId) => {
if (id === get().curRev?.id) return;
get().hideRefRevFinalVer();
get().app.setRevisionById(id);
};
然后像这样在 Revision 组件中使用它:
const setCurRev = useStore(s => s.setCurRev)
您认为哪个是更好的选择?我想第二个变体可能会导致更少的重新渲染,所以我应该接受它。谢谢!
IMO,设置和获取函数应该在状态片中定义。这样您就可以在许多组件中重复使用它们。
这是 Zustand 的 Github 存储库中的示例:
import omit from "lodash-es/omit"
const useStore = create(set => ({
salmon: 1,
tuna: 2,
deleteEverything: () => set({ }, true), // clears the entire store, actions included
deleteTuna: () => set(state => omit(state, ['tuna']), true)
}))
祝你一切顺利!
这是我的问题。我应该在哪里存储函数?在组件中,还是直接在商店中?
假设我有一个名为 RevisionList 的组件。一个 RevisionList 呈现多个修订(Revision 组件)。您可以通过单击 select 每个修订版。所以每次修订都需要使用名为setCurRev的方法。
所以,我有两个选择。 在 Revision 组件中定义它:
const curRevId = useStore(s => s.curRevId);
const hideRefRevFinalVer = useStore(s => s.hideRefRevFinalVer)
const app = useStore(s => s.app);
const setCurRev = (id: RevId) => {
if (id === curRevId) return;
hideRefRevFinalVer();
app.setRevisionById(id);
};
或者我可以直接在状态切片中定义它:
const setCurRev = (id: RevId) => {
if (id === get().curRev?.id) return;
get().hideRefRevFinalVer();
get().app.setRevisionById(id);
};
然后像这样在 Revision 组件中使用它:
const setCurRev = useStore(s => s.setCurRev)
您认为哪个是更好的选择?我想第二个变体可能会导致更少的重新渲染,所以我应该接受它。谢谢!
IMO,设置和获取函数应该在状态片中定义。这样您就可以在许多组件中重复使用它们。
这是 Zustand 的 Github 存储库中的示例:
import omit from "lodash-es/omit"
const useStore = create(set => ({
salmon: 1,
tuna: 2,
deleteEverything: () => set({ }, true), // clears the entire store, actions included
deleteTuna: () => set(state => omit(state, ['tuna']), true)
}))