如何在无Flux/Redux的React中实现跨组件触发重渲染？

嘿，这个场景我之前在项目里也遇到过！不用Flux/Redux完全能搞定，给你几个实用的思路，都是我亲测有效的：

这是React官方提供的跨组件状态传递方案，完全符合你的需求，不用引入任何第三方库。核心思路是把全局值放到Context里，让Component1负责修改状态，Component2订阅这个状态的变化，状态更新时Component2会自动重新渲染。

示例代码：

// 第一步：创建一个全局Context（可以单独抽成一个文件）
const GlobalValueContext = React.createContext();

// 第二步：在根组件或者共同的父组件中提供状态
function App() {
  const [globalValue, setGlobalValue] = React.useState('初始全局值');
  
  return (
    <GlobalValueContext.Provider value={{ globalValue, setGlobalValue }}>
      <Component1 />
      <Component2 />
    </GlobalValueContext.Provider>
  );
}

// Component1：修改全局值
function Component1() {
  const { setGlobalValue } = React.useContext(GlobalValueContext);
  
  const handleUpdate = () => {
    setGlobalValue(`更新后的值：${Date.now()}`);
  };
  
  return (
    <button onClick={handleUpdate}>点击修改全局值</button>
  );
}

// Component2：自动响应全局值变化并重新渲染
function Component2() {
  const { globalValue } = React.useContext(GlobalValueContext);
  
  return (
    <div>当前全局值：{globalValue}</div>
  );
}

如果你的组件结构比较复杂，或者不想用Context，也可以用自定义事件来实现“发布-订阅”模式。Component1修改全局值后触发一个自定义事件，Component2监听这个事件，收到通知后更新自身状态从而重新渲染。

示例代码：

// 先写一个简单的全局事件发射器（可以放在单独的工具文件里）
const GlobalEventEmitter = {
  events: {},
  // 订阅事件
  on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  },
  // 发布事件
  emit(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach(callback => callback(data));
    }
  },
  // 取消订阅
  off(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(cb => cb !== callback);
    }
  }
};

// Component1：修改全局值并发布事件
function Component1() {
  const handleChange = () => {
    const newValue = `新值：${Date.now()}`;
    // 把值存在全局变量（或者localStorage/sessionStorage里）
    window.globalValue = newValue;
    // 发布事件通知其他组件
    GlobalEventEmitter.emit('globalValueUpdated', newValue);
  };
  
  return <button onClick={handleChange}>修改全局值</button>;
}

// Component2：监听事件并更新自身状态
function Component2() {
  const [currentValue, setCurrentValue] = React.useState(window.globalValue || '初始值');
  
  React.useEffect(() => {
    // 订阅全局值变化事件
    const handleValueUpdate = (newValue) => {
      setCurrentValue(newValue);
    };
    GlobalEventEmitter.on('globalValueUpdated', handleValueUpdate);
    
    // 组件卸载时取消订阅，避免内存泄漏
    return () => {
      GlobalEventEmitter.off('globalValueUpdated', handleValueUpdate);
    };
  }, []);
  
  return <div>当前全局值：{currentValue}</div>;
}

如果Component1和Component2有共同的直接父组件，那最简单的方式就是把全局值的状态提升到这个父组件里，通过props把修改方法传给Component1，把值传给Component2。这种方式没有额外复杂度，适合组件层级不深的场景。

示例代码：

// 共同父组件
function ParentComponent() {
  const [sharedValue, setSharedValue] = React.useState('初始值');
  
  return (
    <div>
      <Component1 updateValue={setSharedValue} />
      <Component2 currentValue={sharedValue} />
    </div>
  );
}

// Component1：通过props的方法修改父组件状态
function Component1({ updateValue }) {
  return (
    <button onClick={() => updateValue(`更新后的值：${Date.now()}`)}>修改值</button>
  );
}

// Component2：通过props接收值，值变化自动重新渲染
function Component2({ currentValue }) {
  return <div>当前值：{currentValue}</div>;
}

总结一下 #

• 如果是全局范围的状态共享，优先用Context API，这是React原生支持的方案，代码更规范，也不需要额外维护事件逻辑；
• 如果组件结构复杂或者需要跨非React代码通信，用自定义事件发射器更灵活；
• 如果组件有共同父组件且层级不深，直接状态提升是最省事的选择。

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