React + mobx简单demo

原创 2018年04月17日 21:46:17

日结博客 17.4.18 HangZhou

React + Mobx

对于各种spa页面或者各种前端页面的话,不拿一个状态管理工具如何完美地实现你的项目逻辑控制呢

困扰于Redux的繁琐,mobx便横空出世了,为了简单你的状态管理而生

做到完美状态管理,你只需要以下几步

关于装饰器的编译,请看我另一篇博客:React + 装饰器


  1. 安装 mobx mobx-react

    
    npm install mobx --save
    npm install mobx-react --save
  2. 写一个store文件

    observable: 观察对应的数据

    
    import { observable } from "mobx";
    class TodoList {
       // 利用
      @observable todos = [] 
    }
    
    export default new TodoList()
  3. 在对应的页面添加引用

    index页面

    
    import TodoList from './store/TodoList'
    
    <App todoList ={TodoList}>

    app页面

    
    
    export default App {
      render() {
        <div>todoList的lenth是{this.props.todoList.length}</div>
      }
    }

    到这里为止你就能拿到store的数据了,超级简单!

  4. 页面跟着store的数据改变发生改变

    app.js页面添加观察

    
    import { observable }  from 'mobx-react'
    @observable // 给这个页面添加observable装饰器
    export default App {
      render() {
        <div>todoList的lenth是{this.props.todoList.length}</div>
      }
    }

    添加了observable的页面会根据注入的数据发生改变而重新渲染

  5. Action

    这里我们给todoList添加一个事件

    
    import { observable, action } from "mobx";
    class TodoList {
       // 利用
      @observable todos = [] 
      @action push() {
          this.todos.push({
              id: 1,
              name: 'new Task'
          })
      }
    }
    
    export default new TodoList()

    我们在app添加一个btn

    
    <button onClick={() => this.props.todoList.push}>点我添</button>

    点击按钮的时候,我们可以对应看到文本的长度在发生改变

  6. computeds

    计算一些对应的属性或数值

    给todoList添一些料

    
    import { observable, action, computed } from "mobx";
    class TodoList {
       // 利用
      @observable todos = [] 
      @action push() {
          this.todos.push({
              id: 1,
              name: 'new Task'
          })
      }
      @computed get allIdCount() {
          return this.todos.reduce(init, item => {
              return init+item.id
          }, 0)
      }
    }
    
    export default new TodoList()
  7. 在app添加一个显示

    
    <div>目前todoList的id总和是:{this.props.todoList.allIdCount}</div>

    我们可以看到,随着你每次的变化,文件都发生了改变

最基本的就到这里了,更多的乐趣希望大家各自探索

献上mobx-demo地址,欢迎Star mobx-demo

喜欢就点个赞吧。谢谢你~

:D

React+mobx入门教程

React和mobx的这种合作很原始,就像是一个孩子刚学会咀嚼,还不会评价味道。...
  • shuzipai
  • shuzipai
  • 2017-05-26 18:34:47
  • 5072

MOBX的入门案例

直接上代码demo主要把握几个词observable和observer /** * @author:水痕 * @time:2017-03-20 11:36 * @email:332904234@...
  • kuangshp128
  • kuangshp128
  • 2017-03-20 16:53:40
  • 1098

React Notes React笔记

  • 2017年11月12日 13:17
  • 9.01MB
  • 下载

React Native使用Mobx总结

参考博客: http://www.jianshu.com/p/505d9d9fe36a    这是我看的学习Mobx目前为止觉得最详细学习的博客了. 下面只是记录下我的学习和一些简单的使用: 需...
  • jiangfei009003
  • jiangfei009003
  • 2017-08-08 17:13:21
  • 1687

mobx 在ReactJS项目中的运用

mobx 能干什么使用 react 写小型应用,数据、业务逻辑和视图的模块划分不是很细是没有问题的。在这个阶段,引入任何状态管理库,都算是奢侈的。但是随着页面逻辑的复杂度提升,在中大型应用中,数据、业...
  • u012125579
  • u012125579
  • 2017-04-06 18:17:54
  • 4071

使用 MobX 开发 React Native 应用

本文将 MobX 与 React Native 结合,编写一个简单的列表客户端。这是学习使用 MobX 和 React Native 的一个不错的起点。 查看最终的代码库,点击这里。 ...
  • jiangfei009003
  • jiangfei009003
  • 2017-06-26 21:52:50
  • 3431

一起学react native(5) mobx配合FlatList实现高性能im聊天界面

前言啥都不说了 先上效果图效果1效果2项目地址:https://github.com/fangkyi02/Demo代码就不写了 直接看项目吧 下次有空再补上...
  • fangkyi02
  • fangkyi02
  • 2017-04-23 15:33:20
  • 1971

MobX —— 10分钟极速入门 MobX 与 React

MobX 是一个简单、方便扩展、久经考验的状态管理解决方案。这个教程旨在十分钟内向你介绍 MobX 的一些重要概念。MobX 是一个独立的苦,不过大多数人都把它和 React 一起使用,所以本教程也就...
  • changsimeng
  • changsimeng
  • 2017-03-30 18:14:20
  • 1118

React Mobx使用基础

React Mobx使用基础讲解
  • YQXLLWY
  • YQXLLWY
  • 2017-10-30 10:30:07
  • 689

用React+Mobx到底该不该写一个CheckBox组件

从接触React到现在有几个月了,对React的理解也在不断的加深。 最开始还是在拿React当工具用,嗯,就是比模板引擎牛逼点的工具。 后来觉得React在颠覆,颠覆自己对html的认识,或者说我更...
  • shuzipai
  • shuzipai
  • 2017-11-06 15:36:06
  • 408
收藏助手
不良信息举报
您举报文章:React + mobx简单demo
举报原因:
原因补充:

(最多只允许输入30个字)