在React项目中使用mobx实现简单的todolist功能

mobx-react 案例

我们来看一个使用 mobx-react 完成简单todolist 的案例。

页面上最终实现的效果：输入内容，点击添加，会将输入的内容添加到下面的列表中，点击 delete，会删除对应的数据。所有的数据都保存在mobx中。

目录结构：

├── index.jsx	//入口文件
├── Home.js		//显示页面内容的组件
├── store.js	//创建一个store，用来管理状态，以及对状态进行操作

index.js 入口文件：

• 从 mobx-react 中解构出 Provider，在最外层标签中包裹 Provider ，并将 store 挂载到上面。
• 子组件中通过使用 inject 注入 store中的数据，通过 this.props.store就可以获取到 store 中的属性和方法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react'
import Home from './Home'
import store from './store'

ReactDOM.render(
	<Provider store={store}>
		<Home></Home>
	</Provider>
  document.getElementById('root')
);

store.js 文件：

• observable 定义需要观察的状态。
• action 标识用来修改状态的操作。

import { observable, action } from 'mobx'

class AppStore {
  @observable todos = ['北京', '上海', '天津']

  @action add(txt) {
    this.todos.push(txt)
  }

  @action del(id) {
    this.todos=this.todos.filter(item=>item!==id)
  }
}
export default new AppStore();

如果你对 mobx 的几个核心概念还不是很了解，可以查看另一篇文章跨组件通信_状态管理之_Mobx入门使用

Home.js 组件：

• 使用@inject(‘store')，将store中的数据注入到组件里。
• @observer是可以用作包裹 React 组件的高阶组件。 在组件的 render 函数中的任何已使用的 observable 发生变化时，组件都会自动重新渲染。
• 在组件中，通过 this.props.store就可以获取到 store 中的属性和方法。

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

@inject('store')
@observer
class Home extends Component {

  state = {txt: ''}

  handleChange = (e) => {
    //修改txt的值
    this.setState({
      txt: e.target.value
    })
  }

  handleClick = () => {
    //调用store中的add方法
    this.props.store.add(this.state.txt)
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleChange} />
        <button onClick={this.handleClick}>添加</button>
        <ul>
          {
            this.props.store.todos.map((item, index) => {
              return <li key={index}>{item} <span onClick={()=>this.props.store.del(item)} >delete</span></li>
            })
          }
        </ul>
      </div>
    )
  }
}
export default Home;

是不是比redux更容易操作，点击下面的链接，可以查看在React项目中如何使用Redux实现计数器功能
https://blog.csdn.net/Charissa2017/article/details/105849224