组织项目结构

使用 MobX 时，没有必要像使用 Redux 那样区分容器组件和展示组件。所有组件会自动根据 state 的变化进行渲染（当然，前提是组件使用 observer/@observer 包装），所有组件都相当于展示组件。

这里读者可能会有疑问：MobX 项目中，所有组件都需要使用 observer/@observer 包装吗？这倒也不是，如果组件中使用到可观测的 state，组件就必须使用 observer/@observer 包装；否则可以不使用 observer/@observer。但即使组件中没有使用可观测的 state，使用 observer/@observer 包装组件也是有好处的，因为 observer/@observer 会将组件使用的不可观测的 props 转换成可观测的 props，这样只有当 props 真正发生改变时，当前组件才会重新渲染。简单理解的话，observer/@observer 的使用相当于重写了组件的 shouldComponentUpdate 方法。所以可以在项目中尽可能多地使用 observer/@observer，这可以提高所有组件的渲染效率。当然，这种方式也有一个缺点：难以在不使用 MobX 的项目中复用这些组件。

我们前面已经提到，MobX 中的 state 一般会封装在不同的 store 中，store 不仅保存了 state，还保存了操作 state 的方法。对于与领域直接相关的 state，一般会创建专门的 model 实体类，用于描述 state。

根据上面的分析，BBS 的项目结构如图 11-1 所示。

这里，我们还将 store 中使用到的网络请求单独封装，放到 api 文件夹下，这样有助于测试 store 时模拟网络请求。