前言
最近打算在真实项目中推行一下mobx，所以打算整理一下自己的思想。
于是就有了下面这篇文章。
基于面向对象，使用更直观的方式来管理React的状态(state)。
下面会使用一个简单的例子来说明。
这是存储数据的一个模型
class ActivityList {
// state为实例变量，可参考ruby，java
// 活动列表的数据存在data数组里，分页信息在meta里
state = {
meta: {},
data:[]
}
// 请求后端Api的方法
fetchActivities() {
const response = cfetch('/activities')
// 在这里我们已经获取了Api返回的数据
}
}
通过fetchActivities，我们已经拿到服务器返回的数据了。现在我们该怎么去把数据存储到react中，并引起view的更新呢？
-
如果上面这个类是一个ReactComponent，那么我们可以这样去更新数据。
fetchActivities() { const response = cfetch('/activities') this.setState({ state: response.jsonResult })
}
```
不过在react组件里，state只能传给子组件，不利于复用。
而且组件被拆除的话数据也会消失。
-
通过redux的话我们可以把数据存到一个可共用的store中，便于复用和管理。
// 因为redux是基于函数式的，所以不能使用上面的面向对象模型。 // 这里简单的说明一下redux // 我们先定义一个reducer const state = { meta: {}, data:[] } function activityList(state = state, action) { //..... return newState } // reducer是一个纯函数，它会传入当前的state，然后你把一个新的state返回给它， // 它就会去更新数据和view
虽然reducer是一个函数，但我们并不能直接去使用它，它由redux自身来调用，我们只能通过指派的形式去触发reducer。
// 之后我们需要建立一个action，通过dispatch来触发reducer
function fetchActivities() {
const response = cfetch('/activities')
store.dispatch({
payload: response
})
}
-
通过1，2的方法我们了解到在react项目中更新state是怎么做的。现在我们回到主题
使用更直观的方式来管理React的状态
而最直观的方法莫过于这样
fetchActivities() { const response = cfetch('/activities') this.state = response.jsonResult
}
看起来是不是有点不可思议，因为这种做法只是改变了变量的值，但在react中我们不仅要改变state，而且还需要让它更新到view。只是赋值的话是不可能引起view的变化的。
但是es5，就有一种特性可以延伸赋值行为的功能
Object.defineProperty(this, 'state', {
get() {
return this._state
},
set(state) {
this._state = state
// 在这里更新view
}
})
//这样子的话在this.state = response.jsonResult 时候所发生的再不只是单纯赋值
4. 现在我们看看怎么使用Mobx去管理状态
import { observable } from ''mobx"
import { observer } from "mobx-react"
// 还是这个类
class ActivityList {
// state为实例变量，可参考ruby，java
// 活动列表的数据存在data数组里，分页信息在meta里
// observable是一个装饰器，可以参考python，java的语法。
// 这个装饰器把state添加get和set访问器属性
@observable state = {
meta: {},
data:[]
}
fetchActivities() {
const response = cfetch('/activities')
this.state = response.jsonResult
}
}
const activityList = new ActivityList()
// 这是一个react组件
@observer
class ActivitiesPage extends Component {
componentDidMount () {
activityList.fetchActivities()
}
render () {
<ul>
{activityList.state.data.map(v => <li>{v.id}</li>)}
</ul>
}
}
##### 通过这两个装饰器，我们就可以很简单去管理react的数据。
##### 想知道更多的关于mobx的概念，可点击 https://suprise.gitbooks.io/mobx-cn/content/intro/overview.html