我应该在组件内部创建函数还是将它们放在状态中（Zustand）

Question

祝你一切顺利！

这是我的问题。我应该在哪里存储函数？在组件中，还是直接在商店中？

假设我有一个名为 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)

您认为哪个是更好的选择？我想第二个变体可能会导致更少的重新渲染，所以我应该接受它。谢谢！

Answer 1

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)
}))

我应该在组件内部创建函数还是将它们放在状态中（Zustand）

Should I Create Functions Inside The Component or Put Them In The State (Zustand)

reactjs

react-state

react-state-management

zustand