成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

MobX入門TodoList

csRyan / 3554人閱讀

摘要：用于簡單可擴(kuò)展的狀態(tài)管理，相比有更高的靈活性，文檔參考中文文檔，本文作為入門，介紹一個(gè)簡單的項(xiàng)目。任務(wù)已完成下一個(gè)任務(wù)修復(fù)谷歌瀏覽器頁面顯示問題提交意見反饋代碼創(chuàng)建在中引入主入口文件設(shè)置參考入門學(xué)習(xí)總結(jié)

MobX用于簡單、可擴(kuò)展的React狀態(tài)管理，相比Redux有更高的靈活性，文檔參考：MobX中文文檔，本文作為入門，介紹一個(gè)簡單的TodoList項(xiàng)目。
1. 預(yù)期效果


項(xiàng)目機(jī)構(gòu)：

2. 項(xiàng)目搭建

Step1: npx create-react-app my-app 創(chuàng)建項(xiàng)目;

Step2: npm install mobx mobx-react --save-dev 安裝 mobx 的相關(guān)依賴;

Step3: npm run eject使create-react-app 創(chuàng)建的項(xiàng)目支持裝飾器語法;

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

Step5: 修改package.json文件:

"babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  },
3. 創(chuàng)建TodoListStore

Mobx 中創(chuàng)建 store 的常見關(guān)鍵字如下： 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 "任務(wù)已完成"
        return `下一個(gè)任務(wù)：${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("修復(fù)谷歌瀏覽器頁面顯示問題"), new Todo("提交意見反饋代碼"));
store.todos[1].finished = true;

export default store;
4. 創(chuàng)建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設(shè)置 
    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學(xué)習(xí)總結(jié)

    文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106163.html

    相關(guān)文章

    • React + MobX 入門及實(shí)例（二）

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

      Eidesen 評(píng)論0 收藏0

    • React + MobX 入門及實(shí)例（一）

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

      simon_chen 評(píng)論0 收藏0

    • 通過 React + Mobx 實(shí)現(xiàn)簡單的 TodoList

      摘要：子組件中通過就可以拿到上的數(shù)據(jù)了，實(shí)現(xiàn)了從父組件子組件的數(shù)據(jù)傳遞。當(dāng)前狀態(tài)改變時(shí)要發(fā)生的副作用。通過裝飾器調(diào)用的函數(shù)進(jìn)行使用。理想情況下，大部分組件都應(yīng)該是無狀態(tài)組件，僅通過獲得數(shù)據(jù)。通過調(diào)用中的改變狀態(tài)。 Todo-list 這是一個(gè)用來初步了解如何通過 React + Mobx 構(gòu)建應(yīng)用的 DEMO，通過 Webpack 進(jìn)行打包。技術(shù)棧： React + Mobx + React...

      philadelphia 評(píng)論0 收藏0

    • React+TypeScript+Mobx+AntDesignMobile進(jìn)行移動(dòng)端項(xiàng)目搭建

      摘要：通過裝飾器或者利用時(shí)調(diào)用的函數(shù)來進(jìn)行使用下面代碼中當(dāng)或者發(fā)生變化時(shí)，會(huì)監(jiān)聽數(shù)據(jù)變化確保通過觸發(fā)方法自動(dòng)更新。只能影響正在運(yùn)行的函數(shù)，而無法影響當(dāng)前函數(shù)調(diào)用的異步操作參考官方文檔用法裝飾器函數(shù)遵循中標(biāo)準(zhǔn)的綁定規(guī)則。 前言: 本文基于React+TypeScript+Mobx+AntDesignMobile技術(shù)棧,使用Create-React-App腳手架進(jìn)行一個(gè)移動(dòng)端項(xiàng)目搭建，主要介紹項(xiàng)...

      lindroid 評(píng)論0 收藏0

    • react+mobx+thrift學(xué)習(xí)demo

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

      xcc3641 評(píng)論0 收藏0

    發(fā)表評(píng)論

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <