Vue → React 迁移
两个框架使用相同的 AudioTrack、AudioSnapshot、AudioPlayerError 和
AudioPlayerHandle。迁移主要发生在框架绑定层:
| Vue | React |
|---|---|
<VueAudioNative :tracks="tracks" /> | <AudioPlayer tracks={tracks} /> |
@statechange | onStateChange |
@trackchange | onTrackChange |
defineExpose 组件 ref | forwardRef<AudioPlayerHandle> |
useAudioPlayer() + Vue ref | useAudioPlayer() + callback audioRef |
artwork slot | artwork ReactNode 或 (track) => ReactNode |
tip / slotTip | hint ReactNode |
before-controls / after-controls | beforeControls / afterControls ReactNode |
React 的 beforeControls / afterControls 不是 render props;需要 controls 或 snapshot 时,
通过 forwarded ref 或 Headless Hook 获取。
不要把 Vue 0.x 的连字符事件名直接复制到 JSX。React 不提供 Vue 旧事件别名;业务逻辑应 迁移到类型化 callbacks。播放器行为、结构化错误和 WebView Bridge 事件保持一致。
回调的完整 payload 和触发语义见公共 API 与回调事件。特别注意 onReady 不是
metadata 事件,onPlay 在 buffering 恢复时可能再次调用,onTimeUpdate 的频率也可能
高于原生 timeupdate。
React 版不包含 React Native SDK。原生应用应在 WebView 中使用本包,或自行把共享 Bridge 事件映射到宿主协议。