React Native 性能优化中 60fps 的帧预算意味着什么，JS 帧与 UI 帧有何区别？

先用最小代码看清现象

下面的片段只演示“React Native 60fps 帧预算 JS frame UI frame”最关键的一步。先顺着正常路径读一遍，再改动一个输入，就能直接看到结论在什么条件下成立。

阅读时重点找出哪一行对应“每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义”，然后观察调用方能直接看到的返回值、状态变化、错误信息和资源使用情况。这样比从定义开始背更容易留下具体印象。

// React Native 性能优化中 60fps 的帧预算意味着什么，JS 帧与 UI 帧有何区别？
// 观察点：每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义
export function ItemList({ items }: { items: { id: string; title: string }[] }) {
  const renderItem = useCallback(({ item }) => <Text>{item.title}</Text>, [])
  return <FlatList data={items} keyExtractor={(item) => item.id} renderItem={renderItem} />
}

代码背后的原因

每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义。示例把这个机制放进了真实的 API、语法或配置中，因此要关注产生结果的操作，而不是把整段代码当成固定模板照抄。

先固定“React Native 60fps 帧预算 JS frame UI frame”涉及的输入、状态和执行顺序。对“每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义”来说，如果这个条件改变，相同代码可能进入另一条分支、返回不同状态，甚至根本不执行。

放到真实项目里怎么判断

结论只适用于已经说明的条件；输入规模、并发方式或运行环境变化后需要重新验证。验证“每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义”时先保留正常路径，再增加一个直接相关的反例。一次只改一个条件，才能知道差异究竟来自哪里。

验证“React Native 60fps 帧预算 JS frame UI frame”不能只看有没有报错，还要检查调用方能直接看到的返回值、状态变化、错误信息和资源使用情况。涉及资源或异步任务时，也要确认结束后是否正确取消、关闭或释放。

容易答错的地方

记住结论，却忘了前提

只复述“每帧约 16.7ms 预算，以及官方区分的 JS 帧率与 UI 帧率各自掉帧的不同含义”仍可能答错，因为它依赖先固定“React Native 60fps 帧预算 JS frame UI frame”涉及的输入、状态和执行顺序。先说适用条件，再说结果。

用一次现象证明所有情况

单次成功只能说明当前输入可用。至少增加一个反例，并检查调用方能直接看到的返回值、状态变化、错误信息和资源使用情况，才能区分偶然现象与稳定机制。

面试官还会怎么问？

把知识连起来