亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

MobX入門TodoList

csRyan / 3591人閱讀

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

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


項目機構(gòu)：

2. 項目搭建

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

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

Step3: npm run eject使create-react-app 創(chuà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 `下一個任務(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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106163.html

    相關(guān)文章

    • React + MobX 入門及實例（二）

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

      Eidesen 評論0 收藏0

    • React + MobX 入門及實例（一）

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

      simon_chen 評論0 收藏0

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

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

      philadelphia 評論0 收藏0

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

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

      lindroid 評論0 收藏0

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

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

      xcc3641 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <