告别卡顿！React Native Reanimated 跨线程通信：runOnJS 函数全解析

【免费下载链接】react-native-reanimated React Native's Animated library reimplemented 项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated

你是否遇到过 React Native 动画卡顿、UI 响应延迟的问题？当 JavaScript 主线程被复杂计算阻塞时，即使是简单的动画也会变得不流畅。React Native Reanimated 库提供了强大的跨线程通信能力，而 runOnJS 函数正是解决这一痛点的关键。本文将带你深入了解 runOnJS 的工作原理、使用场景和最佳实践，让你的应用流畅如丝。

为什么需要跨线程通信？

React Native 应用运行在两个主要线程上：JavaScript 线程（负责业务逻辑）和UI 线程（负责渲染和动画）。当 JavaScript 线程执行耗时操作时，会阻塞 UI 线程，导致动画卡顿。

Reanimated 通过引入Worklet（一种可以在 UI 线程执行的特殊函数）解决了这一问题。但有时我们需要在 Worklet 中调用 JavaScript 线程的函数（如状态更新、网络请求），这时就需要 runOnJS 函数作为桥梁。

runOnJS 函数原理解析

runOnJS 函数允许你从 UI 线程安全地调用 JavaScript 线程上的函数。它将函数调用序列化后发送到 JavaScript 线程执行，并返回结果。

源码实现

runOnJS 的核心实现位于 packages/react-native-reanimated/src/workletFunctions.ts：

import { runOnJS as runOnJSFromWorklets } from 'react-native-worklets';

/**
 * @deprecated Please import `runOnJS` directly from `react-native-worklets`
 *   instead of `react-native-reanimated`.
 */
export const runOnJS = runOnJSFromWorklets;

从源码可以看出，Reanimated 的 runOnJS 实际是对 react-native-worklets 库中同名函数的直接导出。这意味着它共享了 Worklets 库的跨线程通信基础设施。

类型定义

type RunOnJS = <T extends (...args: any[]) => any>(
  fn: T
) => (...args: Parameters<T>) => void;

runOnJS 接受一个 JavaScript 函数作为参数，并返回一个新的函数。当这个新函数在 UI 线程调用时，会将原始函数和参数发送到 JavaScript 线程执行。

基本使用方法

简单示例

import Animated, { useAnimatedGestureHandler, runOnJS } from 'react-native-reanimated';

// JavaScript 线程函数
const handlePress = (count: number) => {
  console.log(`Button pressed ${count} times`);
  // 可以安全地更新 React 状态
};

// UI 线程 Worklet
const gestureHandler = useAnimatedGestureHandler({
  onEnd: (event) => {
    'worklet';
    const pressCount = event.numberOfPointers;
    // 调用 JavaScript 线程函数
    runOnJS(handlePress)(pressCount);
  },
});

在 useAnimatedReaction 中使用

packages/react-native-reanimated/src/hook/useAnimatedReaction.ts 展示了如何在 Worklet 中响应状态变化并调用 JS 函数：

useAnimatedReaction(
  () => {
    'worklet';
    return sharedValue.value;
  },
  (currentValue, previousValue) => {
    'worklet';
    if (currentValue !== previousValue) {
      // 跨线程调用 JS 函数
      runOnJS(updateState)(currentValue);
    }
  }
);

高级应用场景

1. 动画完成回调

当动画结束时，你可能需要执行一些清理工作或导航操作，这些操作应该在 JavaScript 线程执行：

Animated.timing(progress, {
  toValue: 1,
  duration: 500,
  useNativeDriver: true,
}).start(({ finished }) => {
  if (finished) {
    runOnJS(navigation.navigate)('Home');
  }
});

2. 处理手势事件

在复杂手势处理中，使用 runOnJS 将关键事件通知给 JavaScript 线程：

const scrollHandler = useAnimatedScrollHandler({
  onScroll: (event) => {
    'worklet';
    const scrollPosition = event.contentOffset.y;
    // 仅在特定条件下调用 JS 函数，减少线程通信开销
    if (scrollPosition > 500) {
      runOnJS(showBackToTopButton)(true);
    }
  },
});

3. 性能优化：批量更新

频繁的跨线程通信会影响性能，使用 runOnJS 时应尽量批量处理更新：

const batchUpdate = useCallback((data1: any, data2: any) => {
  // 批量处理多个更新
  setData1(data1);
  setData2(data2);
}, []);

// 在 Worklet 中
runOnJS(batchUpdate)(value1, value2);

常见问题与解决方案

问题：参数序列化失败

当传递复杂对象时，可能会遇到序列化错误。解决方案是只传递基本类型或使用 makeShareable 处理复杂对象：

import { makeShareable } from 'react-native-reanimated';

const complexData = makeShareable({ a: 1, b: 'text' });
runOnJS(processData)(complexData);

问题：函数引用丢失

如果传递的函数是动态创建的，可能会导致引用丢失。解决方案是使用 useCallback 确保函数引用稳定：

const stableCallback = useCallback((param) => {
  // 处理逻辑
}, []);

// 在 Worklet 中安全调用
runOnJS(stableCallback)(param);

问题：过度使用导致性能下降

每次 runOnJS 调用都会产生线程通信开销。建议：

• 避免在动画每一帧调用 runOnJS
• 优先在 Worklet 中完成计算，只将结果传递给 JS 线程
• 使用 useAnimatedReaction 代替频繁的状态检查

最佳实践总结

1. 明确线程边界：UI 相关计算放在 Worklet 中，业务逻辑放在 JS 线程
2. 减少通信次数：批量处理数据，避免频繁跨线程调用
3. 保持函数稳定：使用 useCallback 确保传递给 runOnJS 的函数引用稳定
4. 注意参数类型：优先传递基本类型，复杂对象使用 makeShareable
5. 避免阻塞操作：runOnJS 调用的函数不应包含耗时操作

通过合理使用 runOnJS 函数，你可以充分发挥 Reanimated 的跨线程能力，构建流畅的 React Native 应用。更多细节请参考官方文档 docs/docs-reanimated/docs 和源码实现 packages/react-native-reanimated/src。

【免费下载链接】react-native-reanimated React Native's Animated library reimplemented 项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated