React Context能否共享导出对象？是否必须使用组件状态？

当然可以用你导出的共享列表对象作为Context Provider的value，而且Provider并不强制必须引用组件状态或者静态值——只要是合法的JavaScript值（对象、函数、基本类型等），都能作为value传递给Provider。

你的示例为什么可行？ #

看你给出的代码结构（我帮你修正了语法错误）：

// ./list.js
export const list = [];
export const updateList = (val) => list.push(val);

// ./provider.js
import { createContext } from 'react';
const { Provider, Consumer } = createContext();

export const ProviderComponent = ({ children }) => (
  <Provider value={{ list, updateList }}>
    {children}
  </Provider>
);

这里把全局的list数组和updateList函数传给了Provider，完全可以正常工作：消费组件通过Consumer或者useContext拿到这两个值后，能直接读取list，也能调用updateList修改它。

但要注意一个关键问题：React不会自动追踪全局对象的变化 #

这是和使用组件状态作为value的核心区别：

• 如果Provider的value是组件的state（比如this.state.shared或者useState返回的状态），当state变化时，Provider会触发重渲染，所有依赖这个Context的消费组件也会自动更新，拿到最新值。
• 但你用的是全局可变对象，当调用updateList修改list时，React并不知道这个对象发生了变化——所以消费组件不会自动重渲染，除非组件自身有其他触发重渲染的条件（比如自身state更新、父组件重渲染）。

更符合React范式的改进方案 #

如果希望消费组件能在list变化时自动更新，建议把共享状态放在Provider组件的内部状态中，让React帮你管理状态变化和组件更新：

// 替换你的./list.js，用自定义hook封装状态逻辑
import { useState, useCallback } from 'react';

export function useList() {
  const [list, setList] = useState([]);
  // 用useCallback缓存函数，避免不必要的重渲染
  const updateList = useCallback((val) => {
    // 不要直接修改原数组，用函数式更新返回新数组
    setList(prevList => [...prevList, val]);
  }, []);
  return { list, updateList };
}

// 改写你的./provider.js
import { createContext, useContext } from 'react';
import { useList } from './list';

const ListContext = createContext();

export function ListProvider({ children }) {
  const listState = useList();
  return (
    <ListContext.Provider value={listState}>
      {children}
    </ListContext.Provider>
  );
}

// 提供一个自定义hook方便消费组件使用
export function useListContext() {
  return useContext(ListContext);
}

这样一来，当调用updateList时，会通过setList更新组件状态，触发Provider重渲染，所有消费组件都会自动拿到最新的list并更新。

总结 #

• 用全局共享对象作为Context的value是可行的，但需要手动处理组件更新的问题；
• 如果想要React自动管理组件更新，最好将共享状态放在Provider组件的内部状态中，这是更符合React设计理念的做法。

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