简单理解Mobx(一):使用目的

在项目中遇到了Mobx这个框架,看了几天博客终于理解了一点,因此特写下这篇简单理解Mobx的文章,并不会涉及Mobx比较全面的知识点,只希望也能为后来学习Mobx的人提供一些理解的基础,方便之后的学习。

感谢其他作者写的博客
Mobx使用详解
mobx——rudex的简单替代品

本篇文章将从以下几点来讲解Mobx

  1. 使用目的
  2. 使用方法

使用目的

先抛结论:使用Mobx的目的是更轻松的管理State对象

使用一个框架,最重要的是要时刻牢记使用该框架的目的,只要保持清晰的目标,学习框架就不会思维混乱。

从介绍文字来看,Mobx是一个状态管理工具,这样的说明太笼统了。可以这样简单的介绍:Mobx是一个帮助你更方便的控制State的工具,这样或许好理解一些。

首先我们都知道,在React Native中,State对象是用于控制控件的状态,而且最重要的一点是,当通过setState方法对State对象进行修改时,那使用了该State对象的控件就会重新触发render方法,从而实现刷新的效果。

而问题就在于,直接使用,有时候显得比较麻烦和繁琐,下面举个简单的直接使用State的例子,在该例子中,通过点击按键Button来改变Text的内容。实现很简单,主要分为3个步骤:

  1. 在constructor中设置好State对象
  2. 在Text中使用this.state
  3. 在Button的点击事件中使用this.setState
export default class Test extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data: []
        }
    }
    render() {
        return (
             
                {this.state.data}
                

而使用了Mobx的情况是什么样的呢,其中实现的步骤大致分为4个步骤:

  1. 在一个类如Store中设置了一个会改变的变量,如上面Text的内容data,并加上@observable注解
  2. 在Store当中设置一个改变data的方法,并加上@action注解
  3. 在继承于Component的类上加上@observer注解
  4. 在Component的render()中Text直接使用Store中的observable变量,Button的点击事件中直接使用Store中的action方法
import {observable, action} from 'mobx'

export default class TestStore {
    @observable  
    data = []

    @action
    addData(x) {
        this.data.push(x)
    }
}

//---分割线---
import {observer} from 'mobx-react'

const testStore = new TestStore()

@observer
export default class TestScreen extends Component {
    render() {
        // 获取Store中的变量  
        const data = testStore.data
        return (
            
                {data}
                

从上面的例子中,可以看出使用Mobx的优点:

  1. 逻辑更清晰
    一个控件使用了observable变量A,在其他的方法中通过调用action方法改变A就能够实现刷新的效果
  2. 不同界面控制同一状态
    使用Mobx可以轻松实现在多个界面中控制同一个状态的效果,再也不用考虑State应该怎么传递才能够实时更新,耦合度更低

因此这就是使用Mobx的目的:更好的 管理State来实现控件的刷新效果

下一节我们来看看如何上手使用Mobx

简单理解Mobx(二):使用方法

你可能感兴趣的:(简单理解Mobx(一):使用目的)