React Context结构能否动态更新适配组件列表的增减？

问题场景 #

我正在使用React Context存储需渲染到屏幕的组件相关数据，组件采用递归渲染方式（此点与核心问题无关）。实际代码使用useReducer而非useState，示例代码如下：

父组件

const viewportContext = {
  'root': { /* 任意字段 */},
  'left': { /* 任意字段 */},
  'right': { /* 任意字段 */},
  'rightTop': { /* 任意字段 */},
  'rightBottom':{ /* 任意字段 */}
}

const [context, setContext] = useState(viewportContext); // 实际会用useReducer替代

return (
  <div>
    <ViewportContext.Provider value={context}>
      <Port id="root" setContext={setContext} />
    </ViewportContext.Provider>
  </div>
);

运行时组件列表会动态增减，想问：React Context的结构能否动态更新以适配这种情况？比如直接新增键值对：

{
  'root': { /* 任意字段 */},
  'left': { /* 任意字段 */},
  'right': { /* 任意字段 */},
  'rightTop': { /* 任意字段 */},
  'rightBottom':{ /* 任意字段 */},
  'foo':{ /* 任意字段 */},
  'bar':{ /* 任意字段 */}
}

还是必须采用如下嵌套结构？

{
  pages: {
    'root': { /* 任意字段 */},
    'left': { /* 任意字段 */},
    'right': { /* 任意字段 */},
    'rightTop': { /* 任意字段 */},
    'rightBottom':{ /* 任意字段 */},
    'foo':{ /* 任意字段 */},
    'bar':{ /* 任意字段 */}
  }
}

解答 #

两种结构都支持动态更新，React Context对value的结构没有强制限制，只要遵循React状态更新规则即可：

1. 直接平级新增键值对完全可行
   你可以通过useReducer的更新逻辑（或示例中的setContext）返回包含新增键的新对象，比如：

   // useState示例写法（实际替换为reducer逻辑）
   setContext(prev => ({
     ...prev,
     'foo': { /* 新组件数据 */ },
     'bar': { /* 新组件数据 */ }
   }))
   

   只要生成新对象（而非直接修改原对象），React就能检测到状态变化，触发Context Provider更新，让消费组件拿到最新数据。

2. 嵌套结构是可选方案，而非必须
   用pages包裹动态组件数据的方式，优势在于把动态变化部分和其他全局配置（比如主题、用户信息）隔离开，后期扩展Context内容时，不会和动态组件的键名冲突，结构更清晰。但这不是强制要求，只是一种更具扩展性的编码习惯。

3. 核心注意事项：必须不可变更新
   不管用哪种结构，更新状态时都要遵循不可变原则——不能直接修改原context对象，必须返回新对象。如果直接修改原对象（比如context.foo = {...}），React的浅比较机制会认为状态没有变化，不会触发Context更新，消费组件也拿不到新数据。

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