Mobx knowledge point collection case (quick start)

One 、 Article reference

1. bilibili React Series of tutorials Mobx
2. mobx Chinese document

Two 、 Knowledge points in series

2.1 Concatenate using annotation

import React, {
     Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import * as serviceWorker from './serviceWorker';
import {
     BrowserRouter } from 'react-router-dom';
import {
     observable, action, autorun, computed, configure, runInAction, when, reaction } from 'mobx';
import {
     observer } from 'mobx-react';
import store from './mobx/AppStore';

configure({
    
  //  Mandatory requirements   modify  observable  The data of , Make sure to put  action  in 
  enforceActions: 'observed',
});

// 1.  initialization  mobx  Container warehouse 
class MyStore {
    
  @observable count = 0;
  name = 'huangbiao';
  @observable foo = 'bar';
  @observable price = 10;
  @action.bound increment() {
    
    this.count++;
  }

  @computed get totalPrice() {
    
    console.log('totalPrice  This uses caching , Not how many times , Just how many times ');
    return this.count * this.price;
  }

  // bound  Express context  this  by   Instance object , You cannot use arrow functions 
  @action.bound change() {
    
    console.log(this);
    this.foo = 'hello';
    this.foo = 'world';
    this.count = 10;
  }

  @action.bound asyncChange () {
    
    setTimeout(() => {
    
      // this.count = 100
      // 1.  Definition  action  function 
      // this.changeCount()
      // 2.  Call directly action 
      // action('changeFoo', () => {
    
      // this.count = 30
      // })()
      // 3. runInAction
      runInAction(() => {
    
        this.count = 40
      })
    }, 200)
  }

  @action.bound changeCount(value = 20) {
    
    this.count = value
  }
}

const mystore = new MyStore();

/** * auto  By default, it will execute once  *  then , When the interior depends on  observable  The execution is triggered again when the data changes  */
autorun(() => {
    
  console.log('autorun: ', mystore.name, mystore.count, mystore.foo);
});

/******************  Modify multiple times observable Will cause multiple executions  autorun  function  ******************** //  If called twice in a row  observable  The data of , be  autorun  It will also be called twice , Low efficiency  // mystore.foo = 'hello' // mystore.foo = 'world' // mystore.count = 10 // 1.  The operation that will be modified many times   In a  action  in  // mystore.change() // 2. runInAction  Create a one-time  action. // runInAction(() => { // mystore.foo = 'hello'; // mystore.foo = 'world'; // mystore.count = 10; // }) */

// const tempChnage = mystore.change
//  The context is no longer  store Object , So you need to use  @action.bound  Guarantee context 
// tempChnage()

/******************  Problems caused by asynchronous triggering  ******************** */
// mystore.asyncChange()

/****************** when ******************** //  When  count > 100  When , Execute custom logic only once  when( () => { return mystore.count > 100 }, () => { console.log('when -> ', mystore.count) } ) mystore.changeCount(200) // when  Meeting the condition only triggers once  mystore.changeCount(300) */

/******************  Problems caused by asynchronous triggering  ******************** */
reaction(
  () => {
    
    return mystore.count
  },
  (data, reaction) => {
    
    console.log('reaction -> ', data)
    //  Manually stop the current  reaction  Listening in 
    if (data > 3) {
    
      reaction.dispose()
    }
  }
)


// 2.  Use in components  mobx  Container state 
@observer
class App extends Component {
    
  render() {
    
    const {
     store } = this.props;
    return (
      <>
        <div>AppMobx</div>
        <div>{
    store.count}</div>
        <div>
          <button onClick={
    store.increment}>increment</button>
        </div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
        <div> The total price ：{
    store.totalPrice}</div>
      </>
    );
  }
}

// 3.  Initiate... In the component  action  Modify the state of the container 
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      {
    /* <App/> */}
      <App store={
    mystore} />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

2.2 Using functions

import {
    observable, autorun, action} from "mobx";

var person = observable({
    
    // observable  attribute :
    name: "John",
    age: 42,
    showAge: false,

    //  Compute properties :
    get labelText() {
    
        return this.showAge ? `${
      this.name} (age: ${
      this.age})` : this.name;
    },

    //  action :
    setAge(age) {
    
      console.log('setAge')
      this.age = age;
    }
}, {
    
    setAge: action
});

// person  It's actually a  proxy  object 
console.log('person', person)

//  Object properties are not exposed  'observe'  Method ,
//  But don't worry , 'mobx.autorun'  More powerful 
autorun(() => {
    
  console.log(person.labelText)
});

person.name = "Dave";
//  Output : 'Dave'
person.showAge = true
person.setAge(21);
//  wait