react-native-reanimated 2.0访问SharedValue的性能问题优化咨询

核心问题定位 #

你当前的性能瓶颈本质来自runOnJS的高频跨线程通信开销：UI线程的手势事件每次调用runOnJS都需要完成数据序列化、线程切换调度两个高开销操作，且你现有代码中runOnJS并未做频率控制（仅SharedValue更新加了10次阈值，runOnJS是每次onActive都触发），进一步放大了性能损耗。

可落地优化措施 #

• 优先把碰撞检测逻辑迁移到UI线程执行
  所有依赖SharedValue的碰撞逻辑可以封装为Worklet函数，直接在UI线程的onActive回调中执行，完全避免跨线程通信。如果其他JS线程组件需要用到碰撞结果，只需要把最终结果写入另一个SharedValue，JS线程按需读取即可，性能远高于高频runOnJS调用。
• 对齐runOnJS和SharedValue更新的触发频率
  你现有代码存在逻辑漏洞：runOnJS调用没有加入计数器判断，每一次手势事件都会触发跨线程调用。把runOnJS逻辑移入计数器阈值判断分支，直接将跨线程调用频率降低为原来的1/10。
• 减少跨线程传输的数据量
  你已经把坐标值存入absoluteX/absoluteY两个SharedValue，不需要在runOnJS调用时额外传参，JS侧直接读取这两个SharedValue的value属性即可，省去对象序列化的开销。
• 用useAnimatedReaction替代手动runOnJS调用
  完全删掉onActive里的runOnJS逻辑，新增监听absoluteX/absoluteY变化的useAnimatedReaction，由Reanimated内部调度JS线程的回调执行，调度逻辑比手动实现更高效。

优化后代码示例 #

const _startX = startX ?? 0;
const _startY = startY ?? 0;

const x = useSharedValue(_startX);
const y = useSharedValue(_startY);
const absoluteX = useSharedValue(0);
const absoluteY = useSharedValue(0);
const counter = useSharedValue(0);

// 替代原有runOnJS调用，由Reanimated自动调度
useAnimatedReaction(
  () => [absoluteX.value, absoluteY.value],
  ([newX, newY]) => {
    if (onActive) {
      runOnJS(onActive)(newX, newY);
    }
  },
  [onActive]
);

const gestureHandler = useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.startX = x.value;
    ctx.startY = y.value;
  },
  onActive: (event, ctx) => {
    x.value = ctx.startX + event.translationX;
    y.value = ctx.startY + event.translationY;

    counter.value += 1;
    // 只有计数器达标时才更新SharedValue，触发上面的Reaction回调
    if (counter.value > 10) {
      absoluteX.value = event.absoluteX;
      absoluteY.value = event.absoluteY - difference / 2;
      counter.value = 0;
    }
  },
});

内容的提问来源于stack exchange，提问作者Coder949