MobX入門TodoList

csRyan 發布于2019-08-26 10:26 / 3543人閱讀

摘要：用于簡單可擴展的狀態管理，相比有更高的靈活性，文檔參考中文文檔，本文作為入門，介紹一個簡單的項目。任務已完成下一個任務修復谷歌瀏覽器頁面顯示問題提交意見反饋代碼創建在中引入主入口文件設置參考入門學習總結

MobX用于簡單、可擴展的React狀態管理，相比Redux有更高的靈活性，文檔參考：MobX中文文檔，本文作為入門，介紹一個簡單的TodoList項目。

1. 預期效果

項目機構：

2. 項目搭建

Step1: npx create-react-app my-app 創建項目;

Step2: npm install mobx mobx-react --save-dev 安裝 mobx 的相關依賴;

Step3: npm run eject使create-react-app 創建的項目支持裝飾器語法;

Step4: npm install @babel/plugin-proposal-decorators --save-dev安裝裝飾器

Step5: 修改package.json文件:

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },

3. 創建TodoListStore

Mobx 中創建 store 的常見關鍵字如下： observable, computed, action。

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

class Todo {
    id = Math.random();
    @observable title;
    @observable finished = false;

    constructor(title) {
        this.title = title
    }
}

class TodoList {
    @observable todos = [];

    @computed get completedTodosCount() {
        return this.todos.filter(todo => todo.finished).length;
    }

    @computed get report() {
        if (this.todos.length === 0) 
            return "任務已完成"
        return `下一個任務：${this.todos[0].title}`
    }

    @action addTodo (title) {
        if (!title) return;
        this.todos.push(new Todo(title));
    }
}
const store = new TodoList();
store.todos.push(new Todo("修復谷歌瀏覽器頁面顯示問題"), new Todo("提交意見反饋代碼"));
store.todos[1].finished = true;

export default store;

4. 創建TodoListView

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

const TodoView = ({todo}) => (
    
         {todo.finished = !todo.finished;}} 
        />
        {todo.title}
    
)
@inject("TodoListStore")

@observer
class TodoListView extends Component {
    constructor(props) {
      super(props);
      this.state = {
          title: ""
      }
    }

  changeTitle = e => {
      let title = e.target.value;
      this.setState({title});
  }

  submit = () => {
      this.props.TodoListStore.addTodo(this.state.title);
  }

  render() {
      return (
          
              
        
        
            {this.props.TodoListStore.todos.map(todo => (
                
            ))}
        
        Tasks finished: {this.props.TodoListStore.completedTodosCount}
          
      );
  }
}
export default TodoListView

5. 在App.js中引入TodoListView

import React, { Component } from "react";
import "./App.css";
import TodoListStore from "./components/todolist/store/TodoListStore";
import TodoListView from "./components/todolist/index";
import { Provider } from "mobx-react";

export default class App extends Component {

  render() {
    return (
      
        
      
    )
  }
}

6. 主入口文件src/index.js設置

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

參考：

MobX入門 TodoList

mobx學習總結

GPU云服務器云服務器 TodoList Mobx 入門代碼入門過程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106163.html

React + MobX 入門及實例（二）

摘要：在上一章入門及實例一應用實例的基礎上增加優化界面增加后臺框架，操作。刪除選中項時，一定要在刪除成功后將置空，否則在下次選擇時會選中已刪除的項，雖然沒有元素但可能會影響其他一些操作。中設置跨域訪問實際是對進行匹配。在上一章 React + MobX 入門及實例（一）應用實例TodoList的基礎上增加ant-design優化界面增加后臺express框架，mongoose操作。...

Eidesen 2019-08-22 11:15 評論0 收藏0
React + MobX 入門及實例（一）

摘要：前言現在最熱門的前端框架，毫無疑問是。對于小型應用，引入狀態管理庫是奢侈的。但對于復雜的中大型應用，引入狀態管理庫是必要的?，F在熱門的狀態管理解決方案，相繼進入開發者的視野。獲得計算得到的新并返回。前言現在最熱門的前端框架，毫無疑問是React。 React是一個狀態機，由開始的初始狀態，通過與用戶的互動，導致狀態變化，從而重新渲染UI。對于小型應用，引入狀態管理庫是奢侈的。但...

simon_chen 2019-08-21 17:56 評論0 收藏0
通過 React + Mobx 實現簡單的 TodoList

摘要：子組件中通過就可以拿到上的數據了，實現了從父組件子組件的數據傳遞。當前狀態改變時要發生的副作用。通過裝飾器調用的函數進行使用。理想情況下，大部分組件都應該是無狀態組件，僅通過獲得數據。通過調用中的改變狀態。 Todo-list 這是一個用來初步了解如何通過 React + Mobx 構建應用的 DEMO，通過 Webpack 進行打包。技術棧： React + Mobx + React...

philadelphia 2019-08-20 16:48 評論0 收藏0
React+TypeScript+Mobx+AntDesignMobile進行移動端項目搭建

摘要：通過裝飾器或者利用時調用的函數來進行使用下面代碼中當或者發生變化時，會監聽數據變化確保通過觸發方法自動更新。只能影響正在運行的函數，而無法影響當前函數調用的異步操作參考官方文檔用法裝飾器函數遵循中標準的綁定規則。前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術棧,使用Create-React-App腳手架進行一個移動端項目搭建，主要介紹項...

lindroid 2019-08-23 18:24 評論0 收藏0
react+mobx+thrift學習demo

摘要：安裝等相關依賴。通過啟動項目，進行后續操作。自定義執行狀態的改變。任何不在使用狀態的計算值將不會更新，直到需要它進行副作用操作時。強烈建議始終拋出錯誤，以便保留原始堆棧跟蹤。 2018-08-14 learning about work begin：2018-08-13 step 1 熟悉react 寫法 step 2 mobx 了解&使用 step 3 thrift接口調用過程 Re...

xcc3641 2019-08-23 11:44 評論0 收藏0