React + MobX 入门及实例（一）

simon_chen 发布于2019-08-21 17:56 / 2974人阅读

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

前言

现在最热门的前端框架，毫无疑问是React。

React是一个状态机，由开始的初始状态，通过与用户的互动，导致状态变化，从而重新渲染UI。

对于小型应用，引入状态管理库是"奢侈的"。

但对于复杂的中大型应用，引入状态管理库是"必要的"。

现在热门的状态管理解决方案Redux，MobX相继进入开发者的视野。

Redux、MobX哪一个更适合你的项目？

在react项目中使用redux or mobx？

正如爱因斯坦所说的 “ 让一切事物尽可能的简单，但不要简单”。

尽管让我们来填一填 MobX 的坑。

介绍 1.入门

对于应用开发中的常见问题，React 和 MobX都提供了最优和独特的解决方案。React 提供了优化UI渲染的机制，这种机制就是通过使用虚拟DOM来减少昂贵的DOM变化的数量。MobX 提供了优化应用状态与 React 组件同步的机制，这种机制就是使用响应式虚拟依赖状态图表，它只有在真正需要的时候才更新并且永远保持是最新的。

2.安装

npm install --save mobx mobx-react

3.核心概念

1.state(状态)
状态是驱动应用的数据。

2.observable(value) && @observable
Observable 值可以是JS基本数据类型、引用类型、普通对象、类实例、数组和映射。其修饰的state会暴露出来供观察者使用。

const map = observable.map({ key: "value"});
map.set("key", "new value");

const list = observable([1, 2, 4]);
list[2] = 3;

const person = observable({
    firstName: "Clive Staples",
    lastName: "Lewis"
});
person.firstName = "C.S.";

const temperature = observable(20);
temperature.set(25);

3.observer(观察者)
被observer修饰的组件，将会根据组件内使用到的被observable修饰的state的变化而自动重新渲染

import {observer} from "mobx-react";

var timerData = observable({
    secondsPassed: 0
});

setInterval(() => {
    timerData.secondsPassed++;
}, 1000);

@observer class Timer extends React.Component {
    render() {
        return (Seconds passed: { this.props.timerData.secondsPassed }  )
    }
};

React.render(, document.body);

4.action(动作)
只有在 actions 中，才可以修改 Mobx 中 state 的值。
注意：当你使用装饰器模式时，@action 中的 this 没有绑定在当前这个实例上，要用过 @action.bound 来绑定使得 this 绑定在实例对象上。

@action.bound setName () {
  this.myName = "HUnter"
}

actions ------> state ------> view

5.computed
计算值(computed values)是可以根据现有的状态或其它计算值衍生出的值。
getter：获得计算得到的新state并返回。
setter：不能用来直接改变计算属性的值，但是它们可以用来作“逆向”衍生。

class Foo {
    @observable length = 2;
    @computed get squared() {
        return this.length * this.length;
    }
    set squared(value) { // 这是一个自动的动作，不需要注解
        this.length = Math.sqrt(value);
    }
}

6.autorun
这通常是当你需要从反应式代码桥接到命令式代码的情况，例如打印日志、持久化或者更新UI的代码。

var numbers = observable([1,2,3]);
var sum = computed(() => numbers.reduce((a, b) => a + b, 0));

var disposer = autorun(() => console.log(sum.get()));
// 输出 "6"
numbers.push(4);
// 输出 "10"

disposer();
numbers.push(5);
// 不会再输出任何值。`sum` 不会再重新计算。

经验法则：如果你有一个函数应该自动运行，但不会产生一个新的值，请使用autorun。其余情况都应该使用 computed。

7.reactions
Reactions 和计算值很像，但它不是产生一个新的值，而是会产生一些副作用，比如打印到控制台、网络请求、递增地更新 React 组件树以修补DOM、等等。简而言之，reactions 在响应式编程和命令式编程之间建立沟通的桥梁。

4.应用实例

1.TodoList

技术栈：react + react-router(v4)+mobx+webpack

效果图：

很简单的一个小demo，这里不分析了，源码里有部分注释帮助理解。
github地址：https://github.com/zhaoyu69/m...

GPU云服务器云服务器 database详解及实例阿里云云计算及云服务器入门 Mobx python入门实例

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

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

React + MobX 入门及实例（二）

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

Eidesen 2019-08-22 11:15 评论0 收藏0
Mobx4.X状态管理入门

摘要：前言原本说接下来会专注学但是最新工作又学习了一些有意思的库於是就再写下来做个简单的入门之前我写过一篇文章这个也算是作為一个补充吧这次无非就是类似笔记把认为的一些关键点记下来有些地方还没用到就衹是描述一下代码有些自己写的有些文档写的很好就搬下前言原本说接下来会专注学nodejs,但是最新工作又学习了一些有意思的库,於是就再写下来做个简单的入门,之前我写过一篇文章,这个也算是作為一个补...

CKJOKER 2019-08-26 10:36 评论0 收藏0
MobX入门TodoList

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

csRyan 2019-08-26 10:26 评论0 收藏0
前端进阶资源整理

摘要：前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦，看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始，在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

BlackMass 2019-08-23 12:36 评论0 收藏0
利用Dawn工程化工具实践MobX数据流管理方案

摘要：新的项目目录设计如下放置静态文件业务组件入口文件数据模型定义数据定义工具函数其中数据流实践的核心概念就是数据模型和数据储存。最后再吃我一发安利是阿里云业务运营事业部前端团队开源的前端构建和工程化工具。本文首发于阿里云前端dawn团队专栏。项目在最初应用 MobX 时，对较为复杂的多人协作项目的数据流管理方案没有一个优雅的解决方案，通过对MobX官方文档中针对大型可维护项目最佳实践的...

0x584a 2019-08-21 17:19 评论0 收藏0