React中如何实例化原生JavaScript类？最佳实践探讨

嘿，我来帮你拆解这个问题～其实你纠结的核心是「如何在React生态里合理复用这个原生JS类」，不用太纠结存state或者传props，下面给你几个实用的方案：

1. 优先用全局单例（最推荐） #

既然Cookie是浏览器全局层面的存储，整个应用只需要一个Cookies实例就够了，完全没必要在组件里反复创建或者存到state里。

做法很简单：

• 单独创建一个工具文件（比如utils/cookies.js），在里面实例化你的Cookie类并导出：

// utils/cookies.js
export class Cookies {
  // 你的原生JS Cookie实现
  set(name, value, options = {}) {
    // 具体的Cookie设置逻辑
    let cookieString = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (options.expires) cookieString += `; expires=${options.expires.toUTCString()}`;
    if (options.path) cookieString += `; path=${options.path}`;
    document.cookie = cookieString;
  }

  get(name) {
    // 读取Cookie的逻辑
    const cookies = document.cookie.split('; ');
    for (const cookie of cookies) {
      const [key, value] = cookie.split('=');
      if (decodeURIComponent(key) === name) {
        return decodeURIComponent(value);
      }
    }
    return null;
  }
}

// 直接创建实例并导出
export const cookiesInstance = new Cookies();

• 然后在Root.jsx（或者任何需要的组件）里直接导入使用：

import { cookiesInstance } from './utils/cookies';

function Root() {
  const handleSetUserCookie = () => {
    cookiesInstance.set('userId', '12345', { 
      expires: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
      path: '/'
    });
  };

  return (
    <div>
      <button onClick={handleSetUserCookie}>设置用户ID Cookie</button>
    </div>
  );
}

这种方式的好处：

• 不用存state，也不用传props，组件直接拿过来用
• 整个应用共享同一个实例，避免重复创建
• 逻辑和组件解耦，维护起来更方便

2. 用useRef存实例（适合组件内初始化的场景） #

如果你的Cookies类需要依赖组件的某些参数（比如组件挂载后才能拿到的配置），那可以用useRef来存储实例，而不是useState。

为什么不用state？因为useState的变化会触发组件重渲染，但你的Cookies实例本身不需要驱动UI更新——UI要更新的话，应该是基于Cookie的内容，而不是实例本身。

示例代码：

import { useRef, useEffect } from 'react';
import { Cookies } from './utils/cookies';

function Root({ cookieDomain }) {
  // 用useRef存实例，不会触发重渲染
  const cookiesRef = useRef(null);

  // 组件挂载时初始化实例，依赖cookieDomain参数
  useEffect(() => {
    cookiesRef.current = new Cookies({ domain: cookieDomain });
  }, [cookieDomain]);

  const handleRemoveCookie = () => {
    cookiesRef.current?.remove('userId');
  };

  return (
    <button onClick={handleRemoveCookie}>清除用户ID Cookie</button>
  );
}

3. 为什么不推荐存到state或者传props？ #

• 存state完全没必要：state是用来存储驱动UI变化的数据，Cookies实例只是一个操作工具，它的变化不会直接影响UI。如果把实例存到state里，每次实例“变化”（其实你不会改实例本身）都会触发无意义的重渲染。
• 传props不合理：如果多个组件需要用到这个实例，层层传递props会导致「props drilling」（属性透传），代码变得冗余且难维护。不如用单例或者React Context（大型应用可选）来共享实例。

补充：如果需要基于Cookie内容更新UI #

如果你的UI需要根据Cookie的内容变化（比如用户主题偏好），那应该把Cookie的值存到state里，而不是存实例：

import { useState, useEffect } from 'react';
import { cookiesInstance } from './utils/cookies';

function Root() {
  const [theme, setTheme] = useState('light');

  // 组件挂载时读取Cookie，或者监听Cookie变化（可以自己实现监听逻辑）
  useEffect(() => {
    const savedTheme = cookiesInstance.get('theme');
    if (savedTheme) setTheme(savedTheme);
  }, []);

  const handleToggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    cookiesInstance.set('theme', newTheme);
  };

  return (
    <div className={`theme-${theme}`}>
      <button onClick={handleToggleTheme}>切换主题</button>
    </div>
  );
}

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