MboX-データ構造のObject

MboXでは、prototypeのあるobjectに対して、MboXはデフォルトではobservableに設定されていません.MboXはこのオブジェクトの構造関数として管理する必要があると考えているからです.ここでは、私たちは2つの方法があります.

import {extendObservable, observable} from 'mobx'
import {observer} from 'mobx-react'
import {Component} from 'react'
import React from 'react'
import ReactDom from 'react-dom'
class Rectangle{
  id = Math.random();
  constructor(width, height){
    extendObservable(this, {
      width: width,
      height: height
    })
  }
  increaseWidth = ()=>{
    this.width ++;
  }
}

 @observer class RectangleInfo extends Component {
  render(){
    return (
      

        {
          this.props.rectangles.map((item, index)=>
          

            
width: {item.width}
             + 
          
          )
        }
      
    )
  }
}

let rectangles = observable([new Rectangle(0, 0), new Rectangle(10, 10)]);
const rootElement = document.getElementById('root');
ReactDom.render(, rootElement);

2:class定義時に@observable/decorateを使う

import {extendObservable, observable} from 'mobx'
import {observer} from 'mobx-react'
import {Component} from 'react'
import React from 'react'
import ReactDom from 'react-dom'
class Rectangle{
  id = Math.random();
  //    extendObservable，    @observable
  @observable width;
  @observable height;
  constructor(width, height){
    this.width = width;
    this.height = height
  }
  increaseWidth = ()=>{
    this.width ++;
  }
}

 @observer class RectangleInfo extends Component {
  render(){
    return (
      

        {
          this.props.rectangles.map((item, index)=>
                

                    
width: {item.width}
                     + 
                
          )
        }
      
    )
  }
}

let rectangles = observable([new Rectangle(0, 0), new Rectangle(10, 10)]);
const rootElement = document.getElementById('root');
ReactDom.render(, rootElement);

以上がプロトタイプの対象となる2つの方法です.