求助：React无法监听自定义类实例字段变更该如何处理

React的状态追踪只认自己的状态管理API（比如useState、useReducer）。你直接修改类实例foo的value属性，属于在React的状态体系外操作数据——React既不会触发组件重渲染，也不会让useEffect的依赖数组检测到值的变化。

另外，useEffect的依赖数组是在组件渲染阶段做浅比较的。第一次渲染时foo.value是1，你修改成2后，组件没重新渲染，所以useEffect的依赖列表不会重新计算，自然不会执行回调。

方案1：用React状态托管关键属性 #

把需要React监听的value放到useState里，通过状态更新触发组件重渲染，同时同步更新类实例的属性：

class Foo {
  constructor(value) {
    this.value = value;
  }
}

export default function App() {
  const [value, setValue] = useState(1);
  const foo = useMemo(() => new Foo(value), [value]);

  useEffect(() => {
    console.log(`foo has a new value: ${foo.value}`);
  }, [value]);

  function changeValue(nextValue) {
    setValue(nextValue);
  }

  return (
    <div className="App">
      <button type="button" onClick={() => changeValue(2)}>
        Change value
      </button>
    </div>
  );
}

这种方式最直接，适合类实例属性变更逻辑不复杂的场景。

方案2：给类实例加订阅通知机制 #

如果你的Foo类有复杂内部逻辑，不想把状态完全交给React，可以给类添加订阅功能，当属性变化时主动通知组件更新：

class Foo {
  constructor(value) {
    this.value = value;
    this.subscribers = [];
  }

  setValue(newValue) {
    this.value = newValue;
    this.subscribers.forEach(callback => callback(newValue));
  }

  subscribe(callback) {
    this.subscribers.push(callback);
    return () => {
      this.subscribers = this.subscribers.filter(cb => cb !== callback);
    };
  }
}

export default function App() {
  const foo = useMemo(() => new Foo(1), []);
  const [, forceUpdate] = useState();

  useEffect(() => {
    const unsubscribe = foo.subscribe(() => {
      forceUpdate({});
    });
    return unsubscribe;
  }, [foo]);

  useEffect(() => {
    console.log(`foo has a new value: ${foo.value}`);
  }, [foo.value]);

  function changeValue(nextValue) {
    foo.setValue(nextValue);
  }

  return (
    <div className="App">
      <button type="button" onClick={() => changeValue(2)}>
        Change value
      </button>
    </div>
  );
}

这种方式能保持类的封装性，适合类实例有复杂状态流转的场景。

方案3：把类实例存入useState（不推荐复杂实例） #

如果Foo实例体积小，可以直接把它放到useState里，每次修改时创建新实例触发更新：

class Foo {
  constructor(value) {
    this.value = value;
  }
}

export default function App() {
  const [foo, setFoo] = useState(() => new Foo(1));

  useEffect(() => {
    console.log(`foo has a new value: ${foo.value}`);
  }, [foo.value]);

  function changeValue(nextValue) {
    setFoo(new Foo(nextValue));
  }

  return (
    <div className="App">
      <button type="button" onClick={() => changeValue(2)}>
        Change value
      </button>
    </div>
  );
}

这种方式简单但低效，因为每次都要创建新实例，只适合轻量类。

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