Mobx

569 阅读2分钟

核心逻辑

用store对组件进行状态管理

image.png

动作改变状态(数据),状态改变导致视图更新。我们控制好状态(state),就能很好的把握住整个视图。

image.png Mobx 使用单向数据流,利用 action 改变 state。无论computer还是reaction都可以看作是state的一个派生,一个是派生值,一个是派生行为(副作用),组件的更新也可以看作一种reaction(react中就是执行了reRender方法嘛)

computer是惰性的,有用到它的时候它才会去执行。

6a67aa36181773407ebd9bd39fcd2fcee697247c.jpg 从这个例子里很容易看出,当真正执行到用到computer的这句代码时,才去调用的computer方法。这个逻辑感觉比较合理,确实很稳。

具体细节

用什么去存储state,Mobx不关心,用class、对象、数组都行。至于state数据存储在哪,也不重要,只要组件能拿到就行。

只要这些state改变,就会产生反应(reaction),通知衍生(组件、UI)更新。Mobx说会尽可能少的更新UI,其实也就是仅更新用到相应状态的组件吧。不出意外,应该也是通过Proxy的get来添加的依赖,通过set来通知依赖更新(组件reRender)。通过observable创建Proxy对象(被观察数据),observer创建依赖(观察者),action来改变数据。

一些API

observable

本质上是一个函数,功能是监听数据,使数据变成响应式。既然能代理数组、对象,显然是用的Proxy。

observer

一个是被观察的数据,一个是正在观察数据的(人),很形象的说明了这个函数是用在react组件上的,让组件成为响应式组件(观察者)。

注:这个很牛批,不仅被观察的数据更新,会使组件reRender。而且在组件props没有变化时,会使组件不去重新reRender,类似React的useMemo功能。

computed

一旦computed数据被组件render()中使用,computer中依赖的observer变化,computer就会重新计算。当computer变化时,才会通知组件更新(再次调用render)。