如何在外部类属性变更时自动更新React组件

问题背景 #

现有不可修改的外部类MyClass，其number属性会自动定时递增，需在该属性变化时自动更新React组件。

外部类代码 #

class MyClass {
  constructor(name, number) {
    this.name = name;
    this.number = number;
    setInterval(() => this.incrementNumber(), 1000);
  }

  incrementNumber() {
    this.number += 1;
  }
}

初始React组件代码 #

import React, { useState, useEffect } from 'react';

function App() {
  const [obj, setObj] = useState(new MyClass("omri", 0));

  useEffect(() => {
    // 如何在obj.number变化时自动更新组件？
  }, [obj]);

  return (
    <div>
      {obj.name} {obj.number}
    </div>
  );
}

可行方案 #

方案1：轮询检测属性变化 #

通过定时检查number属性的当前值与历史值，若不一致则更新组件状态。

import React, { useState, useEffect, useRef } from 'react';

function App() {
  const [obj] = useState(new MyClass("omri", 0));
  const [currentNumber, setCurrentNumber] = useState(obj.number);
  const prevNumberRef = useRef(currentNumber);

  useEffect(() => {
    const interval = setInterval(() => {
      if (obj.number !== prevNumberRef.current) {
        prevNumberRef.current = obj.number;
        setCurrentNumber(obj.number);
      }
    }, 100); // 可根据需求调整轮询间隔

    return () => clearInterval(interval);
  }, [obj]);

  return (
    <div>
      {obj.name} {currentNumber}
    </div>
  );
}

优点：实现简单，无需修改外部类；缺点：存在一定延迟，轮询间隔越短性能消耗略高

方案2：用Proxy包装实例 #

通过Proxy拦截number属性的赋值操作，实时触发组件状态更新。

import React, { useState, useEffect } from 'react';

function App() {
  const [number, setNumber] = useState(0);
  const [obj] = useState(() => {
    const instance = new MyClass("omri", 0);
    // 创建Proxy拦截number属性的设置
    return new Proxy(instance, {
      set(target, prop, value) {
        if (prop === 'number') {
          setNumber(value);
        }
        // 执行原始赋值操作
        target[prop] = value;
        return true;
      }
    });
  });

  return (
    <div>
      {obj.name} {number}
    </div>
  );
}

优点：实时响应属性变化，无延迟；缺点：仅对直接赋值操作生效（此场景中incrementNumber的赋值逻辑可被拦截）

方案3：重写类原型方法 #

临时修改MyClass的原型方法，在原有逻辑后添加状态更新触发，组件卸载时恢复原始方法。

import React, { useState, useEffect } from 'react';

function App() {
  const [obj, setObj] = useState(new MyClass("omri", 0));
  const [currentNumber, setCurrentNumber] = useState(obj.number);

  useEffect(() => {
    // 保存原始方法
    const originalIncrement = MyClass.prototype.incrementNumber;
    // 重写原型方法
    MyClass.prototype.incrementNumber = function() {
      originalIncrement.call(this);
      setCurrentNumber(this.number);
    };

    return () => {
      // 组件卸载时恢复原始方法
      MyClass.prototype.incrementNumber = originalIncrement;
    };
  }, []);

  return (
    <div>
      {obj.name} {currentNumber}
    </div>
  );
}

优点：实时响应，适合已知属性变更通过特定方法触发的场景；缺点：会全局修改类原型，若其他地方使用该类需注意副作用

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