React Redux 中间件思想遇见 Web Worker 的灵感附demo

写在最前

原文首发于作者的知乎专栏：React Redux 中间件思想遇见 Web Worker 的灵感（附demo），感兴趣的同学可以知乎关注，进行交流。

熟悉 React 技术栈的同学，想必对 Redux 数据流框架并不陌生。其倡导的单向数据流等思想独树一帜，虽然样板代码会有一定程度上的增多，但是对于开发效率和调试效率的提高是显著的。同时还带来了很多诸如 “时间旅行”，“ undo/redo ” 等黑魔法。

其实这还只是表象。如果你深入去了解 Redux 的设计理念，探索中间件奥秘，玩转高阶 reducer 等等，迎接你的就会是另一扇门。透过它，函数式编程思想之光倾斜如注。

思想背景

但是随着这个 web app 复杂度的提升，数据计算量压力徒增，你所设计的 Reducer 变得臃肿不堪。好吧，我们可以拆分 Reducer 使得代码看上去更加舒服。可是计算量呢？也许有一些“梦魇”，瓶颈般永远无法消除。

冥冥之中，“各种处理计算既然注定在同一时空，那么能否永远平行？”

曾几何时，你是否听说过 JS 单线程异步？听说过浏览器卡顿或卡死？听说过 60 fps？

其实一个很严峻的事实是：根据 60 fps 计算，每一帧留给我们 JS 执行的时间为 16ms（甚至更少）。那么一旦当 Reducer 计算时间过长，必然会影响浏览器渲染。

多线程思路

关于浏览器主线程、render queue、event loop、call stack 等内容，本文不再复述，因为里面的知识完全都够写一本书了。假定读者对其有一二认知，那么你也不难理解我们即将登场的救星—— Web Worker!

我们先来简单认识一下 web worker：

2008 年 W3C 制定出第一个 HTML5 草案开始，HTML5 承载了越来越多崭新的特性和功能。其中，最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程（Web Worker）的概念，并且规范出 Web Worker 的三大主要特征：

能够长时间运行（响应）；
理想的启动性能；
以及理想的内存消耗。

Work 线程可以执行任务而不干扰用户界面。

于是，脑洞大开，能否将我们的 Redux Reducer 计算状态部分放进 Worker 线程中处理呢？

答案是肯定的。
那么要如何实施呢？

我们先来看一下经典的 Redux workflow，如下图：

如果要接入 Web Work，那么我们改动流程图如下：

具体实现和一个demo

当然，有了思路，还需要在实战中演练。

我使用 “N-皇后问题” 模拟大型计算，并且实现的 demo 中可以任意设置 n 值，增加计算耗时。
如果你不理解此算法也没有关系，只需要知道N-皇后问题这个算法的计算耗时很长，且和 n 值相关：n 越大，计算成本越大。

除了一个极其耗时的计算，页面中还运行这么几个模块，来实现复杂的渲染逻辑操作：

一个实时每16毫秒，显示计数（每秒增加1）的 blinker 模块；
一个定时每500毫秒，更新背景颜色的 counter 模块；
一个永久往复运动的 slider 模块；
一个每16毫秒翻转5度的 spinner 模块

这些模块都定时频繁地更新 dom 样式，进行大量复杂的渲染计算。正常情况下，由于 JS 主线程进行N-皇后计算，这些渲染过程都将被卡顿。

同时，我设置“N-皇后问题”的 n 值，来观察在计算时这些模块的表现（是否卡顿）。在不开启 Work 线程的情况下，n 设置为13时，有 gif 图，左半部分：

我们非常清晰地看到：由于浏览器 call stack 进行 n=13 的皇后问题计算，而无法“按时”渲染，所以造成了这几个模块的卡顿，这些模块都无法更新状态。在这个卡顿过程中，用户的任何事件（如点击，敲键盘等）都无法被浏览器响应。这就是用户体会到的“慢”！

如果我把 n 值设置的大与13呢，比如24？
千万不要这么做！因为你的浏览器会被卡死！我使用 Mac Pro 8G 内存情况下，设置到14，浏览器就无法响应了。

在开启 Work 线程时，请参考上 gif 图右半部分，几个模块的渲染丝毫不受影响。完美达到了我们的目的。

因为 Reducer 的超级耗时计算被放入 Worker 线程当中，所以丝毫没有影响浏览器的渲染和响应。完全解决了用户觉得“电脑慢”的问题。

看到了如此完美的对比，也许你想问 Web Worker 的兼容性如何呢？

总结

其实，这篇文章的意义并不在于这个 demo 和应用。而是在启发一种新的想法的同时，review 了很多 JS 当中关键概念和基本知识。比如：单线程异步、宿主环境、60 fps、一个算法等等。

更值得一提的是，如果你去深入 demo 代码，你更会发现 Redux 设计精妙的思想，比如我们将 Web Worker 的应用抽象出一个公共库：Redux-Worker，并包装为 Redux 的中间件（middleware），所有 React Redux 都可以无侵入，采用中间件的思想使用：

import { applyWorker } from 'redux-worker';
const enhancerWithWorker = compose(
    applyMiddleware(thunk,logger),applyWorker(worker)
);

const store = createStore(rootReducer,{},enhancerWithWorker);

当然，Redux-Worker 这个中间件的实现原理更是巧妙，这里不再展开。感兴趣的同学可以参考我的此项目 Github 仓库。我 fork 了此库源码，并在核心逻辑加入了中文注释，感兴趣的同学可以关注。

我的其他关于 React 文章：

Happy Coding!

PS:
作者Github仓库和知乎问答链接欢迎各种形式交流。

React Redux 中间件思想遇见 Web Worker 的灵感附demo

写在最前

思想背景

多线程思路

具体实现和一个demo

总结

相关推荐