react 单例实现
单例模式简介
单例模式确保一个类只有一个实例，并提供全局访问点。在 React 中，可以通过模块导出、静态属性或上下文（Context）实现单例。
模块导出的单例
利用 JavaScript 模块的缓存机制，导出的对象天然是单例。
// SingletonService.js
class SingletonService {
constructor() {
this.data = [];
}
addItem(item) {
this.data.push(item);
}
}
const instance = new SingletonService();
export default instance;在组件中直接导入该实例：
import singletonService from './SingletonService';
function ComponentA() {
singletonService.addItem('Item from A');
return <div>Component A</div>;
}静态属性单例
通过类的静态属性保存唯一实例。
class SingletonService {
static instance = null;
constructor() {
if (SingletonService.instance) {
return SingletonService.instance;
}
this.data = [];
SingletonService.instance = this;
}
addItem(item) {
this.data.push(item);
}
}
export default SingletonService;使用时：
const service1 = new SingletonService();
const service2 = new SingletonService();
console.log(service1 === service2); // trueReact Context 单例
通过 React Context 提供全局共享状态，间接实现单例。
import React, { createContext, useContext } from 'react';
const SingletonContext = createContext();
export function SingletonProvider({ children }) {
const data = [];
const addItem = (item) => {
data.push(item);
};
return (
<SingletonContext.Provider value={{ data, addItem }}>
{children}
</SingletonContext.Provider>
);
}
export function useSingleton() {
return useContext(SingletonContext);
}在组件中使用：
function ComponentB() {
const { addItem } = useSingleton();
addItem('Item from B');
return <div>Component B</div>;
}注意事项
- 模块导出：适用于纯逻辑层，不依赖 React 生命周期。
- 静态属性：需注意构造函数逻辑的幂等性。
- Context：适合需要响应式更新的场景，但会触发组件重新渲染。
根据需求选择合适的方式，模块导出和静态属性适合非 UI 逻辑，Context 适合状态管理。
