MobX in React Native

MobX is an excellent state management library that is both concise and efficient. Of course, THIS is what I realized after using it. The main reason for trying the water car at the beginning was responsiveness, considering that it might be more in line with Vue’s way of thinking. However, there is little in common between the two except for the reactive form.

There were a lot of missteps, partly due to a lack of understanding of MobX mechanics at the time; The other reason is that MobX is ultimately just a library, which is limited by the React mechanism and compatibility issues with other non-MOBx management components. Many of these cases are documented (here and here), and I’ll summarize them based on what I’ve encountered.

Compatibility issues with non-responsive components

When working with non-responsive components, MobX sometimes needs to provide them with a non-responsive copy of their data so that no observable can be modified by other components.

observable.ref

When using React Navigation, if MobX is required to manage it, the Navigation state stack needs to be manually configured. In this case, “shallow observation” with @observable.ref can avoid triggering MobX warning when the state is modified by React Navigation.

When the Navigator accepts the Navigation props, it means that the navigation state is manually managed.

observable.shallowArray() 与 observable.shallowMap()

MobX also provides other convenient data structures for storing non-responsive data.

For example, when using SectionList, we need to provide it with data to generate the list. Since the official implementation of Native is not compatible with MobX, this data cannot be responsive, otherwise MobX will send a bunch of warnings.

MobX has a mox.tojs () method to export non-responsive copies; If the structures are different, you can also use @computed to generate the data automatically. However, both methods are iterated through each time an item is added, which can cause performance problems.

Instead, you can maintain an Observable. shallowArray that only holds key data and only generates lists (like a skeleton). Pass to the sections of the SectionList to copy a copy of the slice array.

Then store maintains an Observable. map to store the data of each item, inject store into item component, and use key to obtain data from map for filling.

Using shallowArray, MobX can automatically update lists to recognize changes in list length. Using map maintenance item data, each item can remain responsive without affecting each other, which is a significant optimization effect for long lists.

computed

Some optimizations can be made with @computed caching of data.

For example, if you have a reactive array ARR, a component is updated based on whether the ARR is empty. If you call arr.length directly, the component will render whenever the array length changes.

With computed generation, the component only needs to determine isArrEmpty to reduce unnecessary updates:

@computed get isArrEmpty () {  return this.arr.length <= 0}
Copy the code

observable.map

Since MobX can’t detect additions and deletions of properties with JS, it’s best to replace simple {} objects with observable.map. In addition, MobX does not provide Set support, you can use the same Map as the key and value instead.

Avoid accessing properties of child components in the parent component

This rule is also mentioned in the documentation for the simple reason that MobX logs dependencies by accessing properties for an Observer component. So even if the parent component doesn’t use this property, just to pass it on as props to the child component, MobX still counts it as relying on this property, causing unnecessary updates. The best way is to centrally store data in store, and sub-components obtain data through inject Store.

The widget

Because of React’s mechanics, MobX can only shine at the component level, not inside. As a result, large components tend to get stuck on MobX, and small components really take advantage of MobX’s auto-managed updates.

This article is excerpted from asynchronous Community, written by Xiangzhihong. The use of MobX in React Native is forbidden without authorization.

Read the original