mobx用于react简易教程todolist

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 文档

首发于公众号：node 前端