基于Vite与Zustand的通知组件优化实现方案咨询

嘿，你的这个问题其实很多做React项目的同学都会碰到——重复写相同的状态和组件渲染代码确实很冗余，用Zustand来实现全局通知完全是个好主意！下面给你一步步拆解实现方案：

1. 创建Zustand全局通知Store #

首先我们先搭建一个专门管理通知状态的Store，它负责存储通知的内容、类型，以及提供更新/清除通知的方法：

// stores/notificationStore.js
import { create } from 'zustand';

export const useNotificationStore = create((set) => ({
  // 初始状态：没有通知
  notification: null,
  // 设置通知的方法，接收type（比如success/error/warning）和message
  setNotification: (type, message) => set({
    notification: { type, message }
  }),
  // 清除通知的方法
  clearNotification: () => set({ notification: null })
}));

2. 在全局根组件中只渲染一次Notification组件 #

接下来，把你的<Notification>组件放到项目的根组件（比如App.jsx或者main.jsx的顶层组件）里，只需要渲染一次就够了！然后从Store中读取通知状态，控制它的显示：

// App.jsx
import { useNotificationStore } from './stores/notificationStore';
import Notification from './components/Notification';

function App() {
  const notification = useNotificationStore(state => state.notification);
  const clearNotification = useNotificationStore(state => state.clearNotification);

  return (
    <div className="app-container">
      {/* 其他全局组件/路由内容 */}
      {/* 全局通知组件，只在这里渲染一次 */}
      {notification && (
        <Notification
          type={notification.type}
          message={notification.message}
          onClose={clearNotification}
        />
      )}
    </div>
  );
}

export default App;

这里建议给你的<Notification>组件加一个onClose属性，用来触发清除通知的方法，不管是用户手动关闭还是自动关闭都能用上。

3. 在任意组件中调用通知 #

现在，你可以在项目里的任何组件中，直接调用Store的方法来触发通知，完全不用再重复写useState和渲染组件的代码了！比如在一个表单提交组件里：

// components/LoginForm.jsx
import { useNotificationStore } from '../stores/notificationStore';

function LoginForm() {
  const setNotification = useNotificationStore(state => state.setNotification);

  const handleLogin = async () => {
    try {
      // 假设这里是登录请求逻辑
      await loginApi();
      // 触发成功通知
      setNotification('success', '登录成功！');
      // 可以加个自动关闭的逻辑，比如3秒后清除
      setTimeout(() => {
        useNotificationStore.getState().clearNotification();
      }, 3000);
    } catch (error) {
      // 触发错误通知
      setNotification('error', '登录失败，请检查账号密码');
    }
  };

  return (
    <form onSubmit={handleLogin}>
      {/* 表单内容 */}
      <button type="submit">登录</button>
    </form>
  );
}

额外优化建议 #

• 自动关闭逻辑：你也可以把自动关闭的逻辑放到Store的setNotification方法里，这样不用每次调用都写setTimeout：

  setNotification: (type, message, duration = 3000) => {
    set({ notification: { type, message } });
    setTimeout(() => set({ notification: null }), duration);
  }
  

• 通知队列：如果需要支持同时显示多个通知，可以把notification改成数组，然后在Store里实现添加/移除队列的方法，这样多个通知可以依次显示或者堆叠显示。
• 样式优化：给全局通知组件加个固定定位（比如右上角），避免影响页面其他内容的布局。

这样一来，你的通知组件只需要渲染一次，所有需要触发通知的地方只需要调用Store的方法即可，代码冗余问题就解决啦！

备注：内容来源于stack exchange，提问作者Harsha Bana