Mobx编写思路

在react+mobx的应用中，我们要明确两者的职责（以下观点只限于本人，欢迎讨论），react仅作数据渲染，mobx做数据处理。明确的说数据操作的一切任务应交予mobx处理，比如状态管理，业务响应等。数据与视图独立开来编写，开发者可以在业务书写时仅关注于业务，视图编写时仅关注于视图；

 

数据状态接管：

在开发过程我们应该将数据状态管理丢给Mobx也就是上面所说的业务，mobx的核心是数据的订阅与观察，根据业务需求‘声明’订阅对象，并使其在业务组件中可订阅（接下来的任务无需理会，类似与angular双向数据绑定，不同的是react数据props为单向可读不可写，也就是说原有属性实现了getter方法未实现setter方法）；关注点应在于业务事件的处理，利用事件获取数据（观察者观察数据，组件订阅者自动重渲染）。在业务中我们要知道数据编程也就是面向对象编程，明确知道方法属性之间的关系，这样你就可以完完全全地进入编写业务状态，更多的时间都是在考虑业务问题，因为现在所有的行为都基于数据。

 

 

在哪改变数据状态：

我们应该在什么时候改变数据，如何去改变数据成为开发者应该思考的问题，mobx的引入，可以看作是引入一个数据仓库，当我们需要处理数据时我们应该到相应的数据仓库里需求数据源（计算机存储地址），并对其数据进行修改。这样的修改是全局性的静态的（可以理解为全局变量的修改），所以我们在处理数据时，在任意组件任意地点都是可行的。无需指定在哪个模块(不要一味的考虑仅能在生命周期中调用数据方法)

 

组件关注点：

上面我们提到，mobx数据站里面我们仅需编写业务。React组件中我们应该只管里展示与业务方法的触发，数据站提供数据存储地址不会改变，展示数据时我们仅需将数据对象最为组件属性给与即可，同样事件也是如此，事件的触发也就是触发mobx数据站内的方法(无需在生命周期中函数（方法）中再次赋予，记住赋值对于对象来说都是地址的给与，除非能做到深拷贝)

 

案例展示：

class Store {
  @observable isCertificatesInfo = false;// 是否打开五证信息编辑框
  @observable isLoading = false; // 是否启动加载动画
  @observable gytdsyzBeanList = []; // 国有土地使用证

   /**
   * 切换五证信息显示
   */
  @action.bound switchCertificatesInfo = ({ xmbh }) => {
    this.isCertificatesInfo = !this.isCertificatesInfo
    if (this.isCertificatesInfo) {
      this.gytdsyzBeanList = []
      this.isLoading = true
      this.getCertificatesInfo(xmbh)
    }
  }
  /**
 * 获取五证信息
 * @param xmbh 查询数据关键字
 */
@action.bound getCertificatesInfo = async (xmbh) => {
  this.isLoading = true
  try {
    let res = await post(API_PATH.GetCertificatesInfo, { xmbh: xmbh })
    this.isLoading = false
    runInAction(() => {
      const { data: { gytdsyzBeanList}} = res
      this.gytdsyzBeanList = gytdsyzBeanList

    })
  } catch (error) {
    this.isLoading = false
  }
}

export default new Store()

 

视图显示：

1. 控制是否显示相应视图变量为可观察对象，将业务方法以属性的形式传递（也可在子集直接获取）

{/* 显示或者隐藏查看档案--start--*/}
{Store.isCertificatesInfo && <CertificatesInfo setShow={Store.switchCertificatesInfo} />}
{/* 显示或者隐藏查看档案--end--*/}

 

1. 子集组件控制业务执行与否

import GytdsyzBeanList from './view/GytdsyzBeanList'

@inject('store')
@observer
export default class CertificatesInfo extends Component {
  render() {
    // 解构父级传递数据
    const { store:{setShow,gytdsyzBeanList} } = this.props
    return (
      <div className={style.mask} id='certificatesInfo'>
        <div className={style.body}>
          {/* 视图头部--start-- */}
          <h3>
            <span>五证信息</span>
            <Icon type='close' onClick={setShow} style={styleJson.closeStyle} />
          </h3>
          {/* 视图头部--end-- */}
          <div className={style.contant}>
            {/* 基础信息--start-- */}
            {Store.gytdsyzBeanList.length > 0 && <GytdsyzBeanList title='国有土地使用证' list={gytdsyzBeanList} />}

......
            {/* 基础信息--end-- */}
            {/* 表格信息--start-- */}
             ......

            {/* 表格信息--end-- */}
          </div>
          <Button style={styleJson.footBtn} type='primary' onClick={setShow}>关闭</Button>
        </div>
      </div>
    )
  }
}

 

1. 子集显示数据对象（观察者）

export default class GytdsyzBeanList extends Component {
  render() {
    const { title, list } = this.props
    return <Fragment>
      <h4>{title}</h4>
      {
        list.map(({ tdsyqzh, gytdsyqzfzrq, qxh, jd, quhao, qiuhao, mph, qllxmc, ghytmc, zdmj, tdcryt, tdcrjyjje, tdcrmj, tdcrjje, tdcrqsrq, tdcrzzrq }, index) => {
          return <div className={style.rowItem} key={'01' + index}>
            <RowItem num={'01' + index} list={[
              { name: '资质证书编号', value: tdsyqzh },
              { name: '区县', value: qxh },
              { name: '街道 ', value: jd },
              { name: '区号 ', value: quhao },
              { name: '丘号', value: qiuhao },
              { name: '门牌号', value: mph },
              { name: '权利类型', value: qllxmc },
              { name: '土地规划用途', value: ghytmc },
              { name: '土地使用面积(m²)', value: zdmj },
              { name: '土地出让面积(m²)', value: tdcrmj },
              { name: '发证日期', value: gytdsyqzfzrq },
              { name: '土地出让用途', value: tdcryt },
              { name: '土地出让金已缴金额(元)', value: tdcrjyjje },
              { name: '土地出让金金额(元)', value: tdcrjje },
              { name: '土地出让起始日期', value: tdcrqsrq },
              { name: '土地出让终止日期', value: tdcrzzrq }
            ]}
            />
          </div>
        })
      }
    </Fragment>
  }
}

 

 

本示例仅作参考，阅读者可加入自己的理解