被惊艳到
被Mobx这张简单的函数响应式编程的原理图惊艳到,足够简单,高效,所以决定入门
state才是状态管理的核心,Mobx有句话描述了什么才是真正的响应式,也就是他们正在做的:
Anything that can be derived from the application state, should be derived. Automatically.
下面进入第一课,observable & observer
环境搭建
1 create-react-app
npx create-react-app steps
cd steps && yarn start
2 安装mobx, mobx-react
yarn add mobx mobx-react
yarn add react-app-rewired react-app-rewire-mobx --dev
3 修改配置文件
package.json
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
config-overrides.js
const rewireMobX = require('react-app-rewire-mobx');
/* config-overrides.js */
module.exports = function override(config, env) {
config = rewireMobX(config, env);
return config;
}
4 源码
import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'
@observer class App extends Component {
@observable count = 0
render() {
return (
<div>
Counter: {this.count} <br/>
<button onClick={this.handleDec}>-</button>
<button onClick={this.handleInc}>+</button>
</div>
)
}
handleInc = () => {
this.count++
}
handleDec = () => {
this.count--
}
}
export default App;
5 分割state到store中
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'
const appState = observable({
count: 0
})
appState.increment = function () {
this.count++
}
appState.decrement = function () {
this.count--
}
@observer class App extends Component {
render() {
return (
<div>
Counter: {this.props.store.count} <br/>
<button onClick={this.handleDec}>-</button>
<button onClick={this.handleInc}>+</button>
</div>
)
}
handleInc = () => {
this.props.store.increment()
}
handleDec = () => {
this.props.store.decrement()
}
}
export default App;
ReactDOM.render(<App store={appState}/>, document.getElementById('root'));
registerServiceWorker();
6 去除store
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'
const appState = observable({
count: 0
})
appState.increment = function () {
this.count++
}
appState.decrement = function () {
this.count--
}
@observer class App extends Component {
render() {
return (
<div>
Counter: {appState.count} <br/>
<button onClick={this.handleDec}>-</button>
<button onClick={this.handleInc}>+</button>
</div>
)
}
handleInc = () => {
appState.increment()
}
handleDec = () => {
appState.decrement()
}
}
export default App;
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
observer derived from observable!
注意:要使得装饰器@生效,可以参考下面的文章:
https://mobx.js.org/best/decorators.html
https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx
参考资料:
https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react