React 19 API 迁移实战OpenMontage 组合模式技能中的 ref-as-prop 与 use() 取代 useContext【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文聚焦 OpenMontage 仓库中.agents/skills/vercel-composition-patterns技能规则react19-no-forwardref.md所定义的 React 19 API 变更规范在 React 19 中ref升级为常规 prop不再需要forwardRef包装同时use()取代useContext()。读完本文你将掌握 React 18 向 19 迁移时组件签名与 Context 读取方式的标准改法、use()区别于useContext()的条件调用特性以及如何在复合组件compound components模式中落地这套新 API并了解当前仓库Remotion 合成器仍运行在 React 18 上的实际迁移前提。规则定位与适用前提React 19 only该规则文件位于.agents/skills/vercel-composition-patterns/rules/react19-no-forwardref.mdfrontmatter 声明如下元数据字段值titleReact 19 API ChangesimpactMEDIUMimpactDescriptioncleaner component definitions and context usagetagsreact19, refs, context, hooks在技能总入口 SKILL.md 中React 19 APIs被列为第四类规则优先级 4前缀react19-影响级别 MEDIUM与 Component Architecture、State Management、Implementation Patterns 并列_sections.md同样将其定义为独立分区描述为 React 19 only. Dont useforwardRef; useuse()instead ofuseContext().规则开篇即给出硬性前提⚠️ React 19 only.Skip this if youre on React 18 or earlier.这意味着该规则不是对所有代码库一律生效的通用建议而是针对已升级到 React 19 的项目。若项目仍停留在 React 18 或更早版本forwardRef与useContext依然是正确写法切勿盲目套用。核心变更一ref 成为常规 propforwardRef 退出历史舞台在 React 18 及更早版本中函数组件默认不接收refref不属于 props必须借助forwardRef显式转发。这在包装第三方输入组件如TextInput时产生大量样板代码IncorrectReact 19 中继续使用 forwardRefconst ComposerInput forwardRefTextInput, Props((props, ref) { return TextInput ref{ref} {...props} / })CorrectReact 19 中 ref 作为常规 propfunction ComposerInput({ ref, ...props }: Props { ref?: React.RefTextInput }) { return TextInput ref{ref} {...props} / }React 19 将ref正式纳入 props 体系函数组件可以直接从 props 中解构出ref并透传给子组件。带来的收益是组件签名更扁平、更直观少一层forwardRef包装TypeScript 类型更简洁Props { ref?: React.RefTextInput }直接声明在函数参数上消除了forwardRef与泛型组合时的类型摩擦forwardRefTextInput, Props的泛型顺序历来容易写错。核心变更二use() 取代 useContext()React 19 引入的新 Hookuse()可以读取 Context替代useContext()IncorrectReact 19 中继续使用 useContextconst value useContext(MyContext)CorrectReact 19 中使用 use 替代 useContextconst value use(MyContext)两者在读取 Context 值这一行为上等价但use()带来一个关键差异——可以在条件分支中调用use()can also be called conditionally, unlikeuseContext().useContext()作为 Hook 必须遵守只在组件顶层调用的规则不能出现在if、循环或嵌套函数中而use()是面向资源读取设计的它打破了这一限制允许在条件逻辑内部按需读取 Context同理也支持读取 Promise 等资源。在复合组件内部这为按需取用 state / actions / meta提供了更灵活的编写方式。组合模式中的实际落地复合组件直接消费 Context该规则并不是孤立存在的它与技能中其他规则尤其是复合组件模式architecture-compound-components.md、状态提升state-lift-state.md、通用 Context 接口state-context-interface.md构成完整体系。在技能的长文档 AGENTS.md 第 4 节中React 19 API 被直接应用到复合组件实现里const ComposerContext createContextComposerContextValue | null(null) function ComposerProvider({ children, state, actions, meta }: ProviderProps) { return ( ComposerContext value{{ state, actions, meta }} {children} /ComposerContext ) } function ComposerInput() { const { state, actions: { update }, meta: { inputRef }, } use(ComposerContext) return ( TextInput ref{inputRef} value{state.input} onChangeText{(text) update((s) ({ ...s, input: text }))} / ) }注意其中的两处 React 19 语法ComposerContext value{...}直接作为 Provider 使用——React 19 允许把 Context 本身当作 Provider 组件Context.Provider简写为Context不再强制写ComposerContext.Provideruse(ComposerContext)读取共享状态——子组件ComposerInput、ComposerSubmit等通过use()消费由 Provider 注入的{ state, actions, meta }三元组实现组合内部、共享 Context、而非逐层传 props的复合组件原则。对于需要视觉上位于组件框之外、但仍要访问共享状态的自定义组件如对话框底部提交按钮、消息预览同样借助use()读取function ForwardButton() { const { actions: { submit }, } use(ComposerContext) return Button onPress{submit}Forward/Button }这正是状态提升规则所强调的核心洞察需要共享状态的组件不必在视觉上互相嵌套只要处于同一 Provider 边界内即可。use()把这种跨视觉边界的读取写法进一步简化。与仓库现状的对应关系当前 Remotion 合成器仍在 React 18需要诚实说明适用前提规则标注 React 19 only而 OpenMontage 仓库当前的 Remotion 合成器remotion-composer在 package.json 中声明依赖为react: ^18.2.0与react-dom: ^18.2.0types/react亦为^18.2.0。也就是说当前仓库组件仍以 React 18 API 编写。例如 Root.tsx 中注册的Explainer、HeroTitle、EndTag等 Composition 组件均使用React.FC与 props 解构的常规写法HeroTitle.tsx、ProgressBar.tsx 等场景组件也没有使用forwardRef——React 18 下若确有 ref 透传需求仍需forwardRefReact 19 下则可直接以refprop 形式声明因此react19-no-forwardref规则在仓库中属于面向未来升级的迁移目标规范当remotion-composer将依赖升级到 React 19 时组件签名、Context 读取方式需要按本规则批量调整。迁移检查清单结合规则文件与技能整体规范每个规则文件均包含为什么重要 错误示例 正确示例 补充上下文四要素见 SKILL.md 的 How to Use给出落地检查清单确认 React 版本package.json中react主版本为^19或更高时才启用本规则仍是 18 及以下则跳过扫描forwardRef用法搜索forwardRef将包装层移除把ref并入 props 类型Props { ref?: React.RefT }并在函数体内直接透传扫描useContext用法将useContext(MyContext)替换为use(MyContext)利用条件调用能力审视原本因Hook 不能在条件中调用而被迫上提的状态读取逻辑判断是否可用use()收敛到更内聚的位置结合复合组件改造将规则与architecture-compound-components、state-context-interface一并执行用Context value{...}use()重构共享状态读取消除 render props 与布尔 prop 泛滥。参考与继续阅读规则原文react19-no-forwardref.md技能入口与规则目录SKILL.md、README.md完整长文档含复合组件、状态提升、依赖注入的展开示例AGENTS.md分区定义rules/_sections.md仓库 Remotion 合成器当前 React 18未来迁移目标remotion-composer/package.json、remotion-composer/src/Root.tsx【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考