能否用Zustand热切换同字段多状态存储？替代React Context优化重渲染

我正在开发一个能通过同一界面接入多个不同聊天机器人的应用，每个机器人的API完全不同，但已将差异封装为两个React Hook。示例结构如下：

const botA = { messages:[], sendMessage: () => {}}

const botB = { messages:[], sendMessage: () => {}}

我的目标是维护多个完全独立的状态，用户切换到botB后再切回botA时，botA原有的状态（如messages）能保留。

目前我通过React Hook + React.useContext实现了该功能，但Context会导致应用频繁重渲染。想知道是否可以用Zustand实现？核心约束是底层组件只需调用sendMessage或读取messages，无需感知多聊天机器人的存在（因此像sendMessageA这类方案不符合要求）。也接受其他解决方案，可能我对问题或方案的界定存在偏差。

以下是当前基于Context实现的最小React应用代码示例：

package.json #

{
  "scripts": {
    "start": "react-scripts start"
  },
  "dependencies": {
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

public/index.html #

<html></html>

src/index.js #

import React from "react"
import { createRoot } from "react-dom/client"

const StateContext = React.createContext()

const useChatbotA = () => {
  const [messages, setMessages] = React.useState([])
  const sendMessage = (newMessage) => {
    setMessages((prevMessages) => [...prevMessages, newMessage])
  }
  return {
    messages,
    sendMessage,
  }
}
const useChatbotB = () => {
  const [messages, setMessages] = React.useState([])
  const sendMessage = (newMessage) => {
    setMessages((prevMessages) => [
      ...prevMessages,
      newMessage.split("").reverse().join(""),
    ])
  }
  return {
    messages,
    sendMessage,
  }
}

const Conversation = () => {
  const { messages } = React.useContext(StateContext)
  return (
    <ol>
      {messages.map((message, index) => (
        <li key={index}>{message}</li>
      ))}
    </ol>
  )
}
const InputField = () => {
  const { sendMessage } = React.useContext(StateContext)
  return (
    <input
      onKeyDown={(e) => {
        console.log(e)
        if (e.key === "Enter") {
          sendMessage(e.target.value)
          e.target.value = ""
        }
      }}
    />
  )
}
const ToggleButton = () => {
  const { activateState, activeStateName } = React.useContext(StateContext)
  return (
    <div>
      <button
        onClick={() => activateState("a")}
        style={{ fontWeight: activeStateName === "a" ? "bold" : "inherit" }}
      >
        Chatbot A
      </button>
      <button
        onClick={() => activateState("b")}
        style={{ fontWeight: activeStateName === "b" ? "bold" : "inherit" }}
      >
        Chatbot B
      </button>
    </div>
  )
}

const App = () => {
  const stateA = useChatbotA()
  const stateB = useChatbotB()
  const [activeStateName, activateState] = React.useState("a")
  let activeState = stateA
  if (activeStateName === "b") activeState = stateB
  return (
    <StateContext.Provider
      value={{
        messages: activeState.messages,
        sendMessage: activeState.sendMessage,
        activeStateName,
        activateState,
      }}
    >
      <ToggleButton />
      <Conversation />
      <InputField />
    </StateContext.Provider>
  )
}
// Clear the existing HTML content
document.body.innerHTML = '<div id="app"></div>'

// Render your React component instead
const root = createRoot(document.getElementById("app"))
root.render(<App />)

Zustand非常适配这个场景，它支持细粒度状态订阅，能避免不必要的重渲染，同时可轻松维护多个机器人的独立状态，底层组件无需感知多机器人的存在。

步骤1：安装Zustand #

npm install zustand

步骤2：创建Zustand Store #

在Store中维护所有机器人的状态和当前激活标识，通过自定义Hook封装，让底层组件直接获取当前机器人的状态和方法：

import { create } from 'zustand';

// 创建主状态Store
const useChatStore = create((set, get) => ({
  // 存储每个机器人的独立状态
  bots: {
    a: {
      messages: [],
      sendMessage: (newMessage) => set(state => ({
        bots: {
          ...state.bots,
          a: {
            ...state.bots.a,
            messages: [...state.bots.a.messages, newMessage]
          }
        }
      }))
    },
    b: {
      messages: [],
      sendMessage: (newMessage) => set(state => ({
        bots: {
          ...state.bots,
          b: {
            ...state.bots.b,
            messages: [...state.bots.b.messages, newMessage.split('').reverse().join('')]
          }
        }
      }))
    }
  },
  activeBot: 'a',
  setActiveBot: (botId) => set({ activeBot: botId })
}));

// 封装自定义Hook，对外暴露当前激活机器人的状态和方法
export const useActiveBot = () => {
  return useChatStore(state => ({
    messages: state.bots[state.activeBot].messages,
    sendMessage: state.bots[state.activeBot].sendMessage,
    activeStateName: state.activeBot,
    activateState: state.setActiveBot
  }));
};

步骤3：重构组件，移除Context #

将原依赖Context的组件改为使用useActiveBot Hook，组件无需感知多机器人逻辑：

import React from "react"
import { createRoot } from "react-dom/client"
import { useActiveBot } from './store';

const Conversation = () => {
  const { messages } = useActiveBot();
  return (
    <ol>
      {messages.map((message, index) => (
        <li key={index}>{message}</li>
      ))}
    </ol>
  )
}

const InputField = () => {
  const { sendMessage } = useActiveBot();
  return (
    <input
      onKeyDown={(e) => {
        if (e.key === "Enter") {
          sendMessage(e.target.value)
          e.target.value = ""
        }
      }}
    />
  )
}

const ToggleButton = () => {
  const { activateState, activeStateName } = useActiveBot();
  return (
    <div>
      <button
        onClick={() => activateState("a")}
        style={{ fontWeight: activeStateName === "a" ? "bold" : "inherit" }}
      >
        Chatbot A
      </button>
      <button
        onClick={() => activateState("b")}
        style={{ fontWeight: activeStateName === "b" ? "bold" : "inherit" }}
      >
        Chatbot B
      </button>
    </div>
  )
}

const App = () => {
  return (
    <div>
      <ToggleButton />
      <Conversation />
      <InputField />
    </div>
  )
}

document.body.innerHTML = '<div id="app"></div>'
const root = createRoot(document.getElementById("app"))
root.render(<App />)

方案优势 #

• 减少重渲染：Zustand的细粒度订阅只会让依赖对应状态的组件更新，比如切换机器人时，只有Conversation和ToggleButton会更新，避免Context导致的全局重渲染。
• 组件无感知：通过useActiveBot封装，底层组件只需调用sendMessage和读取messages，完全不需要知道多机器人的存在。
• 扩展性强：后续新增机器人时，只需在Store中添加对应配置，无需修改组件逻辑。

其他可选方案 #

如果聊天机器人涉及异步API请求，React Query也是合适的选择——它可以自动缓存每个机器人的消息状态，支持自动重取、缓存失效等功能。若仅需客户端状态管理，Zustand更轻量直接。

内容的提问来源于stack exchange，提问作者Matthias Durivet