React Native如何导出非组件state并跨文件引入保持响应更新

为什么直接导出state不生效 #

useState是React专属的Hook，和调用它的组件实例强绑定，仅在组件/自定义Hook的渲染周期内生效。你在组件内部声明的jsonText是组件作用域下的局部变量，直接写export const jsonText导出的只是组件首次渲染时的静态值快照，不会跟随后续状态更新同步。
之前props传递没生效，基本是两个原因：要么状态定义的层级太低，没有抬升到所有使用方的共同父组件；要么传递过程中出现了值拷贝、props透传断层的问题。

可行实现方案 #

方案1：React Context 原生方案（无需额外依赖） #

这是React官方提供的跨组件/跨文件传值方案，不需要装第三方库，适合大部分中小项目场景：

1. 单独创建上下文文件，封装状态和Provider

// src/context/JsonTextContext.jsx
import { createContext, useContext, useState } from 'react';

const JsonTextContext = createContext(null);

// 状态统一放在Provider中维护
export function JsonTextProvider({ children }) {
  const [jsonText, setJSONText] = useState('');
  return (
    <JsonTextContext.Provider value={{ jsonText, setJSONText }}>
      {children}
    </JsonTextContext.Provider>
  );
}

// 封装自定义Hook简化调用逻辑
export function useJsonText() {
  const contextValue = useContext(JsonTextContext);
  if (!contextValue) {
    throw new Error('useJsonText 只能在 JsonTextProvider 包裹的组件内使用');
  }
  return contextValue;
}

2. 在项目根组件外层套上Provider，让全局组件都能访问到上下文

// src/main.jsx
import { JsonTextProvider } from './context/JsonTextContext';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <JsonTextProvider>
    <App />
  </JsonTextProvider>
);

3. 任意文件的组件需要使用状态时，直接引入封装好的Hook即可，拿到的状态是实时同步的，调用修改方法时所有用到该状态的组件都会自动重渲染更新

// 任意业务组件文件
import { useJsonText } from './context/JsonTextContext';

function DemoComponent() {
  const { jsonText, setJSONText } = useJsonText();
  return (
    <div>
      <p>当前JSON内容：{jsonText}</p>
      <button onClick={() => setJSONText('新的JSON值')}>修改内容</button>
    </div>
  );
}

方案2：全局状态管理库（适合复杂项目） #

如果项目规模较大、跨组件共享的状态较多，可以直接用轻量状态管理库存放全局状态，写法比Context更简洁，性能也更好，常用的可选Zustand、Jotai，不需要Redux那么重的模板代码。
以Zustand为例：

1. 定义全局store

// src/store/jsonStore.js
import { create } from 'zustand';

const useJsonStore = create((set) => ({
  jsonText: '',
  setJSONText: (newVal) => set({ jsonText: newVal }),
}));

export default useJsonStore;

2. 任意组件内直接引入使用即可，不需要额外套Provider

import useJsonStore from './store/jsonStore';

function AnyComponent() {
  const jsonText = useJsonStore((state) => state.jsonText);
  const setJSONText = useJsonStore((state) => state.setJSONText);
  // 状态全局同步，修改后所有使用方自动更新
}

避坑提醒 #

• 永远不要尝试直接导出组件内部通过useState声明的状态变量，JS中原始类型为值传递，导出的只是某一时刻的静态快照，永远不可能同步更新
• 用props传递状态时，必须把状态定义在所有使用组件的共同父组件中，再逐层往下传，定义在子组件中的状态无法被父组件、同层级组件访问
• 所有React Hook（useState、useContext等）只能在组件顶层、自定义Hook顶层调用，不能写在条件判断、循环、普通函数中，否则会出现状态异常

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