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"
        ]
}



相关文章
|
7月前
|
前端开发 JavaScript
使用 MobX 优化 React 代码
使用 MobX 优化 React 代码
95 0
|
缓存 前端开发 API
React + MobX 快速上手2
React + MobX 快速上手
|
2月前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
74 0
|
4月前
|
存储 JavaScript 前端开发
探索React状态管理:Redux的严格与功能、MobX的简洁与直观、Context API的原生与易用——详细对比及应用案例分析
【8月更文挑战第31天】在React开发中,状态管理对于构建大型应用至关重要。本文将探讨三种主流状态管理方案:Redux、MobX和Context API。Redux采用单一存储模型,提供预测性状态更新;MobX利用装饰器语法,使状态修改更直观;Context API则允许跨组件状态共享,无需第三方库。每种方案各具特色,适用于不同场景,选择合适的工具能让React应用更加高效有序。
96 0
|
7月前
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
93 0
|
存储 JavaScript 开发者
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
Mobx+Mobx-React快速上手 简单可扩展的状态管理解决方案
115 0
|
运维 前端开发
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
基于React、Mobx、Webpack 和 React-Router的项目模板。 #88
122 0
|
JavaScript 前端开发 开发工具
React中的状态管理---Mobx
React中的状态管理---Mobx
162 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