在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