未加星标

MobX 3 released: Unpeeling the onion

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

MobX 3 released: Unpeeling the onion
MobX 3 released: Unpeeling theonion

I’m proud to announce that MobX 3 is generally available! Version 3 doesn’t introduce many new concepts, nor did barely anything change in the core algorithm. But the API has received many improvements. The API is now more coherent, and it paves the path towards a Proxy based Mobx implementation (to be made once all major web browsers support this move). The full details of all the breaking and non-breaking changes can be found in the changelog , but read on for the gist of it.

Oh, and the homepage of MobX is now officially https://mobx.js.org !

Pro tip: If you want to migrate quickly, use a strongly typed environment (TypeScript recommended) so that the compiler can assist:-) .

Unpeeling `observable` theonion

The most important change in MobX 3 is how observable data structures are created. The MobX 2 API has quite a few irregularities and edge cases. It was a community effort to redesign the observable API. In the longest thread in the issue tracker so far, many use cases and usage patterns were discussed. Many proposals were shot down in mid air, but I am very happy with the end result.

The new API follows the “onion pattern”. The API is now nicely layered; each API layer can be easily peeled back to reveal lower level functions. Let’s quickly walk through it.

The observable function / decorator works largely the same as in MobX 2. There are 3 notable changes:

Objects are by default no longer enhanced but cloned. This is consistent with arrays and maps, and paves the path to Proxies. ES6 Map support has been added (string based keys only). Argumentless function values are no longer automatically converted into computed properties. This should avoid a lot of confusion.

Feel free to skip the remainder of this section if you are not experienced with MobX; it’s quite detailed…

Observable

The observable(data) function constructs new observable collections. Object, maps, arrays or boxed observables. If we unpeel observable, you will find that it just calls one of the following methods: observable.object , observable.map , observable.array and observable.box . Feel free to use those methods directly instead of the generic observable method.

Collection factories

Each of these collection types have the same semantics: If you assign a non-observable, primitive value to them, MobX will automatically clone and convert that object into an observable. By calling observable(newValue) before storing that new value. This enables deep observability by default. This recursive process can be described as making data deep observable.

Shallow collection factories

However, sometimes you want a collection where MobX doesn’t try to enhance the data into an observable. For example when storing JSX or DOM elements, or objects that are managed by an external library. In other words, sometimes you just need a shallow collection. A collection that itself is observable, but the values it stores are not. For this purpose MobX now also exposes functions to create shallow collections: observable.shallowObject , observable.shallowMap , observable.shallowArray and observable.shallowBox . In addition, similar to extendObservable , there is now extendShallowObservable .

Decorators & modifiers

If you are using decorators, the @observable decorator applies the deep strategy. You can make this more explicit by actually using the @observable.deep decorator. Similarly there is the @observable.shallow decorator, which converts any value you assign to it into a shallow collection (only arrays and maps are supported). And finally there is @observable.ref , which leaves any value you assign to the property completely as is, and just creates an observable references to the value you assign to it (similar to observable.shallowBox )

If you are not using decorators, you can still use those strategies when you create observable objects by calling these decorators as function. For example: const message = observable({ author: observable.ref(null) }) . These new modifiers replace the old asFlat , asMap etc.. modifiers. And, as you might have guessed by now, with this we arrived at the core of the onion. These modifiers are used internally by the shallow and deep observable collections.

Error handling

MobX 3 introduces clear error handling behavior. Where MobX 2 did a best effort to recover from any exceptions thrown in a derivation, the semantics are now clearly defined:

Computed values will now always catch exceptions in derivations, and re-throw them to any consumer that tries to read the value.

Reactions will always catch exceptions, and by default just logs them to the console. This ensures that if one reaction throws an exception, this doesn’t influence / prevent the execution of other reactions.

Both computed values and reactions will now always recover from exceptions; that is, even though an exception is thrown, the tracking information is preserved. This means that they will continue to run and they will recover if the cause of their exception is removed. It is possible to attach custom error handling behavior to reactions by attaching an onError handler. It is also possible to attach a global error handler, which is great monitoring and testing purposes.

Further notablechanges

MobX 3 now ships with Flow typings ! Note that the flow typings do not cover everything, as some overload patterns can be expressed in TypeScript, but (afaik) not in Flow.

It is now possible to create actions that automatically bind to the correct this , similar to autobind. You can use action.bound(fn) or @action.bound instead of just action(fn) to achieve this.

The API of reaction and computed has been simplified and both take option objects now, instead of a multitude of parameters. Check the changelog for the details.

The callbacks passed to observe are now always invoked with a change object. In MobX 2 the observe listeners of computed values and boxed observables were invoked with (newValue: T, oldValue: T) , this has changed to (change: { newValue: T, oldValue: T }) which is consistent with spy , intercept and observe for collections.

Structurally comparison observables has been removed from the core. This feature was hardly used, and if it was used, it was often in places where boxed / reference observables would be the more appropriate solution, such as when working with immutable objects. It is still possible to create structural comparing computations ( (@)computed.struct ) and reactions (which has an option for this).

transaction has been deprecated in fav

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: React
分页:12
转载请注明
本文标题:MobX 3 released: Unpeeling the onion
本站链接:http://www.codesec.net/view/524565.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(77)