我应该在组件内部创建函数还是将它们放在状态中(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)
}))