mobx理解和疑问小结

Posted 2022-03-02 openglnewbee

1. 对于store的理解：

http://cn.mobx.js.org/best/store.html

在复杂项目中，可以考虑引入rootstore和provider对所有的store进行统一管理；

UI store可以用于做一些全局相关的处理，比如loading、屏幕尺寸变化、主题设置这些工作。

2. 基于编码的灵活性考虑，可以不加入 use strict,修改属性更方便。

3. class内部状态完全可以用this.xxx来取代，在前面加上@observerable, 非常方便，class本身用@observer装饰。也就是说此class是个观察者，它也观察着本类内部的属性，比如这里的watchOn：

@ observable watchOn = false; 内部属性的初始化也很简单： watch = new WatchStore();

这让你脱离了一些束缚，编写最纯粹的代码（注意生命周期！）

4. questions TODO:

componentWillReact？？？ In RN, if it works?

action.bound  什么东西？

atom 什么场景使用？

5. reaction的用法：

http://cn.mobx.js.org/refguide/reaction.html

  this.saveHandler = reaction(
            // 观察在 JSON 中使用了的任何东西:
            () => this.asJson,
            // 如何 autoSave 为 true, 把 json 发送到服务端
            (json) => 
                if (this.autoSave) 
                    this.store.transportLayer.saveTodo(json);
                
            
        );

当且仅当this.asJson返回一个新值时，第二个方法才会运行；this.asJson返回的值就是第二个方法的参数json.

它的用法需要在实践中体会。

6. autorun的使用和其与reaction的对比

  constructor()
        mobx.autorun(() => console.log(this.report));
   

autorun我理解就类似于一个触发器，其中使用到的所有observable对象一旦有变化，就会触发它的运行。reaction和它有点相似之处，但基于的是一个表达式值的变化，然后基于这个值触发了一个动作，需要注意的是后一个动作不会被它使用到的其他可观察对象触发，这是和autorun不同的地方。