MboX-数据结构之Object

在 MboX 里面，对于一个带有 prototype 的 object，MboX 并不会默认把它设置为 observable。因为 MboX 认为这是这个对象的构造函数需要去管理的事情。这里，我们有 2 种方式：
1：在 constructor 里面使用 extendObservable

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 (
      <div>
        {this.props.rectangles.map((item, index)=>
          <div key={item.id}>
            <div>width: {item.width}</div>
            <button onClick = {item.increaseWidth}> + </button>
          </div>
          )
        }
      </div>
    )
  }
}

let rectangles = observable([new Rectangle(0, 0), new Rectangle(10, 10)]);
const rootElement = document.getElementById('root');
ReactDom.render(<RectangleInfo rectangles = {rectangles}/>, 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 (
      <div>
        {this.props.rectangles.map((item, index)=>
                <div key={item.id}>
                    <div>width: {item.width}</div>
                    <button onClick = {item.increaseWidth}> + </button>
                </div>
          )
        }
      </div>
    )
  }
}

let rectangles = observable([new Rectangle(0, 0), new Rectangle(10, 10)]);
const rootElement = document.getElementById('root');
ReactDom.render(<RectangleInfo rectangles = {rectangles}/>, rootElement);

以上就是 2 种处理带 prototype 的对象（也就是在 class），使得对象成为 observable 的方法。