Waku项目中React 19 RC版本上下文传递问题的分析与解决

问题背景

在Waku项目升级到React 19 RC版本的过程中，开发人员遇到了一个关于上下文传递的棘手问题。当尝试将对象通过上下文传递给客户端组件时，系统会抛出"TypeError: Cannot assign to read only property 'page' of object '#'"的错误。这个问题在React 19 beta版本中并不存在，但在RC版本中突然出现，引起了开发者的关注。

问题现象

具体表现为：

1. 当通过上下文传递一个对象（如page对象）给客户端组件时，系统报错
2. 错误信息表明尝试修改一个只读属性
3. 问题仅在特定装饰器顺序下出现（CenteredDecorator > A11yDecorator组合会失败，而反过来则正常）
4. 简化后的最小复现案例显示，问题与嵌套组件结构和上下文传递方式密切相关

技术分析

上下文传递机制的变化

React 19 RC版本在服务器组件和客户端组件之间的上下文传递机制上做了优化。从错误信息可以推测，RC版本中通过服务器组件传递到客户端组件的对象可能被自动设置为只读，以防止意外的修改。

装饰器顺序的影响

问题只在特定装饰器顺序下出现，这表明：

• React可能对组件树的序列化/反序列化过程进行了优化
• 不同顺序的组件组合可能导致对象被不同方式处理
• 先经过某些组件处理的对象可能被标记为只读，导致后续组件无法修改

最小复现案例

通过简化，问题可以复现为以下结构：

<StoryContextProvider value={{ page }}>
  <CenteredDecorator page={page}>
    <A11yDecorator page={page}>
      foo
    </A11yDecorator>
  </CenteredDecorator>
</StoryContextProvider>

其中page是一个空对象，但通过上下文和props双重传递。

解决方案

临时解决方案

1. 避免直接修改传递的对象：确保所有组件都不尝试修改通过上下文接收的对象
2. 调整装饰器顺序：将A11yDecorator放在CenteredDecorator之前
3. 创建对象副本：在需要修改的地方创建对象的深拷贝

根本解决方案

1. 等待React官方修复：这可能是React 19 RC版本的一个bug，可以等待后续版本修复
2. 重构上下文设计：考虑将需要修改的数据与只读数据分离，使用更精细的上下文管理
3. 使用状态管理库：对于复杂的状态共享，可以考虑使用专门的状态管理解决方案

最佳实践建议

1. 避免直接传递复杂对象：尽量传递原始值或经过简化的数据
2. 明确数据所有权：清晰定义哪些组件可以修改数据，哪些只能读取
3. 升级前充分测试：特别是在跨越beta到RC版本时，要全面测试上下文相关的功能
4. 考虑不可变数据：设计组件时优先考虑不可变数据模式，减少副作用

总结

这个问题揭示了React 19 RC版本在服务器组件和客户端组件之间对象传递机制的重要变化。开发者需要更加谨慎地处理跨边界的数据传递，特别是在使用上下文API时。虽然目前可以通过调整组件顺序或避免修改对象来临时解决问题，但长期来看，理解React在这方面的设计意图并相应调整架构设计才是根本解决之道。

对于使用Waku框架的开发者，建议在升级到React 19 RC或更高版本时，特别注意测试所有涉及上下文传递的场景，并考虑重构那些依赖于修改上下文对象的代码逻辑。