import {observable} from 'mobx'
let appState = observable({timer: 0
})

import {observer} from 'mobx-react';
@observer
class TimerView extends React.Component {render() {return (<button onClick={this.onReset.bind(this)}>Seconds passed: {this.props.appState.timer}</button>);}onReset () {//appState.resetTimer会在下一节完成this.props.appState.resetTimer();}
};
React.render(<TimerView appState={appState} />, document.body);

appState.resetTimer = action(function reset() {appState.timer = 0;
});
setInterval(action(function tick() {appState.timer += 1;
}), 1000);

const map = observable(asMap({ key: "value"}));
map.set("key", "new value");const list = observable([1, 2, 4]);
list[2] = 3;const person = observable({firstName: "Clive Staples",lastName: "Lewis"
});
person.firstName = "C.S.";const temperature = observable(20);
temperature.set(25);

import {observable} from "mobx";
class OrderLine {@observable price:number = 0;@observable amount:number = 1;constructor(price) {this.price = price;}//这里在下一节会说到@computed get total() {return this.price * this.amount;}
}
const line = new OrderLine();
console.log("price" in line); // true
//hasOwnProperty：判断一个对象是否有你给出名称的属性或对象。需要注意，此方法无法检查该对象的原型链中是否具有该属性
console.log(line.hasOwnProperty("price")); //false

class Foo {@observable length: 2,@computed get squared() {return this.length * this.length;}set squared(value) { //this is automatically an action, no annotation necessarythis.length = Math.sqrt(value);}
}

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));var disposer = autorun(() => console.log(sum.get()));
// prints '6'
numbers.push(4);
// prints '10'

import {observer} from "mobx-react";
var timerData = observable({secondsPassed: 0
});
setInterval(() => {timerData.secondsPassed++;
}, 1000);
@observer class Timer extends React.Component {render() {return (<span>Seconds passed: { this.props.timerData.secondsPassed } </span> )}
});
React.render(<Timer timerData={timerData} />, document.body);

React.render(<Timer timerData={timerData.secondsPassed} />, document.body)

import {observer} from "mobx-react"
import {observable} from "mobx"
@observer class Timer extends React.Component {@observable secondsPassed = 0componentWillMount() {setInterval(() => {this.secondsPassed++}, 1000)}render() {return (<span>Seconds passed: { this.secondsPassed } </span> )}
})
React.render(<Timer />, document.body)

const colors = observable({foreground: '#000',background: '#fff'
});
const App = () =><Provider colors={colors}><app stuff... /></Provider>;
const Button = observer(["colors"], ({ colors, label, onClick }) =><button style={{color: colors.foreground,backgroundColor: colors.background}}onClick={onClick}>{label}<button>
);
// later..
colors.foreground = 'blue';
// all buttons updated

import {observer} from "mobx-react";
@observer class TodoView extends React.Component {componentWillReact() {console.log("I will re-render, since the todo has changed!");}render() {return <div>this.props.todo.title</div>;}
}

action(fn)
action(name, fn)
@action classMethod() {}
@action(name) classMethod () {}
@action boundClassMethod = (args) => { body }
@action(name) boundClassMethod = (args) => { body }
@action.bound classMethod() {}
@action.bound(function() {})@action createRandomContact() {this.pendingRequestCount++;superagent.get('https://randomuser.me/api/').set('Accept', 'application/json').end(action("createRandomContact-callback", (error, results) => {if (error) console.error(error)else {const data = JSON.parse(results.text).results[0];const contact = new Contact(this, data.dob, data.name, data.login.username, data.picture)contact.addTag('random-user');this.contacts.push(contact);this.pendingRequestCount--;}}
))}

@action /*optional*/ updateDocument = async () => {const data = await fetchDataFromUrl();/* required in strict mode to be allowed to update state: */runInAction("update state after fetching data", () => {this.data.replace(data);this.isSaving = true;})
}

class Ticker {@observable this.tick = 0@action.boundincrement() {this.tick++ // 'this' will always be correct}
}
const ticker = new Ticker()
setInterval(ticker.increment, 1000)