erming-ai/react-mobx-demo

mobx,react，antd做的todolist，简易教程，欢迎star

mobx是很好，很容易理解的状态管理工具

先讲一下这个案例是做TODOlist的案例，利用antd样式，用mobx做的状态管理

具体效果如下

项目案例源码： https://github.com/xiaqijian/react-mobx-demo

1.初始化项目

第一步用create-react-app初始化一个项目，并打开webpack配置项

npx create-react-app react-mobx-demo

cd react-mobx-demo

npm run eject

2.配置支持修饰符

目前初始化的项目是不支持修饰符的，安装相关依赖

cnpm install --save-dev @babel/plugin-proposal-decorators
cnpm install --save-dev @babel/plugin-proposal-class-properties

上面安装好之后，找到项目中package.json文件修改如下

.....
"babel": {
   // 新增
    "plugins": [
       [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      [
        "@babel/plugin-proposal-class-properties",
        {
          "loose": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },

找到babel添加plugins就可以了’

3.安装antd和mobx

这一步没有什么特别，安装就行

yarn add antd
yarn add mobx
yarn add mobx-react

4.修改src目录下面的文件

新建todolist.js, mobx。。。

最终目录如下

下面贴代码

mobx/index.js代码

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

class Store {
  @observable Inputvalue = ''
  @observable listdata = [
    '2222223344',
    '2222223344',
    '2222223344',
    '2222223344',
    '2222223344'
  ]
  @action
  changeInput (value) {
     this.Inputvalue = value
    //  console.log(value)
  }

  @computed
  get todolen () {
    return this.listdata.length
  }


  @action
  addTodo () {
    this.listdata = [this.Inputvalue].concat(this.listdata)
    // let arr = this.listdata
    // this.listdata = arr.unshift(this.Inputvalue)
    this.Inputvalue = ""
    console.log(this.Inputvalue)
  }
  @action
  deletodo (index) {
    this.listdata.splice(index,1)
  }
}

export default new Store()

Todolist.js代码

import React, { useEffect} from 'react'
import { Button, Input, List} from 'antd'
import { inject, observer} from 'mobx-react'

// const data = [
//   '22222',
//   '22222',
//   '22222',
//   '22222',
//   '22222'
// ]



const Todolist = inject("store")(observer(({ store}) => {
  useEffect(()=>{
    console.log(store)
  })
  return (
    <div style={{ padding: '10px' }}>
      <div>
        <Input
          onChange={(e)=> { store.changeInput(e.target.value)}}
          style={{ width: '500px', marginRight: '10px' }}
          value={store.Inputvalue}
          placeholder="输入内容"
        />
        <Button type="primary" onClick={() => { store.addTodo()}}>添加</Button>
      </div>
      <i>一共有{store.todolen}条</i>
      <div style={{ width: '500px', marginTop: '10px' }}>
        <List
          dataSource={store.listdata}
          bordered
          renderItem={(item, index) => (
            <List.Item
              actions={[<div onClick={()=> { store.deletodo(index)}}>删除</div>]}
            >{item}</List.Item>
          )}
        />
      </div>
    </div>
  )
}))




export default Todolist

其他文件的代码具体去GitHub上看地址： https://github.com/xiaqijian/react-mobx-demo

5.mobx如何使用

大白话意思就是这样子的：

mobx中有个observable方法是监听变量的 mobx中有个action是修改observable中的变量的 mobx中有个observer是讲监听变量变化，告诉给视图

具体更加详细的内容，看mobx文档