React Native中如何获取 onPress 触发后更新的跨组件导出变量

问题出在：JavaScript模块导出基础类型时是值拷贝，不是引用。Analysis导入的num是初始状态的副本，后续Journal里的num更新后，不会同步到Analysis的副本里。下面是几个实用的解决办法：

方案1：用引用类型包裹数值 #

利用对象是引用传递的特性，把num放到对象里，这样所有引用这个对象的地方都能拿到最新值：

修改Journal.js：

// Journal.js
//...
// 用对象包裹num，初始值设为undefined
const numRef = { value: undefined };

const onPress = async() => {
    // 更新对象的属性
    numRef.value = 2;
}
//...
export { numRef };
export default Journal;

Analysis.js中使用：

// Analysis.js
import { numRef } from './Journal';
//...
// 每次需要取值时，直接访问numRef.value就能拿到最新值
const someVar = numRef.value;

// 如果是React组件，要确保组件能感知更新，比如把numRef.value加入useEffect依赖
// useEffect(() => {
//   // 这里处理num变化后的逻辑
// }, [numRef.value]);

方案2：用React Context（适合React项目） #

如果是React项目，用Context跨组件共享状态是最省心的方式，能自动触发组件重新渲染：

首先创建一个Context文件：

// NumContext.js
import { createContext, useState, useContext } from 'react';

const NumContext = createContext();

export function NumProvider({ children }) {
  const [num, setNum] = useState(undefined);

  return (
    <NumContext.Provider value={{ num, setNum }}>
      {children}
    </NumContext.Provider>
  );
}

// 封装自定义Hook，方便组件调用
export function useNum() {
  return useContext(NumContext);
}

在Journal.js中更新状态：

// Journal.js
import { useNum } from './NumContext';
//...
const { setNum } = useNum();

const onPress = async() => {
    // 调用setNum更新状态
    setNum(2);
}
//...
export default Journal;

在Analysis.js中获取最新值：

// Analysis.js
import { useNum } from './NumContext';
//...
const { num } = useNum();
const someVar = num; // 这里的num会自动同步更新，组件也会重新渲染

注意：需要把根组件或者包含Journal和Analysis的父组件用NumProvider包裹起来。

方案3：用发布订阅模式（通用JS场景） #

自己实现简单的发布订阅机制，当num更新时主动通知订阅的模块：

修改Journal.js：

// Journal.js
//...
let num;
// 存储监听函数的数组
const numUpdateListeners = [];

const onPress = async() => {
    num = 2;
    // 遍历所有监听函数，传递最新的num值
    numUpdateListeners.forEach(listener => listener(num));
}

// 对外提供订阅方法，返回取消订阅的函数
export function subscribeToNumUpdate(listener) {
  numUpdateListeners.push(listener);
  return () => {
    const index = numUpdateListeners.indexOf(listener);
    if (index !== -1) {
      numUpdateListeners.splice(index, 1);
    }
  };
}

export { num };
export default Journal;

Analysis.js中订阅更新：

// Analysis.js
import { num, subscribeToNumUpdate } from './Journal';
import { useEffect, useState } from 'react'; // React组件场景需要

// 用状态保存最新的num值
const [currentNum, setCurrentNum] = useState(num);

useEffect(() => {
  // 订阅num更新事件
  const unsubscribe = subscribeToNumUpdate(newNum => {
    setCurrentNum(newNum);
  });

  // 组件卸载时取消订阅，避免内存泄漏
  return unsubscribe;
}, []);

const someVar = currentNum; // 使用currentNum获取最新值

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