Expensify/App项目中Reanimated库的UI线程同步调用问题解析

问题背景

在Expensify/App项目的React Native混合应用开发过程中，开发团队遇到了一个与Reanimated动画库相关的技术问题。当应用启动时，控制台会抛出错误提示："[Reanimated] Tried to synchronously call a non-worklet function 'fastMerge' on the UI thread"。

技术原理分析

这个问题本质上涉及React Native架构中JavaScript线程与UI线程的通信机制。Reanimated库为了实现高性能动画，引入了worklet的概念。Worklet是一种特殊的函数，它可以在UI线程上同步执行，而不会阻塞JavaScript线程。

在React Native的架构中：

1. JavaScript线程负责业务逻辑处理
2. UI线程负责界面渲染和动画
3. 两个线程通过异步桥接进行通信

当我们需要在UI线程执行某些操作时（特别是动画相关），这些操作必须被标记为worklet。如果尝试在UI线程同步调用普通JavaScript函数，就会触发这类错误。

问题根源

具体到Expensify/App项目中的情况，问题出在useWorkletStateMachine自定义hook的实现上。这个hook内部使用了来自e-common库的fastMerge函数，而该函数没有被正确标记为worklet。

关键点在于：

1. useWorkletStateMachine中的逻辑需要在UI线程执行（因为是动画相关）
2. fastMerge作为被调用的工具函数，也需要在UI线程执行
3. 但fastMerge没有被标记为worklet，导致线程调用冲突

解决方案

开发团队采取的解决方案是将e-common库中的fastMerge函数转换为worklet函数。具体实现方式是：

1. 在fastMerge函数定义处添加worklet标记
2. 确保函数内部所有嵌套调用也都是worklet兼容的
3. 由于fastMerge的所有依赖函数都在同一文件中定义，转换过程相对简单

这种解决方案的优势在于：

• 保持了原有功能不变
• 符合Reanimated库的线程调用规范
• 不需要修改调用方的代码
• 保持了代码的可维护性

经验总结

这个问题给React Native开发者提供了几个重要启示：

1. 当使用Reanimated库时，所有需要在UI线程执行的函数都必须标记为worklet
2. 工具函数的复用需要考虑执行上下文，特别是当它们可能被worklet调用时
3. 跨线程调用是React Native性能优化的关键点，需要特别关注
4. 代码审查时应特别注意动画相关代码的线程安全性

最佳实践建议

为了避免类似问题，建议开发团队：

1. 建立worklet函数的代码规范，明确标记要求
2. 在文档中特别注明哪些工具函数可以在worklet中使用
3. 考虑创建worklet专用的工具函数集
4. 在CI流程中加入worklet调用的静态检查

这个问题虽然从表面看是一个简单的函数标记问题，但深入理解后可以发现它涉及React Native架构的核心概念，对于开发高性能React Native应用有着重要的指导意义。