如何创建多个Zustand Store实例？组件循环渲染场景下状态隔离问题求助

我之前碰到过好几个开发者问这个问题，其实核心就一点——别用全局单例的Zustand Store，而是用工厂函数为每个子组件生成专属的Store实例。你之前尝试自定义函数没成功，大概率是没把create的调用放到正确的地方，或者没确保每个子组件都触发一次实例创建。

下面给你两种可行的实现方案，附带完整代码示例：

方案一：子组件内部实例化专属Store #

这种方式最直观，每个子组件自己调用工厂函数生成独立的Store，完全隔离状态。

第一步：创建Store工厂函数 #

先写一个返回Zustand Store的工厂函数，每次调用它都会生成一个全新的Store实例：

import { create } from 'zustand';

// 工厂函数：接收初始值，返回新的Store实例
const createChildStore = (initialValue = 0) => {
  return create((set) => ({
    count: initialValue,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
    // 可以添加更多自定义状态和方法
  }));
};

第二步：子组件中使用工厂函数 #

在子组件内部调用工厂函数，这样每个子组件实例都会拥有自己的Store：

const ChildComponent = ({ initialCount }) => {
  // 关键：每个子组件实例都会执行这一行，生成专属Store
  const useChildStore = createChildStore(initialCount);
  const { count, increment, decrement } = useChildStore();

  return (
    <div style={{ margin: '10px', padding: '10px', border: '1px solid #eee' }}>
      <p>当前计数：{count}</p>
      <button onClick={increment} style={{ marginRight: '5px' }}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
};

第三步：父组件map渲染子组件 #

父组件正常遍历数据渲染子组件即可，每个子组件的状态完全独立：

const ParentComponent = () => {
  // 模拟需要渲染的子组件数据
  const childItems = [10, 20, 30];

  return (
    <div>
      {childItems.map((initialVal, index) => (
        <ChildComponent 
          key={index} 
          initialCount={initialVal} 
        />
      ))}
    </div>
  );
};

方案二：父组件提前创建Store实例并传递 #

如果需要在父组件中访问或控制子组件的状态（比如批量重置所有子组件计数），可以在父组件中为每个子项创建Store实例，再传递给子组件：

父组件中创建Store实例 #

const ParentComponent = () => {
  const childItems = [10, 20, 30];
  // 为每个子项生成独立Store实例
  const childStores = childItems.map(val => createChildStore(val));

  // 示例：批量重置所有子组件计数
  const resetAll = () => {
    childStores.forEach(store => store.setState({ count: 0 }));
  };

  return (
    <div>
      <button onClick={resetAll} style={{ marginBottom: '10px' }}>重置所有计数</button>
      {childStores.map((store, index) => (
        <ChildComponent 
          key={index} 
          store={store} 
        />
      ))}
    </div>
  );
};

子组件接收Store实例 #

const ChildComponent = ({ store }) => {
  const { count, increment, decrement } = store();

  return (
    <div style={{ margin: '10px', padding: '10px', border: '1px solid #eee' }}>
      <p>当前计数：{count}</p>
      <button onClick={increment} style={{ marginRight: '5px' }}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  );
};

关键注意事项 #

• 确保每个子组件对应一次create调用：这是状态隔离的核心，只要每次调用create都会生成全新的Store实例，就不会出现共用状态的问题。
• 正确设置key：父组件map渲染时，key要使用唯一标识（比如数据的ID，而不是索引，如果有稳定ID的话），避免组件复用导致的Store实例混乱。
• 工厂函数可扩展：你可以根据需求给工厂函数传递更多参数，比如子组件的ID、复杂的初始状态对象等，满足不同业务场景。

内容的提问来源于stack exchange，提问作者Fred Maciel de Oliveira