React Native中如何将state下的hscnumber变量导出至其他文件

你当前代码里的hscnumber是类组件内部的响应式state值，不能直接通过export关键字导出引用，脱离组件作用域后拿到的永远是初始值0，要跨文件读取可以按实际业务场景选下面的方案：

低复杂度临时读取场景 #

不需要自动响应值变化、只需要手动拉取当前值的情况，可以把取值方法挂载到全局对象上：

1. 在类组件的componentDidMount生命周期中，把取值方法挂到全局：

componentDidMount() {
  // 对外暴露取值方法，而非直接导出静态值
  global.getHscnumber = () => this.state.hscnumber
}

2. 其他文件需要取值时，直接调用global.getHscnumber()即可拿到当前最新的hscnumber值。

注意：这种方式没有响应式能力，其他文件不会自动感知hscnumber的更新，适合日志采集、临时调试这类非UI渲染的场景。

组件树内跨层级读取场景 #

如果需要取值的文件和当前组件属于同一个React组件树，可以通过ref暴露实例方法的方式传递：

1. 在类组件内部新增对外的取值方法：

// 类内部新增方法
readHscnumber() {
  return this.state.hscnumber
}

2. 父组件通过ref拿到当前类组件的实例后，就可以调用ref.current.readHscnumber()拿到值，再按组件树的传递规则分发给需要的其他组件。

需要响应式更新的场景 #

如果其他文件中的组件需要跟着hscnumber的变化自动刷新UI，不建议硬做跨域读取，直接把hscnumber的状态从类组件的内部state迁移到独立的全局状态源（比如React Context、轻量状态存储），当前类组件负责更新这个全局状态，其他需要用的组件直接订阅即可，不会出现值不同步、内存泄漏的问题。

常见踩坑提醒 #

• 不要直接在模块作用域导出this.state.hscnumber，因为constructor执行时拿到的只是初始赋值的0，后续getData触发state更新后，导出的引用不会同步变化，永远拿不到动态更新的真实值
• 全局挂载变量时注意在组件componentWillUnmount生命周期里清理对应的全局挂载点，避免组件卸载后残留无效的引用造成内存泄漏

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