能否为React中的静态变量自定义变更回调函数？

方法一：给静态变量封装getter/setter + 订阅机制 #

直接改造MyVariable类，通过封装静态变量的setter逻辑，同时支持回调订阅，这样每次修改值时会自动触发所有订阅的回调：

class MyVariable {
  static #myVal = 1; // 私有变量，禁止外部直接修改
  static #subscribers = new Set(); // 存储需要触发的回调函数

  // 获取当前值
  static get myVal() {
    return this.#myVal;
  }

  // 设置新值并触发回调
  static set myVal(newVal) {
    if (newVal !== this.#myVal) {
      this.#myVal = newVal;
      this.#subscribers.forEach(callback => callback(newVal));
    }
  }

  // 订阅回调的方法
  static subscribe(callback) {
    this.#subscribers.add(callback);
    // 返回取消订阅的函数，避免组件卸载后内存泄漏
    return () => this.#subscribers.delete(callback);
  }
}

然后在React组件里通过useEffect完成订阅和取消订阅，不用再手动调用myAlert：

import { useEffect } from 'react';

const FileUploader = (props) => {
  const myAlert = (newVal) => {
    console.log(`val is changed to ${newVal}!`);
  };

  // 组件挂载时订阅回调，卸载时取消
  useEffect(() => {
    const unsubscribe = MyVariable.subscribe(myAlert);
    return unsubscribe;
  }, []);

  const changeValue2 = () => {
    MyVariable.myVal = 2;
  };

  const changeValue3 = () => {
    MyVariable.myVal = 3;
  };

  const changeValue4 = () => {
    MyVariable.myVal = 4;
  };

  return (
    <div>
      <button onClick={changeValue2}>改成2</button>
      <button onClick={changeValue3}>改成3</button>
      <button onClick={changeValue4}>改成4</button>
    </div>
  );
};

方法二：将静态变量转为React状态（适合组件内单独使用） #

如果这个变量只在FileUploader组件内使用，没必要用静态变量，直接用React的useState配合useEffect监听变化即可：

import { useState, useEffect } from 'react';

const FileUploader = (props) => {
  const [myVal, setMyVal] = useState(1);

  // 监听myVal的变化，自动触发逻辑
  useEffect(() => {
    console.log(`val is changed to ${myVal}!`);
  }, [myVal]);

  const changeValue2 = () => {
    setMyVal(2);
  };

  const changeValue3 = () => {
    setMyVal(3);
  };

  const changeValue4 = () => {
    setMyVal(4);
  };

  return (
    <div>
      <button onClick={changeValue2}>改成2</button>
      <button onClick={changeValue3}>改成3</button>
      <button onClick={changeValue4}>改成4</button>
    </div>
  );
};

补充说明 #

• 如果这个变量需要跨多个组件共享，方法一的订阅机制更灵活，也可以用React Context来统一管理变量，结合useContext和useEffect实现跨组件监听。
• 方法一中的私有类字段（#myVal）是ES6特性，能确保外部无法绕过setter直接修改值，保证回调触发的可靠性。

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