@supernathaniel/runtime-react
v0.2.0
Published
React 16.14/18 Profiler instrumentation for @fp runtimes
Readme
@supernathaniel/runtime-react
React 渲染采集与离线分析:把每次 commit 耗时变成事件,把事件变成可读的渲染诊断。
提供什么
PerformanceProfiler:用React.Profiler包裹根节点,每次 commit 发出react:commit事件(actualDuration / baseDuration 等)。生产构建的 React 不触发 Profiler 回调,透明传递。fpProfile(Component, meta):构建期 babel 注入(@supernathaniel/babel-plugin-fp-profiler)的运行时承接(docs/PROFILER_AUTOWRAP.md)。模块求值期检查window.__fp?.runtime,不存在则 fail-open 原样返回组件(零包装零开销);存在时内部复用PerformanceProfiler(react:commit事件形状零改动),forwardRef 透传(ref 为空时不向被包组件传 ref)、displayName 按 §4.3 补全、自定义静态属性白名单反集式拷贝。- M1 commit attribution(
docs/WHY_ATTRIBUTION.mdV2-D2):录制窗内(迟绑定读window.__fp?.isRecording?.(),API 缺席 = 关闭)把渲染触发证据并入同一条react:commit的data.attribution——每次 render 创建不可变 candidate(预算内有界 diff 快照 + forwarded ref 恒等比较)并由「committed onRender 闭包」消费,boundaryInstanceId按 mount 唯一,origin区分 wrapper(父层传播)/ subtree(后代提交,无 prop 证据)。变化分类见PropChangeKind(attribution.ts):比较 descriptor-only、预算有界(8 key / 64 字符 / 8 自有项;50 条/实例 + 2000 条/会话),Proxy/getter/自定义 prototype/异常/超预算一律降级reference-change+comparisonSkipped,不执行用户代码、不落 props 值。非录制路径 O(1) 早退(只创建 token+闭包与 baseline 引用存储)。远程上传经 runtime-coreuploadWhitelist不放行该字段。
- M1 commit attribution(
useRenderProbe:组件级渲染探针(只在 passive effect 发事件,props 引用比较过滤挂载/重放噪声)。analyzeRenderEvents(events):离线分析react:commit事件流,产出RenderAnalysis——CommitGroup/ComponentStat/RenderFinding(FindingLevel 分级),viewer 与 playground 共用。M2:repeat-render 只计数 wrapper-origin 与无归因提交(origin:subtree 子树自驱提交排除,排除数见 evidence.subtreeRendersExcluded),ComponentStat.originRenders拆分提交来源;有归因组件逐次指名 props 变化时消解该 finding,零归因组件保持旧文案兼容。- 辅助:
probeDevtoolsHook()(React DevTools hook 能力探测)、diffProps()、toCommitEvent()(commit → 事件的纯函数映射,可无渲染器测试)。
兼容性
- React 16.14 与 React 18 双一等公民:类型按
@types/react@16(最小公分母),只用两版共有的公共 API; react永远是 peer 依赖(宿主单例);Fiber 私有 API 只允许出现在明确标记的适配层,不进公共契约;- commit 事件同步发出(在 commit 阶段):trace 保真优先。监听方若在 commit 阶段直接 setState 会造成无限循环——消费方需轮询缓冲或节流(范式见 playground
App.tsx),并 memoize profiler 子树避免被动重渲染自产事件。
谁依赖它
umi-plugin(rootContainer 注入)、viewer / playground(渲染分析)。
