MobX入门TodoList

csRyan 发布于2019-08-26 10:26 / 3397人阅读

摘要：用于简单可扩展的状态管理，相比有更高的灵活性，文档参考中文文档，本文作为入门，介绍一个简单的项目。任务已完成下一个任务修复谷歌浏览器页面显示问题提交意见反馈代码创建在中引入主入口文件设置参考入门学习总结

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学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106163.html

React + MobX 入门及实例（二）

摘要：在上一章入门及实例一应用实例的基础上增加优化界面增加后台框架，操作。删除选中项时，一定要在删除成功后将置空，否则在下次选择时会选中已删除的项，虽然没有元素但可能会影响其他一些操作。中设置跨域访问实际是对进行匹配。在上一章 React + MobX 入门及实例（一）应用实例TodoList的基础上增加ant-design优化界面增加后台express框架，mongoose操作。...

Eidesen 2019-08-22 11:15 评论0 收藏0
React + MobX 入门及实例（一）

摘要：前言现在最热门的前端框架，毫无疑问是。对于小型应用，引入状态管理库是奢侈的。但对于复杂的中大型应用，引入状态管理库是必要的。现在热门的状态管理解决方案，相继进入开发者的视野。获得计算得到的新并返回。前言现在最热门的前端框架，毫无疑问是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