简说_mobx

mobx— 5.x

初始化

mobx --5.15.7
mobx-react — 5.4.4

create-react-app mobx-study

• 安装改变 create-react-app 中 webpack 配置插件

yarn add -D react-app-rewired customize-cra @babel/plugin-proposal-decorators

• 在项目根目录下创建 config-overrides.js 并写入以下内容

const { override, addDecoratorsLegacy } = require('customize-cra')

module.exports = override(addDecoratorsLegacy())

• 修改 package.json 文件中 scripts 脚本

  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}

• 启动

yarn start

• 可能报错，则先执行以下

yarn add react-app-rewired customize-cra

将 mobx 与 react 相结合

yarn add mobx mobx-react

计算属性

1-步骤

1-关注  @observable 属性=值  //数字、字符串、布尔值、对象、Map。。。
2-触发 autorun(()=>{ 观测的属性变了，相关的执行语句})
const store = new Store()
  autorun(() => {
  console.log('>>>num', store.num) //只有num变了才触发 ，其他变了不触发（name）
})
autorun(() => {
  console.log('>>>>name', store.name)//只有name变了才触发 ，其他变了不触发（num）
})

action

import { observable, action, computed, autorun, runInAction } from 'mobx'

//同步
@action.bound add(){
  this.num++
}
//异步

@action.bound asyncFn(){
  setTimeout(()=>{
    //方案一
    //使用其他的action进行修改
    this.add()
    //方案二-直接调用action函数
    action('changeFn',()=>{
    this.num++
  })()
    //方案三
      runInAction(() => {
        this.num++
      })

  },1000)
}

const store = new Store()
autorun(() => {
  console.log('>>>num', store.num)
})
autorun(() => {
  console.log('>>>>name', store.name)
})
autorun(() => {
  console.log('store', store)
})

reaction(
  //当条件满足，只会执行,可以执行多次
  () => {
    return store.num //return 给后面的函数使用
  },
  (data, reaction) => {
    // ---- data 就是第一个函数的 return
    console.log('reaction>>', data)
    //停止reaction的监听，以后的reaction将不再进行监听
    reaction.dispose()
  }
)
when(
  //当条件满足，只会执行一次
  () => {
    return store.num > 3
  },
  () => {
    console.log('when>>>', store.num)
    store.change('lss')
  }
)

将mobx与react结合

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Provider } from 'mobx-react'
import RootStore from './store'

ReactDOM.render(
  <React.StrictMode>
    <Provider { ... new RootStore() }> //这一行
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

//在文件中使用
import React from 'react'
import { inject, observer } from 'mobx-react'

@inject('Car')
@observer
class Car extends React.Component {
   //会将所有的Car_store相关的数据放入props中，打印props即可知道
}

mobx—6.x

• “mobx”: “^6.3.2”,
• “mobx-react”: “^7.2.0”,
• 语法与5.x基本一样
• 不同点在于以下

import { observable, action, makeObservable, computed, runInAction } from 'mobx'
import Axios from 'axios'

class Car {
  constructor(rootStore) {
    makeObservable(this)    //不同点在于 多这一行 ， 不然会造成 数据变了，页面不刷新
    this.rootStore = rootStore
  }
  @observable state = {
    name: 'zs',
    age: 20,
    goodsList: [],
  }

  @action.bound changeAge() {
    this.state.age++
  }
  @action.bound changeState(val) {
    this.state.name = val
  }
  @computed get nextAge() {
    return this.state.age + 1
  }
  @action.bound async getGoods(url) {
    const res = await Axios.get(url) //异步请求
    // this.state.goodsList = res.data.message.goods //非严格模式可修改state ，严格模式下会报错
    // action('fn',()=>{ //修改state
    //   this.state.goodsList = res.data.message.goods
    // })()
    runInAction(()=>{ //修改state
      console.log(123);
      this.state.goodsList = res.data.message.goods
    })
  }
}
export default Car