What is Mobx?

Mobx is a state management library.

Mobx philosophy

Any data derived from application state should be retrieved automatically.

“Anything that can be derived from the application state, should be derived. Automatically.”

The principle of Mobx

Mobx supports one-way data flow, that is, action updates state, and state updates view.

Why React and Mobx?

React and Mobx both provide optimal and unique solutions to common application development problems:

React optimizes UI rendering using the virtual DOM;

Mobx optimizes the mechanism for synchronizing application state with the React component by using reactive state charting, which changes the component only when the state is updated.

Ultimately, the React component is just a gorgeous display of state, and state derivatives can be managed by Mobx.

Mobx core concepts

1. Observable state

Mobx provides observable functionality for existing data structures, which can be raw or reference values.

2. Computed values

The calculated value is generally derived from the observed value, and when the observed value changes, the calculated value is automatically updated and optimized away when it is no longer in use.

Spawn: Anything that comes from a state and has no further interaction is spawn. Derivatives can take many forms, such as user interfaces and derived data

class TodoList {
    @observable 
    todos = [];
    
    @computed 
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
}
Copy the code
Step 3 Make eye contact

These Reactions react to state changes, but instead of producing a value, they produce side effects such as UI updates. You can create custom Reactions by using Mobx’s When, Autorun, and Reaction.

Side effects: An action usually has a goal effect, and if the action has other effects, they are called side effects. For example, array.concat () is designed to concatenate arrays, but can also be used to copy arrays: const arr = [1, 2, 3]; Const copy = arr.concat(), then the effect of this copy can be called a side effect.

4. The React components

You can turn stateless components into reactive ones by adding an Observer decorator (provided by Mox-React) to the React component.

How did Mobx react?

MobX responds to reading existing observable properties during the execution of the trace function.

  • Tracking functions: including computed expressions; The Render () method of the Observer component The first input function to the WHEN, Reaction, and Autorun methods.
  • Read: Indirect references to object properties (user.name or user[‘name’]).
  • Procedure: Trace only observable values read during function execution. It doesn’t matter if these values are used indirectly or directly by the tracing function.
1. The correct
  • Make an indirect reference within the trace function
  • Access an array property or method within a trace function
  • Using items that do not yet exist in the Map
2. Wrong
  • Make indirect references outside the trace function
  • An observable that refers to an Observable or a reference to an Observable. This variable is not observable
  • An out-of-bounds access to an array index in a trace function
  • Uses “Observable” without accessing any of its properties
  • Uses properties that do not yet exist in Observable
3. Precautions:
  • If a component is passed an observable, it should also be an Observer to make sure it reacts properly, but if the component comes from an external library, we have no control over it. You can solve this problem by wrapping parameters in an Observer or by leveraging components. example
  • Multiple components pass parameters, and for performance reasons, the later the indirect reference, the better. example