likes
comments
collection
share

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

作者站长头像
站长
· 阅读数 10

每当我发布一篇文章,都会给一般人来质疑。还是那句话把:ng2:我在5年后等你。

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

与一般的 React 中事件处理不同,编辑器的事件更加复杂,包含鼠标、键盘等等,例如,现在输入框组件 Input 提供了更多的事件接口,如键盘、输入法等,以便编辑器能够完成快捷键,中文输入等功能:

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

而在 RxJS 的世界中,同一的数据结构(Observable)让不同的事件(键盘、鼠标、AJAX等等)能够任意组合,并派生出新的事件。编辑器恰恰是一个多种事件交织的场景:例如,我们需要组合不同的按键事件来构成快捷键;我们需要组合鼠标和键盘的事件,去决定光标位置,等等。因此,在这个项目中,除了使用 RxJS 管理状态,我们还考虑使用 RxJS 来处理事件。

假定我们的键盘按下的事件流为 keyUp$,一方面,我们希望能够观察这个流,当有键盘按下时,作出响应,另一方面,我们也要能在键盘按下时,将按下事件送入 keyUp$ 中。换言之,keyUp$ 具有双重身份,它既是可观察对象 Observable ,又是观察者 Observer,在 RxJS 中,具备这样双面角色的就是 Subject

因此,想要在 React 中使用 RxJS 进行事件管理,就需要:

  • 为事件创建 Subject 对象
  • 在事件回调中,将事件对象送入 Subject 中

使用 Subject 来管理事件

在 Editor 组件中,我们创建各个事件的 Subject,并在子组件的事件回调中,将事件送入对应的事件流中。另外,由于我们使用了函数式组件,为了避免每次函数执行时重复创建 Subject,我们还要使用 useMemo hook:

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

useEventObservable

上面的代码还是有些啰嗦了,我们可以将创建 Subject 以及为 Subject 对象送入值的过程封装到一个 Hooks,来减小样板代码:

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

这个 Hook 将返回:

  • 事件对应的流
  • 事件的回调句柄

现在,我们的 Editor 组件就可以简化为:

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

值得注意的是,现在,我们还使用了前面章节中封装的useObservable 来管理输入框状态。

现在结合事件的处理结合另一个思路

现在有那么几个业务,现在给你5个人进行安排。这个时候你是怎么安排的呢?这里的人能力都不在一个水平的。

相比大多数人是以下的安排

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

可是对于一个工作多年的程序来说,很多繁琐的操作有时候真的很不信去写,比如ui的数据渲染这些东西。有时候是真的都不想写,就好比React,vue的作者直播写的代码的时候,还需要去查一些css的操作。

有的时候有些人的能力是差到CRUD都做不好,可能做ui层的数据绑定对他们来说时最好的状态,对于实现生来说。

这个时候我们就在想,有没有什么方便可以进行一个简单,然每个人都舒服单一的敏捷开发呢?我用rxjs主要是考虑到人员的安排,和事件驱动的做事情。

使用 RxJS 与 Hooks 来处理事件,和多人开发的中的领域驱动思路(最后讲到)

在这种模式下,实现生可以无需关系事件的处理也不用关心数据的组合,我只需要监听到数据的来源就可以做事情了。只有为什么不用mobx,因为mobx处理事件不好用!