状态管理最佳实践

JUI使用Mobx作为状态管理，其简单、可扩展的特性结合JUI组件化架构，让复杂的应用状态管理变得简洁和高效。

JUI默认已集成mobx、mobx-react。

1、定义状态并使其可观察

可以用任何你喜欢的数据结构来存储状态，如对象、数组、类。循环数据结构、引用等。只要确保所有会随时间流逝而改变的属性打上 mobx 的标记使它们变得可观察即可。

// store.js

import { observable, action } from 'mobx'

class DemoStep {
  //定义状态并使其可观察
  @observable step = {
    payAccount: '',
    receiverAccount: '',
    receiverName: '',
    amount: '',
  }

  //定义动作更改状态
  @action setStep = (values) => {
    this.step = Object.assign(this.step, values)
  }
}

export default {
  DemoStep: new DemoStep()
}

2、使用Provider传递store给组件

使用 React 的context机制来传递 store 给子组件。

import React, { Fragment, Component } from 'react'

//注入store
import { Provider } from 'mobx-react' 
import store from './store'

export default class demoStore extends Component {
  render() {
    return (
      <Provider {...store}>
        <Fragment>
          ...
        </Fragment>
      </Provider>
    )
  }
}

3、创建视图以响应状态的变化

observer 函数/装饰器可以用来将 React 组件转变成响应式组件。它用 mobx.autorun 包装了组件的 render 函数以确保任何组件渲染中使用的数据变化时都可以强制刷新组件。 observer 是由单独的 mobx-react 包提供的。

import React, { Fragment, Component } from 'react';
import { observer } from 'mobx-react';

@observer class DemoGetStore extends Component {
  render() {
    const { DemoStep } = this.props;
    console.log(DemoStep.step) // 获取状态值
    return (
      <Fragment>
        ...
      </Fragment>
    );
  }
}

export default DemoGetStore

当 observer 需要组合其它装饰器或高阶组件时，请确保 observer 是最深处(第一个应用)的装饰器，否则它可能什么都不做。

4、使用 inject 将组件连接到提供的 stores

相当于Provider 的高阶组件。可以用来从 React 的context中挑选 store 作为 prop 传递给目标组件。

import React, { Fragment, Component } from 'react';
import { observer, inject } from 'mobx-react';

@inject('DemoStep') @observer class DemoGetStore extends Component {
  render() {
    const { DemoStep } = this.props;
    console.log(DemoStep.step) // 获取状态值

    //设置状态值
    DemoStep.setStep({
      payAccount: '',
      receiverAccount: '',
      receiverName: '',
      amount: '',
    })

    return (
      <Fragment>
        ...
      </Fragment>
    );
  }
}

export default DemoGetStore

当 store 中相关数据发生改变时视图会自动更新，以一种最小限度的方式来更新视图。可以节省大量的样板文件，并且有着令人匪夷所思的高效。

# 状态管理最佳实践

状态管理最佳实践