React + MobX 快速上手1

简介: React + MobX 快速上手

一、Mobx机制介绍:

Mobx 是简单、可扩展的状态管理,当应用状态更新时,任何源自应用状态的东西都将自动地获得。React 和 MobX 是一对强力组合。React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。而 MobX 提供机制来存储和更新应用状态供 React 使用。

Mobx 中文文档

Mobx 英文文档

Mobx 的运行机制如下图:

首先从左往右看,事件触发了 Actions,Actions 作为唯一修改 State 的方式,修改了 State,State 的修改更新了计算值 Computed,计算值的改变引起了 Reactions 的改变,导致了 UI 的改变,Reactions 可以经过事件调用 Actions。

二、开发环境

安装 mobx 和 React 绑定库 mobx-react:

npm install mobx mobx-react --save

要启用 ESNext 的装饰器 (可选), 参见下面:

安装修饰符修饰器插件

// 修饰符的插件
npm install --save-dev babel-plugin-transform-decorators-legacy
// 装饰器的一个插件
npm install @babel/plugin-proposal-decorators

配置babelrc文件,在根目录创建一个.babelrc文件(存在.babelrc文件的直接进行配置), 输入以下内容:

{
    "plugins":[
        [
          "@babel/plugin-proposal-decorators",
          {
              "legacy":true
          }
        ],
        [
          "@babel/plugin-proposal-class-properties",
          {
              "loose":true
          }
          ]
          ],
    "presets":[
        "react-app"
        ]
}



相关文章
|
4月前
|
前端开发 JavaScript
使用 MobX 优化 React 代码
使用 MobX 优化 React 代码
34 0
|
8月前
|
缓存 前端开发 API
React + MobX 快速上手2
React + MobX 快速上手
|
4月前
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
29 0
|
10月前
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
59 0
|
11月前
|
运维 前端开发
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
88 0
|
JavaScript 前端开发 开发工具
React中的状态管理---Mobx
React中的状态管理---Mobx
131 0
React中的状态管理---Mobx
|
缓存 前端开发 JavaScript
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之mobx
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之mobx
|
前端开发 API
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之recoil
从hr口中了解react的状态管理库(mobx, recoil), 立马过来学习之recoil
|
移动开发 前端开发 JavaScript
[react-native]mobx (react中全局数据管理库, 可以简单的实现数据的跨组件共享,类似于vue中的vuex)
[react-native]mobx (react中全局数据管理库, 可以简单的实现数据的跨组件共享,类似于vue中的vuex)
|
缓存 前端开发 容器
React 16.x折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)
简化了代码逻辑和代码量,重写了一遍,执行逻辑和上个版本有所差异;
304 0