mobx源码解读4

这节介绍一下mobx的变动因子的稳定性。

mobx整个系统是由ObservableValue, ComputedValue, Reaction这三个东西构建的

ObservableValue 是最小的构成单位，ComputedValue是基于一个或多个ObservableValue构建的。Reaction则是由ObservableValue与ComputedValue驱动执行。

假如有ObservableValue a,b ， ComputedValue c是由a, b组成，那么当a发生变化时，它会让c计算自己的新值。如果c与Reaction d有关联，那么d也会执行。这种关系机制，通过依赖收集实现。但在极端的场景中，a,b可能会被重复收集，造成不必要的性能消耗。因此这些对象都有一个叫lowestObserverState的属性。

ObservableValue的父类就是BaseAtom, 它在这里继承于lowestObserverState，值为IDerivationState.NOT_TRACKING， 即-1。

ComputedValue没有继承BaseAtom或Atom，但结构与其他类差不多，lowestObserverState的值为IDerivationState.UP_TO_DATE，即为0

它还有一个dependenciesState， IDerivationState.NOT_TRACKING，即－1

Reaction没有lowestObserverState， 只有dependenciesState ，值为 IDerivationState.NOT_TRACKING，即－1

IDerivationState还有两个状态，POSSIBLY_STALE，即1， 和STALE 2.

我们可以将这四个状态翻译成

• IDerivationState.NOT_TRACKING: 不追踪，或者刚初始化
• IDerivationState.UP_TO_DATE: 已经更新，或者稳定
• IDerivationState.POSSIBLY_STALE: 可能不稳定，或者不知
• IDerivationState.STALE: 不稳定

当我们通知上层变更时，是通过propagateChanged方法，

 function propagateChanged(observable) {
//如果要通知上层发生变化，那么先判定自己是否稳定，不稳定就不要发出通知了
//只有稳定的东西，值是确定的，可以让上层的Computed或Action 不需要求值，直接用它的值
                    if (observable.lowestObserverState === IDerivationState.STALE)
                        return;
//将自己变成不稳定的，因此上层可能会在推导过程中修改它
                    observable.lowestObserverState = IDerivationState.STALE;
                    var observers = observable.observers;
                    var i = observers.length;
                    while (i--) {
                        var d = observers[i];
//将它上层的依赖状态改成不稳定
                        if (d.dependenciesState === IDerivationState.UP_TO_DATE)
                            d.onBecomeStale();
                        d.dependenciesState = IDerivationState.STALE;
                    }
                }

计算属性要计算自己的值，先经过shouldCompute。这相当于性能优化，因为计算自己的值可能经过收集依赖等环节，能避开就避开。如果是计算属性，这时它确定变成不稳定，需要进行计算。

function shouldCompute(derivation) {
                  switch (derivation.dependenciesState) {
                        case IDerivationState.UP_TO_DATE:
                            return false;
                        case IDerivationState.NOT_TRACKING:
                        case IDerivationState.STALE:
                            return true;
                        case IDerivationState.POSSIBLY_STALE:
                           //....略
                 }

 }

ComputedValue被ObservableValue变成不稳定它，它要能知自己的依赖发生变成，是通过propagateMaybeChanged

  function propagateMaybeChanged(observable) {
                    if (observable.lowestObserverState !== IDerivationState.UP_TO_DATE)
                        return;
                    observable.lowestObserverState = IDerivationState.POSSIBLY_STALE;
                    var observers = observable.observers;
                    var i = observers.length;
                    while (i--) {
                        var d = observers[i];
                        if (d.dependenciesState === IDerivationState.UP_TO_DATE) {
                            d.dependenciesState = IDerivationState.POSSIBLY_STALE;
                            d.onBecomeStale();
                        }
                    }
                }

当ComputedValue计算出其值后，它又会将其依赖项的状态改成UP_TO_DATE.