一个人为的例子，MobX 确实很出色，而 Redux 并不真正适合它

原文：https://medium.com/hackernoon/an-artificial-example-where-mobx-really-shines-and-redux-is-not-really-suited-for-it-1a58313c0c70

首先，提醒一句。在这篇文章中，我不是说 MobX 更好，或者我更喜欢它，或者任何东西。

Redux 和 MobX 我都用。

我喜欢他们两个，可能会再次使用他们两个。

本文仅给出了一个人工示例一个应用程序，如果我们需要它在相同的性能水平上运行，那么用 MobX 很容易编写，但用 Redux 很难。如果我没有说清楚，这是一个不公平的比较。

因此，这篇文章根本不是一个全面的比较，不应该被认为是基于现实世界的情况。所以请不要指着一个像这样的人造基准说“让我们都用这个而不是那个。快了。

我不相信有一个最好的工具。我相信每个工具都有自己的闪光点和不擅长的地方。

凡事都有个时间。我做这种实验是为了更好地了解我使用的工具，这样我就可以在未来为正确的工作选择正确的工具。

说完了，我们继续。

版本

就像 JavaScript 世界中的其他事情一样，我相信随着事情的进一步优化，这篇文章会很快过时。这就是为什么我要在这里列出版本号:

任务:像素绘画

我将使用 React 创建一个【像素绘画】应用程序。它有一个画布，在 128×128 的网格上显示可绘制的像素。

你可以用鼠标悬停在任何像素上进行绘画。

我们将并排渲染两张画布，但两张画布共享同一个图像。否则，每个像素都可以使用自己的本地组件状态，我们根本不需要使用任何状态管理库。

每个像素由一个<div>表示。

所以要渲染和更新 128×128×2=32768 个 DOM 节点。

这个实验将会非常缓慢。

注意:所有测试都是在生产版本上进行的。

MobX 版本

这是商店。(我在避免修饰语法，因为在撰写本文时，语法正在等待提案。)

**const** store = observable({
  pixels: asMap({ }),
  isActive (i, j) {
    **return** !!store.pixels.get(i + ',' + j)
  },
  toggle: action(**function** toggle (i, j) {
    store.pixels.set(i + ',' + j, !store.isActive(i, j))
  })
})

我们的画布渲染每个像素。

**function** MobXCanvas () {
  **const** items = [ ]
  **for** (**let** i = 0; i < 128; i++) {
    **for** (**let** j = 0; j < 128; j++) {
      items.push(<PixelContainer i={i} j={j} key={i + ',' + j} />)
    }
  }
  **return** <div>{items}</div>
}

每个像素在存储中观察自己的状态。

**const** PixelContainer = observer(**function** PixelContainer ({ i, j }) {
  **return** <Pixel
    i={i}
    j={j}
    active={store.isActive(i, j)}
    onToggle={() => store.toggle(i, j)}
  />
})

