关于 studio-perf
为 Remotion Studio 提供 React 性能指导，重点是减少帧订阅并对稳定的组件边界进行记忆化，帮助开发者避免时间线帧变化引发的不必要渲染。
主要功能
- 01减少组件树中的帧订阅
- 02按需逻辑使用命令式帧读取
- 03隔离响应帧变化的叶组件
- 04使用 React.memo() 记忆化稳定组件
- 05保持记忆化属性的引用稳定
适用场景
- 01减少时间线播放期间的重复渲染
- 02重构向子组件传递帧状态的父组件
- 03选择帧订阅或命令式读取
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/studio-perf确认已加载。
附带文件agents/openai.yaml
详细介绍
Studio 性能
尽量减少帧订阅
尽可能将对当前帧的依赖限制在组件树的较低层级。
在事件处理程序和其他按需执行的逻辑中，优先使用 getCurrentFrame() 等命令式时间线状态读取方式，而不是
Internals.Timeline.useTimelinePosition()。
仅在渲染输出必须随帧变化的最小叶子组件中使用 useTimelinePosition()。如果父组件读取帧只是为了将其传递给子组件，请提取一个订阅帧的子组件，让父组件及其其他后代保持稳定。
缓存稳定边界
当组件可以安全地跳过由父组件触发的重新渲染时，使用 React.memo() 包装组件。确认其 props 在帧更新期间保持引用稳定：新创建的对象、回调、样式或 React 节点都会使浅比较缓存失效。仅在自然合适的地方稳定这些 props；避免使用会忽略行为相关变更的自定义比较器。
即使祖先经过缓存，上下文订阅者仍会继续更新。优先采用经过缓存的稳定父组件搭配一个订阅帧的小型叶子组件，而不是让整个子树都对当前帧作出响应。
评论
支持 Markdown