我想问下mobx是这样用的吗?我直接越过react组件的props和state了
发布于 4 年前 作者 jiyarong 3454 次浏览 来自 问答

前段时间用的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

回到顶部