MobX与观察者的React最佳实践

时间:2020-02-02 15:27:01

标签: reactjs mobx mobx-react mobx-state-tree mobx-react-lite

我并没有真正遇到问题,这更像是我想知道应该使用mobx进行反应的最佳方法是什么。所以这是我的情况:

我对mobx并不陌生,但是我有多年使用react的经验(主要是使用redux)。 我的新项目将mobx-state-treemobx-react-lite一起使用,以便将我的组件与包装组件的函数observer连接起来。我已经建立了一个包含多个存储的根存储。 我现在真的很热衷,但是我想提出一些建议:

我应该使用redux常见的容器逻辑,这意味着我应该只连接一个“容器”组件,该组件将处理与我的商店的连接并将其传播给它的子级?还是应该直接与观察者连接尽可能多的组件,这些组件需要从商店中获取数据?

从技术上来讲,第二个选项是否更优化?根据React哲学,这仍然是一个好主意吗?您对这个主题有何看法?

任何答案都会非常感激

1 个答案:

答案 0 :(得分:1)

从技术上讲,您不需要容器/表示概念。您可以使用上下文,localStore或globalStore,但这并不意味着容器/表示有时无用。

Mobx修补shouldComponentUpdate的生命周期,并从根本上为您优化组件渲染。 mobx-react在他们的文档中提到与观察者建立联系的组件越多,越好。

这是很常见的模式,应该对shouldComponentUpdate进行大量检查以避免不必要的渲染。 MobX根本不需要这样做。

我的观点是,模式每月都会变化,因此学习通用概念可以简化从全局存储,本地存储,上下文,挂钩和其他api更改的过渡。

反应组件的模式也会随着时间而改变。

使用您需要的内容并立即了解。如果5年后没关系,则不要花费超过5分钟的时间来考虑它。您可以随时进行有趣的重构。

进一步阅读:

https://mobx.js.org/README.html

https://mobx-react.js.org