为什么 React Native 中用 Animated 改变 width/height 无法走原生驱动,代价是什么?
围绕“为什么 React Native 中用 Animated 改变 width/height 无法走原生驱动,代价是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释布局属性需要走 Yoga 布局与 JS 线程每帧更新导致掉帧,并给出 transform 缩放或 LayoutAnimation。
React Native · 动画面试题第 1 页,显示第 1–10 题,共找到 10 道完整解析,可继续按分类、标签与关键词缩小范围。
按稳定语义路径排序
围绕“为什么 React Native 中用 Animated 改变 width/height 无法走原生驱动,代价是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要解释布局属性需要走 Yoga 布局与 JS 线程每帧更新导致掉帧,并给出 transform 缩放或 LayoutAnimation。
围绕“React Native 列表项入场动画为什么容易和 FlatList 虚拟化冲突”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 item 复用导致动画状态残留、滚动中重复触发入场的问题,及按 key 记录已动画状态的解法。
围绕“React Native Animated 的 useNativeDriver 把什么工作移出了 JS 线程,支持哪”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明动画声明序列化后在原生侧执行、每帧不再过桥,并列出仅支持 transform/opacity 等非布局属性的限制。
围绕“React Native 中每帧 setState 驱动动画为什么是反模式”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 60fps 下每帧触发 React 渲染与桥接的开销,并引出 Animated 或原生驱动方案。
围绕“React Native 手势跟手动画要保证 60fps,关键约束是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明手势事件经 JS 线程处理时,JS 忙即掉帧,因此要让跟手逻辑留在 UI/原生侧。
围绕“React Native 的 InteractionManager.runAfterInteractions 解决什”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明把重工作推迟到转场/交互动画之后以保证动画流畅,以及任务队列堆积时延迟不可控的局限。
围绕“React Native 中 JS 线程被长任务阻塞时用户会看到什么现象,为什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明依赖 JS 的动画、触摸响应与渲染全部延迟的表现,以及把重计算移出 JS(原生模块、分片)的方向。
围绕“React Native LayoutAnimation 适合哪类动画,什么时候不够用”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明其适合布局变化的整体过渡、声明简单,但不支持精细手势跟随与逐元素编排,并注意 Android 需手动开启。
围绕“React Native 中监听 ScrollView 的 onScroll 为什么必须设置 scrollEvent”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖需要说明 iOS 默认不连续派发滚动事件、回调频率与 JS 线程压力的关系,并引出把滚动逻辑移到原生/动画线程的方向。
围绕“React Native 页面转场卡顿的官方排查思路是什么”给出直接结论、机制拆解、可复现验证、常见误区与追问,重点覆盖回答要按官方性能文档说明转场期间 JS 线程过载是主因,以及 InteractionManager、减少转场期渲染的缓解手段。