RCTDirectEventBlock vs RCTBubblingEventBlock

Question

RCTDirectEventBlock 与 RCTBubblingEventBlock 有什么区别？

Answer 1

似乎没有太多官方文档，Facebook已经关闭并锁定了要求更好文档的问题。我发现的一个有用的文档表明这纯粹是一种风格差异：

冒泡事件类似于 DOM 事件，以便父组件可以捕获其子组件触发的事件。通常，这些与UI相关，例如"用户触摸了此框"。直接事件不会冒泡，而是用于更抽象的事件，例如"此图像加载失败"。

通过这个备忘单：https://gist.github.com/chourobin/f83f3b3a6fd2053fad29fff69524f91c

Answer 2

考虑">RCTSlider.h"上的代码

https://github.com/facebook/react-native/blob/master/React/Views/RCTSlider.h

@property (nonatomic, copy) RCTBubblingEventBlock onValueChange;
@property (nonatomic, copy) RCTDirectEventBlock onSlidingComplete;

该RCTBubblingEventBlock适用于可能具有多个回调的内容，例如 - "值已更改"，并且可能会触发多个更改。

但同样，即使RCTDirectEventBlock具有相同的签名，它也用于事件的单个事件回调，例如 - "已完成"。

从-https://github.com/facebook/react-native/blob/master/React/Views/RCTComponent.h

/**
 * These block types can be used for mapping input event handlers from JS to view
 * properties. Unlike JS method callbacks, these can be called multiple times.
 */
typedef void (^RCTDirectEventBlock)(NSDictionary *body);
typedef void (^RCTBubblingEventBlock)(NSDictionary *body);

因此，由于两者都具有相同的方法签名，因此两者都具有等效的代码，但建议对多个调用用例使用 bubble 事件，对单个调用用例使用直接事件，只是为了代码的一致性和清晰度。