Mobx + useContext + ts = !!!!

yuxino commented 4 years ago

update 2020年12月07日22:56:18

mobx 其实对新手来说上手还是需要动脑的，并且状态也不算特别好追踪相比redux的time machine之流。目前有一个更好的选择是 valtio 。功能完备，以及足够少的 API 就能轻松体验到状态管理的好处。

写这篇主要是为了填个坑。。。

~~我指着一个地道对朋友(@OctupleSakura)说: 那叫一个地道~~。

咳咳。之前用Mobx的时候的感觉是，装饰器用的好嗨哦，connect状态的时候很巴适，很有逼格很帅，很像Java, Python之类的。

直到有一天，我用了hook, 已经回不去以前用装饰器的日子了。

装饰器臭！hook香! 于是我得出结论:

Mobx + useContext + ts = !!!

且听我分析。它到底香在哪里。首先装饰器虽然在社区里非常常见了, nest之类的，但是直到我写这篇文章的时候，它终究还是没有进入到最终阶段，依旧停留在了 Stage 2。

另外它目前有很多的局限性，只能作用在 class member 上。这也就意味着我们的 functional component依旧得用以前的HOC写法，并且通过 props 才能达到和 mobx 共享状态。

但是hook并不需要这样，全局的状态就像一个普普通通的状态被使用。随着视图跟新也会跟着更新。

先看效果吧。Codepen链接，点金进入。

在说这个之前我们来看看官网是怎么和hook结合的。官网有三种方式，但是都非常的特么的不好使。。。不如说是残次品，只能解决有限度的状态管理。

因为示例里面的这些状态都不是 global 的，全部都是局部的状态管理。

所以官网示例根本无法满足我理想中的状态的需求。我想改造它，达到一个最终目的。就是通过 useStore 这一个简单的 hook，我们就能办到状态管理，并且能够有效地利用到所有的mobx的feature，包括computed,以及action。

为了办到这一点我们就得开始思考，要怎么构建这一个hook，并且实现状态的下发，很自然的我们想到了使用 useContext。毕竟它可以从上而下的传递状态。

// TODO: ...

OctupleSakura commented 4 years ago

地道朋友不请自来你tm快更啊:space_invader:

yuxino commented 4 years ago

@OctupleSakura 你还没下班么?

OctupleSakura commented 4 years ago

@yuxino 已经在家摸鱼了

yuxino commented 4 years ago

@OctupleSakura ~不想写了~

OctupleSakura commented 4 years ago

@yuxino 老咕咕精了🤦‍♀️