React - mobx

项目搭建

mbox使用步骤

初始化 mobx 容器仓库

index.js

// 使用 mobx 6 更新数据后，数据有变动，但不会自动进行更新则需要加 ··makeObservable··
import {observable, action, makeObservable} from 'mobx'

class Store·
 constructor () {
   makeObservable(this)
 }
 @observable count = 0
 @action.bound increment () {
   this.count ++
 }
}

在组件中使用 mobx 容器状态

在组件是发起 action 修改容器状态

import {inject, observer, Provider} from 'mobx-react'

@inject('store')
@observer
class CountIndex extends React.Component {
 constructor (props) {
   super(props)
 }
 render () {
   const { store } = this.props
   return (
     <div>
       <p>{store.count}</p>
       <button onClick={store.increment}>+</button>
     </div>
   )
 }
}

使用 mobx-react 与 react 关联

<Provider store={new Store()}><CountIndex /></Provider>