核心逻辑
用store对组件进行状态管理
动作改变状态(数据),状态改变导致视图更新。我们控制好状态(state),就能很好的把握住整个视图。
Mobx 使用单向数据流,利用 action 改变 state。无论computer还是reaction都可以看作是state的一个派生,一个是派生值,一个是派生行为(副作用),组件的更新也可以看作一种reaction(react中就是执行了reRender方法嘛)
computer是惰性的,有用到它的时候它才会去执行。
从这个例子里很容易看出,当真正执行到用到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)。