结果来了。 可以进入屏幕右上角的[mobx-react-devtools](https://github.com/mobxjs/mobx-react-devtools)。

这是分析应用程序性能的结果:

在上面的饼图中，脚本只占一小部分。大部分时间花在渲染和绘画上。

所以这意味着 MobX 正在尽最大努力！

Redux 版本:首次尝试

这是减速器:

**const** store = createStore((state = Immutable.Map(), action) => {
  **if** (action.type === 'TOGGLE') {
    **const** key = action.i + ',' + action.j
    **return** state.set(key, !state.get(key))
  }
  **return** state
})

选择器:

**const** selectActive = (state, i, j) => state.get(i + ',' + j)

动作创建者:

**const** toggle = (i, j) => ({ type: 'TOGGLE', i, j })

我们的 Redux 商店准备好了。

我们的画布为每个像素提供了store:

**function** ReduxCanvas () {
  **const** items = [ ]
  **for** (**let** i = 0; i < 128; i++) {
    **for** (**let** j = 0; j < 128; j++) {
      items.push(<PixelContainer i={i} j={j} key={i + ',' + j} />)
    }
  }
  **return** <Provider store={store}>
    <div>
      {items}
    </div>
  </Provider>
}

每个像素的 T2 对应于那个 T3。

**const** PixelContainer = connect(
  (state, ownProps) => ({
    active: selectActive(state, ownProps.i, ownProps.j)
  }),
  (dispatch, ownProps) => ({
    onToggle: () => dispatch(toggle(ownProps.i, ownProps.j))
  })
)(Pixel)

下面是结果 。你可以用redux-devtools-extension来查看店铺状态、行动，还可以做一些时间旅行。

好像这个版本比 MobX 的版本慢很多。让我们看看侧写。

运行 JavaScript 花费了大量时间。差不多 50%。这可不好。为什么要花这么长时间？

让我们做一些分析:

原来 Redux 的订阅模式就是这么运作的。

在上面的例子中，每个像素都被connect存储，这意味着它订阅了存储。当它改变时，每个订户决定它是否对该改变感兴趣，并做出相应的反应。

这意味着当我改变一个像素时，Redux 会通知所有 32，768 个用户。

与 Angular 1 的检污机构相同。而且它的建议对 Redux 也成立:不要在屏幕上渲染太多东西。

使用 Redux，只能整体订阅店铺。你不能订阅你的状态的子树，因为那个子树只是一个普通的旧 JavaScript 对象，不能被订阅。

有了 MobX，每一个状态都是可观察的。因此，在 MobX 版本中，每个像素都订阅自己的状态子树。所以从第一次尝试就这么快。

第二次尝试:单一订户

因此，太多的用户可能是一个问题。所以这一次，我会让它只有一个订户。

这里，我们创建了一个Canvas组件，它将订阅存储并呈现所有像素。

**function** ReduxCanvas () {
  return <Provider store={store}><Canvas /></Provider>
}**const** Canvas = connect(
  (state) => ({ state }),
  (dispatch) => ({ onToggle: (i, j) => dispatch(toggle(i, j)) })
)(**function** Canvas ({ state, onToggle }) {
  **const** items = [ ]
  **for** (**let** i = 0; i < 128; i++) {
    **for** (**let** j = 0; j < 128; j++) {
      items.push(<PixelContainer
        i={i}
        j={j}
        active={selectActive(state, i, j)}
        onToggle={onToggle}
        key={i + ',' + j}
      />)
    }
  }
  **return** <div>{items}</div>
})

然后，PixelContainer将把从Canvas收到的道具传递给它的Pixel。

**class** PixelContainer **extends** React.PureComponent {
  **constructor** (props) {
    **super**(props)
    **this**.handleToggle = **this**.handleToggle.bind(**this**)
  }
  handleToggle () {
    **this**.props.onToggle(**this**.props.i, **this**.props.j)
  }
  render () {
    **return** <Pixel
      i={**this**.props.i}
      j={**this**.props.j}
      active={**this**.props.active}
      onToggle={**this**.handleToggle}
    />
  }
}

下面是结果 。

这个版本的表现比第一次更差。

让我们看看是怎么回事。

问题好像是我们的Canvas。因为它是唯一订阅该商店的用户，所以现在它负责管理所有 16，384 个像素。

每个店铺派单需要用正确的道具渲染 16384 个 **Pixel** s 。

这意味着 16，384 个React.createElement调用，随后 React 试图为每个画布协调 16，384 个孩子。不太好。

我们可以做得更好！

第三次尝试:平衡树

Redux 的一个关键优势在于它的不可变状态树(它支持一些很酷的特性，比如无痛热重装和时间旅行)。

事实证明，我们构建数据和视图的方式并不是一成不变的。

不可变状态树存储在平衡树中时效果最好。我在这篇文章中讨论过这个想法:

[## 不可变的. js，持久数据结构和结构共享

为什么要用 Immutable.js 而不是普通的 JavaScript 对象？

medium.com](/@dtinth/immutable-js-persistent-data-structures-and-structural-sharing-6d163fbd73d2)

所以让我们对我们的应用程序做同样的事情。

我们将画布细分为四个象限。

当我们需要改变一个像素时，

我们可以只更新相关的象限，不去管其他 3 个象限。

我们可以只重新渲染 64×64=4096 个像素，而不是重新渲染所有 16，384 个像素。这在性能上节省了 75%。

4096 还是一个很大的数字。所以我们要做的是递归地细分画布，直到达到 1×1 像素的画布。

为了能够以这种方式更新组件，我们也需要以同样的方式构造我们的状态，这样当状态改变时，我们可以使用===操作符来确定象限的状态是否已经改变。

下面是(递归地)生成初始状态的代码:

**const** generateInitialState = (size) => (size === 1
  ? **false**
  : Immutable.List([
    generateInitialState(size / 2),
    generateInitialState(size / 2),
    generateInitialState(size / 2),
    generateInitialState(size / 2)
  ])
)

现在我们的状态是一个递归嵌套的树，不是像(58，52)那样通过坐标来引用每个像素，而是像(1，3，3，2，0，2，1)那样通过路径来引用每个像素。

但是要在屏幕上显示它们，我们需要能够根据路径计算出坐标:

**function** keyPathToCoordinate (keyPath) {
  **let** i = 0
  **let** j = 0
  **for** (**const** quadrant **of** keyPath) {
    i <<= 1
    j <<= 1
    **switch** (quadrant) {
      **case** 0: j |= 1; **break**
      **case** 2: i |= 1; **break**
      **case** 3: i |= 1; j |= 1; **break**
      **default**:
    }
  }
  **return** [ i, j ]
}

我们还需要反过来做:

**function** coordinateToKeyPath (i, j) {
  **const** keyPath = [ ]
  **for** (**let** threshold = 64; threshold > 0; threshold >>= 1) {
    keyPath.push(i < threshold
      ? j < threshold ? 1 : 0
      : j < threshold ? 2 : 3
    )
    i %= threshold
    j %= threshold
  }
  **return** keyPath
}

现在我们可以改变我们的减速器看起来像这样:

**const** store = createStore(
  **function** reducer (state = generateInitialState(128), action) {
    **if** (action.type === 'TOGGLE') {
      **const** keyPath = coordinateToKeyPath(action.i, action.j)
      **return** state.updateIn(keyPath, (active) => !active)
 *//* | *//           This is why I use Immutable.js:
      //           So that I can use this method.*    }
    return state
  }
)

然后，我们创建一个组件来遍历这棵树，并把所有东西放在适当的位置。GridContainer连接到商店并呈现最外面的Grid。

**function** ReduxCanvas () {
  **return** <Provider store={store}><GridContainer /></Provider>
}**const** GridContainer = connect(
  (state, ownProps) => ({ state }),
  (dispatch) => ({ onToggle: (i, j) => dispatch(toggle(i, j)) })
)(**function** GridContainer ({ state, onToggle }) {
  **return** <Grid keyPath={[ ]} state={state} onToggle={onToggle} />
})

然后每个Grid递归地渲染自己的一个较小版本，直到它到达一片叶子(一个白色/黑色 1x1 像素的画布)。

**class** Grid **extends** React.PureComponent {
  **constructor** (props) {
    **super**(props)
    **this**.handleToggle = **this**.handleToggle.bind(**this**)
  }
  shouldComponentUpdate (nextProps) {
    *// Required since we construct a new `keyPath` every render
    // but we know that each grid instance will be rendered with
    // a constant `keyPath`. Otherwise we need to memoize the
    // `keyPath` for each children we render to remove this
    // "escape hatch."*
    **return** this.props.state !== nextProps.state
  }
  handleToggle () {
    **const** [ i, j ] = keyPathToCoordinate(**this**.props.keyPath)
    **this**.props.onToggle(i, j)
  }
  render () {
    **const** { keyPath, state } = **this**.props
    **if** (**typeof** state === 'boolean') {
      **const** [ i, j ] = keyPathToCoordinate(keyPath)
      **return** <Pixel
        i={i}
        j={j}
        active={state}
        onToggle={**this**.handleToggle}
      />
    } **else** {
      **return** <div>
        <Grid onToggle={**this**.**props**.onToggle} keyPath={[ ...keyPath, 0 ]} state={state.get(0)} />
        <Grid onToggle={**this**.**props**.onToggle} keyPath={[ ...keyPath, 1 ]} state={state.get(1)} />
        <Grid onToggle={**this**.**props**.onToggle} keyPath={[ ...keyPath, 2 ]} state={state.get(2)} />
        <Grid onToggle={**this**.**props**.onToggle} keyPath={[ ...keyPath, 3 ]} state={state.get(3)} />
      </div>
    }
  }
}

下面是结果 。