[UselessRxjs]没啥用，但能学会Rxjs系列 - 第一课
2026-07-30 13:29:13
不用 RxJS 实现相同功能所需代码量分析
要实现与上述 RxJS 代码相同的功能，即处理搜索框和筛选规则的触发搜索，搜索结果面板的显示与隐藏，以及确保搜索结果面板总是拿到最新一次请求的结果，我们需要手动管理事件监听、状态更新、请求发送和结果处理。以下是对实现这一功能所需代码量的分析：
事件监听：
需要为输入框和筛选按钮添加事件监听器，以捕获用户的搜索行为。
需要为搜索结果面板添加显示/隐藏的逻辑。
状态管理：
需要管理搜索输入框的值。
需要管理筛选规则的状态。
需要管理搜索结果面板的可见性。
需要管理加载状态。
需要管理搜索结果数据。
请求发送：
需要根据用户的搜索行为（输入框值变化或筛选规则变化）发送请求。
需要取消之前的请求（如果还未完成），以避免不必要的网络开销。
结果处理：
需要处理请求的结果，更新搜索结果数据。
需要在搜索结果面板可见时显示结果，隐藏时则不进行任何操作。
防抖处理：
需要实现防抖逻辑，以减少频繁请求对接口的压力。
代码组织：
需要将上述逻辑组织在一个或多个类中，或者使用函数式组件和状态管理工具（如 React Hooks）来实现。
代码量估算：
- 事件监听：约 20-30 行代码，包括添加事件监听器和处理函数。
- 状态管理：约 30-50 行代码，包括定义状态变量和更新状态的逻辑。
- 请求发送：约 30-40 行代码，包括发送请求、取消请求和错误处理的逻辑。
- 结果处理：约 20-30 行代码，包括处理请求结果和更新搜索结果的逻辑。
- 防抖处理：约 10-20 行代码，实现防抖函数。
- 代码组织：约 20-30 行代码，用于组织上述逻辑，包括类定义或函数式组件的定义。
总计：约 130-180 行代码（不含注释和空行）。
这个估算是一个大致的范围，实际代码量可能会根据具体实现方式和代码风格有所不同。但可以看出，不使用 RxJS 实现相同功能需要编写相当数量的代码，而 RxJS 通过其强大的操作符和响应式编程模型，能够以一种更加简洁和可维护的方式实现这些功能。
渲染与异步 IO 的关系：
- eventTask：通常由用户交互事件触发，如点击、输入等。这些事件会被放入事件队列中，等待浏览器处理。
- microTask：通常是由 Promise 的 then 方法、MutationObserver 等触发的微任务。这些任务会在当前事件处理完毕后立即执行。
- macroTask：通常是由 setTimeout、setInterval、I/O 操作等触发的宏任务。这些任务会被放入宏任务队列中，等待浏览器空闲时执行。
在前端开发中，渲染行为通常是由某个异步 IO 触发的。例如，用户点击按钮（eventTask）后，可能会触发一个请求（macroTask），请求完成后（Promise.then，microTask），更新状态并触发渲染。因此，理解这些异步 IO 的类型和它们之间的关系对于优化前端性能和实现复杂的交互逻辑至关重要。
总结：
虽然不使用 RxJS 也可以实现相同的功能，但需要编写更多的代码来处理事件监听、状态管理、请求发送和结果处理等逻辑。而 RxJS 通过其强大的操作符和响应式编程模型，能够以一种更加简洁和可维护的方式实现这些功能，同时提供更好的性能和可扩展性。因此，在需要处理复杂异步逻辑和状态管理的情况下，使用 RxJS 是一个很好的选择。
热门标签
