MobX入門 TodoList

one more time one more chance. 一歩重頭學前端, MobX入門。

MobX用於簡單、可擴展的狀態管理。一般搭配 React 使用，但不僅限於 React。如何你厭煩了 Redux 繁雜的模板代碼和 API，那麼能夠嘗試下 MobX。網上好像流傳： Redux 是誰用誰加班😂。

狀態管理庫的區別

網上某位大牛的 ppt, 連接有機會再補上。此處的本身爲庫的開發者，別人是指庫的使用者，也就是我等碼農。

1. MobX噁心本身，成全別人
2. Redux成全本身，噁心別人
3. Rxjs噁心本身，也噁心別人

用一句話歸納 MobX: 追蹤你的改變，併爲之作出響應。

開發環境搭建

Step 1: npx create-react-app mobx-todo-list建立項目

Step 2: npm install -S mobx mobx-react安裝 mobx 的相關依賴

Step 3: 使create-react-app 建立的項目支持裝飾器語法

npm run eject
npm install --save-dev babel-plugin-transform-decorators-legacy

Step 4: 修改配置文件package.json

"babel": {
    "plugins": [
        "transform-decorators-legacy"
    ],
    "presets": [
        "react-app"
    ]
}

建立 App 的 store

Mobx 中建立 store 的常見關鍵字以下： observable computed action。
observable用來聲明可觀察的數據、computed是聲明可觀察數據的演變數據，和 observable 具備同等地位，action 用來改變observable數據，可是 action 不是必須的，能夠認爲其是較好的約定，最好遵循。在 mobx 程序中使用class、裝飾器是最佳實踐，所以咱們的代碼也使用裝飾器實現。

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

class Todo {
    // 定義一個 TODO 項目的類，id 是隨機數，沒有使用@observable 裝飾能夠理解爲是隻讀的
    id = Math.random();
    // todo 的 title 及完成狀態 finished 是可被觀察及更新的，同時 finished 的初始狀態爲 false
    @observable title;
    @observable finished = false;
    // 構造函數接收tile
    constructor(title) {
        this.title = title;
    }
}

// TODO List 類
class TodoList {
    // 可被觀察的待辦項 todos
    @observable todos = [];
    // 計算屬性，重可觀察屬性 todos 衍生出來，返回沒有完成的待辦項的個數
    @computed get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length;
    }
    // 動做用來更新 todos 屬性的值，添加待辦項
    @action
    addTodo = title => {
        if (!title) return;
        this.todos.push(new Todo(title));
    }
}

// 咱們建立TodoList 對象，在手動的添加兩個待辦項，此處的 store 對象能夠理解爲是一個單例，在將其引用暴露出去
const store = new TodoList();
store.todos.push(new Todo('Get Coffee'), new Todo('Write blog'));
store.todos[0].finished = true;

export default store;

實現監聽數據的組件

Provider、observer、inject均爲是mobx-react提供。
Provider以組件的形式存在，用來包裹最外層組件節點，而且傳入 store（經過）context 傳遞給後代組件。
使用@observer裝飾的react組件將轉換成一個監聽者，當@observable 修飾的數據變化，react組件就會從新渲染。
@inject爲了使被裝飾的組件以 props 的形式獲取到 Provider 傳遞過來的數據。

import {observer, inject} from 'mobx-react';
const TodoView = ({todo}) => (
    <li>
        <input
            type="checkbox"
            checked={todo.finished}
            // 此處的 onChange 並未遵循 action 的約定，進一步證實了直接更新 store 的數據也是可行的
            onChange={() => {todo.finished = !todo.finished;}}
        />
        {todo.title}
    </li>
)

@inject('todolist')
@observer
export default class TodoListView extends Component {
    state = {
        title: ''
    }
    changeTitle = e => {
        let title = e.target.value;
        this.setState({title});
    }
    // 調用 store 中的 addTodoaction 更新 store 裏面的數據
    submit = () => {
        this.props.todolist.addTodo(this.state.title);
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.title} onChange={this.changeTitle} />
                <button onClick={this.submit}>submit</button>
                <ul>
                    {this.props.todolist.todos.map(todo => (
                        <TodoView todo={todo} key={todo.id} />
                    ))}
                </ul>
                Tasks left: {this.props.todolist.unfinishedTodoCount}
            </div>
        );
    }
}

經過 Provider 將數據傳遞給組件樹

import TodoListView from './TodoListView';
import store from './store';
import {Provider} from 'mobx-react';

export default class App extends Component {
  // 將 store 傳給 Provider
  render() {
    return (
      <Provider todolist={store}>
        <TodoListView />
      </Provider>
    );
  }
};

項目完整代碼mobx-todo-list

Other

Todo list 實現完成，理論講解，逐步更新。歡迎你們批評指正。

前端學習QQ羣: 538631558

【開發環境推薦】 Cloud Studio 是基於瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML五、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，而且支持自定義域名指向，動態計算資源調整，能夠完成各類應用的開發編譯與部署。