10、深入探究原生模块与组件的高级技术

深入探究原生模块与组件的高级技术

在开发过程中，原生模块与组件的高级技术能够帮助我们更好地实现复杂的功能和优化性能。下面将详细介绍这些技术及其应用。

1. 直接操作（Direct Manipulation）

当进行超出 React 渲染过程范围的 UI 操作时，我们希望避免组件树的重新渲染。这种操作适用于以下两种情况：一是大部分 UI 逻辑卸载到原生层；二是涉及平滑、连续的动画。例如，动画组件的属性更新、纯原生视频播放器的视频状态（如暂停/播放）以及文本输入框的内容更新等。

操作步骤如下：
1. 获取组件的 React ref。
2. 使用该 ref 调用组件实例的 setNativeProps() 方法。

需要注意的是，虽然直接操作比普通的属性更新（会触发重新渲染）更轻量级，但它仍然会带来 JavaScript 到原生层通信的开销。因此，不建议频繁使用，对于频繁更新，建议使用其他技术。

2. 同步方法调用（Synchronous Method Call）

从 JavaScript 调用原生方法可以实现同步。具体来说，这种方法调用的二进制执行直接在 JavaScript 线程上进行。当涉及多个异步事件源（如用户交互和网络事件），且所有事件的结果对后续逻辑流程至关重要时，使用同步方法调用可以显著降低复杂度，使整体逻辑更不易出错。

同步方法调用的优势在于：
1. 直接在 JavaScript 线程上执行。
2. 消除了原生层和 JavaScript 层之间的数据传递所需的线程间通信和序列化。

不过，使用同步方法调