More Related Content Similar to React + mobx分享(黄英杰) (20) React + mobx分享(黄英杰)15. Create observer View
import { observer } from ‘mobx-react';
@observer
class CountView extends React.Component {
render() {
const { store } = this.props;
return (<button>{store.count}</button>);
}
}
React.render(<CountView store={store} />,
document.body);
16. Modify State
….
class CountView extends React.Component {
onClick = () => this.props.store.count +=1
render() {
…
return (<button
onClick={this.onClick}>{store.count}</button>);
}
}
18. Mobx vs Redux
• Define your state and make it
observable
• Create a view that responds to changes
in the State
• Modify the State
31. • What is MobX ?
https://jsfiddle.net/huangyingjie1111/r41g4f3k/
• What does @observer do ?
https://jsfiddle.net/huangyingjie1111/egu3j7v0/2/
35. import { autorun } from ‘mobx';
@observer
export default class App extends Component {
componentDidMount() {
autorun(this.loadMessage);
}
loadMessage = () => {…}
…
}