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

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

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

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

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

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

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

使用 Subject 来管理事件

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

useEventObservable

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

这个 Hook 将返回：

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

现在，我们的 Editor 组件就可以简化为：

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

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

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

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

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

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

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

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