检测react中的变量变化

Question

我正在尝试检测反应中的变量变化。该变量是一个类属性。这是在异步事件发生时设置的。

您可以在下面看到我班级的示例。

在方法

listenForIncomingMessage()

中，发生了一些异步操作，并设置了类的数据属性。

class Message() {
  static #instance: Message;
  data!: any;

  static getInstance(): Message {
    if (!Message.#instance) {
      Message.#instance = new Message();
    }

    return Message.#instance;
  }
  
  listenForIncomingMessage() {

    // Something asynchronous is happening here
    setTimeout(() => {
      this.data = 'hello world';
    }, 2000);
  }
}

然后这个类像这样在

main.tsx

中初始化，并通过这样的prop传递

const MainPage = () => {

  const msg = Message.getInstance();
  msg.listenForIncomingMessage();

  return (
    <div className="panel">
      <Result message={ msg } />
    </div>
  );
};

ReactDOM.createRoot(
  document.getElementById("root") as HTMLDivElement,
).render(<MainPage />);

最后在

Result.tsx

内，我需要检测msg.data的最新值。

export default function Result({ msg }) {
  
  let responseObj = useRef(msg.data);

  useEffect(() => {             <------ This is not triggered
    console.log(msg.data); 
  }, [msg.data]);

)};

我可以从回调或事件侦听器中获取值

Result.tsx

但我正在尝试查看是否有反应钩子解决方案。

谢谢你。

Answer 1

问题出现在您的场景中，因为 React 不会直接检测普通类属性（如

msg.data

）的更改，因为这些更改不会触发 React 的状态更新。为了解决这个问题，您可以使用

useState

和

useEffect

来管理和监控数据属性的变化。 要使用 React hook 检测类属性 (

msg.data

) 的更改，您可以：

1. 在类 (

   onDataChanged

   ) 中添加一个方法，以在

   data

   发生变化时发出通知。
2. 在组件中使用

   useState

   来保存

   data

   的值。
3. 使用

   useEffect

   订阅更改并在

   data

   更改时更新状态。

解决方案如下：

class Message {
  static #instance: Message;
  data!: any;
  private dataChangeCallback?: () => void;

  static getInstance() {
    if (!Message.#instance) {
      Message.#instance = new Message();
    }
    return Message.#instance;
  }

  onDataChanged(callback: () => void) {
    this.dataChangeCallback = callback;
  }

  listenForIncomingMessage() {
    setTimeout(() => {
      this.data = 'hello world';
      this.dataChangeCallback?.(); // Notify change
    }, 2000);
  }
}

const Result = ({ message }: { message: Message }) => {
  const [response, setResponse] = useState(message.data);

  useEffect(() => {
    message.onDataChanged(() => setResponse(message.data));
  }, [message]);

  return <p>Response: {response}</p>;
};

这使得

msg.data

在组件中具有反应性。