React集成自定义类实例作为状态的问题及解决方案咨询

React的状态更新依赖引用变化触发重渲染：你通过useState保存了ArrayManager实例，调用push只是修改了实例内部的数组，但实例本身的引用从未改变——React会认为状态没有发生变化，因此不会触发组件重渲染。

方案1：给自定义类添加订阅机制，触发React状态更新 #

给ArrayManager增加订阅/发布功能，让组件能感知到实例内部的变化，进而调用React的状态更新函数触发重渲染。

修改ArrayManager类：

class ArrayManager extends Array {
  constructor(initialArray = []) {
    super();
    this.subscribers = new Set();
    if (Array.isArray(initialArray)) this.push(...initialArray);
  }

  push(...el) {
    console.log('Pushing ' + JSON.stringify(el));
    super.push(...el);
    this.notify(); // 通知所有订阅者状态变化
  }

  // 订阅状态变化，返回取消订阅函数
  subscribe(callback) {
    this.subscribers.add(callback);
    return () => this.subscribers.delete(callback);
  }

  // 发布状态更新通知
  notify() {
    this.subscribers.forEach(callback => callback());
  }
};

export default ArrayManager;

修改组件，订阅实例变化并触发重渲染：

import ArrayManager from "./arr.js";
import React, { createContext, useContext, useState, useEffect } from 'react';

const MemoryContext = createContext(null);

const MyComponent = () => {
  const memory = useContext(MemoryContext);

  const handleClick = () => memory.push({type: 'system', value: 'Hello World'});

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <ul>
        { memory.map((a, i) => <li key={i}>{a.value}</li>) }
      </ul>
    </div>
  );
};

export default function App() {
  const [arrayManager] = useState(new ArrayManager([{type: 'system', value: 'Hello World'}]));
  const [, setTrigger] = useState(0); // 用空状态触发重渲染

  useEffect(() => {
    // 订阅实例变化，每次变化修改触发状态
    return arrayManager.subscribe(() => setTrigger(prev => prev + 1));
  }, [arrayManager]);

  return (
    <MemoryContext.Provider value={arrayManager}>
      <MyComponent />
    </MemoryContext.Provider>
  );
}

方案2：正确使用useSyncExternalStore #

之前使用失败大概率是因为没有正确实现快照生成和订阅逻辑。useSyncExternalStore需要三个核心参数：订阅函数、获取状态快照的函数、可选的服务器快照函数。

沿用带订阅功能的ArrayManager，修改组件如下：

import ArrayManager from "./arr.js";
import React, { createContext, useContext, useState, useSyncExternalStore } from 'react';

const MemoryContext = createContext(null);

const MyComponent = () => {
  const memory = useContext(MemoryContext);
  
  // 用useSyncExternalStore监听外部存储变化
  const currentMemory = useSyncExternalStore(
    (callback) => memory.subscribe(callback),
    () => [...memory] // 返回新数组作为快照，确保引用变化被React检测到
  );

  const handleClick = () => memory.push({type: 'system', value: 'Hello World'});

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <ul>
        { currentMemory.map((a, i) => <li key={i}>{a.value}</li>) }
      </ul>
    </div>
  );
};

export default function App() {
  const [arrayManager] = useState(new ArrayManager([{type: 'system', value: 'Hello World'}]));

  return (
    <MemoryContext.Provider value={arrayManager}>
      <MyComponent />
    </MemoryContext.Provider>
  );
}

注意：快照函数必须返回新的引用（比如展开数组生成新数组），否则React会判定状态未变化，不会触发重渲染。

方案3：优先使用React内置状态管理（最优方案） #

如果你的业务逻辑不需要复杂的类封装，直接用React内置的useState或useReducer管理数组状态，这是最符合React设计逻辑的方式，代码更简洁且不易出错。

示例代码：

import React, { createContext, useContext, useState } from 'react';

const MemoryContext = createContext(null);

const MyComponent = () => {
  const [memory, setMemory] = useContext(MemoryContext);

  const handleClick = () => {
    // 通过展开数组生成新引用，触发React重渲染
    setMemory(prev => [...prev, {type: 'system', value: 'Hello World'}]);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <ul>
        { memory.map((a, i) => <li key={i}>{a.value}</li>) }
      </ul>
    </div>
  );
};

export default function App() {
  const [memory, setMemory] = useState([{type: 'system', value: 'Hello World'}]);

  return (
    <MemoryContext.Provider value={[memory, setMemory]}>
      <MyComponent />
    </MemoryContext.Provider>
  );
}

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