我想问下mobx是这样用的吗?我直接越过react组件的props和state了
前段时间用的redux,发现用起来非常麻烦,自己会用了也很难教会别人,昨天看了下mobx,用法如下 先定义一个类似于store的东西
import { observable } from 'mobx'
import { topicListApi } from '../config/api';
class topicStore {
@observable
topic = {
data: [],
page: 1,
tab: ''
}
constructor () {
this.getData()
}
getData = () => {
const { tab, page } = this.topic
topicListApi(page, tab).then((data: any) => {
if (data.success) {
this.topic = {
...this.topic,
data: data.data
}
}
})
}
filter = (tab: string) => {
this.topic.tab = tab
this.getData()
}
flip = (page: number) => {
this.topic.page = page
this.getData()
}
}
export default new topicStore();
然后在react组件内部
import {observer} from 'mobx-react';
import topicStore from '../../mobx/topic'
@observer
class TopicIndex extends React.Component<{}, any> {
render() {
...
{topicStore.topic.data.map((topic: topicObject, index: number) => {
return this.topicTemplate(topic, index)
})}
}
...
我就直接拿来用了,不像redux要绑定props,这样当store里的值发生变化,组件会自动刷,直接绕过react组件的state和props, 我想问下,这是正确用法吗?
6 回复
小/个人项目怎么用都行,大/团队项目加入更多的规范和约束有利于协作和维护。
其实 React 本来在 props 和 state 之外也提供了 context 用于全局传递变量,只是以前官方不提倡使用。现在 context 也重新设计了,可以看看。
这是一种解决方案,也可以通过provider下传store,我们也这么用,十分方便,项目不大也没发现什么特别大的缺陷,建议使用action装饰器
这就是官方提供的正常用法啊。
@jokerapi 好吧,这么说我就放心了,不过我也看到有些用provider
包裹的
@jiyarong 那个是类似redux的用法。我这边的项目不太复杂,也不是很清楚那样用有什么好处。
不复杂的可以这么用,看个人爱好。 来自react native cnode