React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用。
一、添加配置
官方提供了四种方法,
方法一、使用TypeScript,顾名思义该方法是项目使用typescript时的配置
方法二、使用babel-preset-mobx, 安装并添加到.babelrc配置中,该方法需要升级一些依赖,
babel-core -> @/babel-core 7.x
babel-loader -> @/babel-loader 8.x
babel-preset-env -> @/babel-preset-env
babel-preset-react -> @babel-preset-react
同时需要修改.babelrc配置,相当麻烦
方法三、使用babel-plugin-transform-decorators-legacy, 安装并添加到.babelrc即可, 但需要注意的是必须将其放在其他插件之前。
方法四、在create-react-app中使用,需要eject或者使用react-app-rewired-mobx
1. 使用eject时 ($ npm run eject),是将项目的配置文件全部暴露出来,注意该操作不可逆,然后再使用方法二或者方法三进行配置
2. 使用react-app-rewired-mobx是为了避免eject项目, 安装模块后在项目根目录新建文件config-overrides.js
const rewireMobX = require('react-app-rewire-mobx'); /* config-overrides.js */
module.exports = function override(config, env) {
config = rewireMobX(config, env);
return config;
}
综合以上方法,显而易见方法三最简单而且不易出错。
二、修改业务代码
1. 根组件不变
import React from 'react';
import appState from './store';
import Todo from "./components/Todo"; export default class App extends React.Component {
render() {
return (
<div className='app'>
<Todo appState={appState}/>
</div>
)
}
}
2 . 修改store
import {observable, action } from 'mobx'
// 常量改成类
class AppState {
// 装饰器@
@observable timer = 0 @action
resetTimer() {
this.timer = 0;
} @action.bound
increase() {
console.log('increase')
this.timer++;
}
}
// 将类实例化,后再暴露, 也可以先导出再在组件使用时再实例化
const appState = new AppState()
// 外部调用类的方法
setInterval(appState.increase, 1000) export default appState;
3 . 修改子组件,(将observer改成@observer放在类的前面即可)
import React, {Component} from 'react';
import { observer } from 'mobx-react'; // 装饰器方式@
@observer
class TodoList extends Component { constructor(props) {
super(props);
}
// 该绑定方式属于ES7,需要添加预设babel-preset-stage-2
_resetTimer = ()=> {
this.props.appState.resetTimer()
}
_increase = () => {
this.props.appState.increase()
} render() {
return (
<div>
<h2>TodoList</h2>
<p>{this.props.appState.timer}</p>
<button onClick={this._resetTimer}>复位</button>
<button onClick={this._increase}>增加</button>
</div>
);
}
} // 直接导出类组件
export default TodoList;
修改完毕,项目正常运行。
React项目中使用Mobx状态管理(二)的更多相关文章
- React项目中使用Mobx状态管理(一)
1.安装 $ yarn add mobx mobx-react 2.新建store/index.js,存放数据(以下思路仅限于父子组件的简单应用) 注意:这里暂时没使用装饰器@observable,装 ...
- 在react项目中启用mobx的配置方法
1.安装插件 npm install --save-dev babel-preset-mobx mobx mobx-react 2.package.json配置 "dependencies& ...
- react项目中实现搜索关键字呈现高亮状态(一)
最近有个需求,在一个react项目中,实现搜索关键字呈现高亮状态.这个在普通的html文件中还好操作些,在react项目中有点懵逼了,因为react项目中很少操作dom,有点无从下手.但最后还是实现了 ...
- mobx状态管理快速入门
1.mobx状态管理 安装: creact-react-app mobx
- 优雅的在React项目中使用Redux
概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 【已解决】React项目中按需引入ant-design报错TypeError: injectBabelPlugin is not a function
react项目中ant-design按需加载,使用react-app-rewired的时候报错 运行npm start或者yarn start报如下错误: TypeError: injectBabel ...
- react项目中使用less并修改antd主题样式
一.react项目中使用less 1. 安装配置 npm i -D less less-loader 2. 查看webpack配置 npm run eject 此操作不可逆,生成新的目录. 3. 修改 ...
随机推荐
- 基于Docker搭建MySQL主从复制
摘要: 本篇博文相对简单,因为是初次使用Docker,MySQL的主从复制之前也在Centos环境下搭建过,但是也忘的也差不多了,因此本次尝试在Docker中搭建. 本篇博文相对简单,因为是初次使用D ...
- Lombok安装及使用
为什么要使用Lombok: 虽然一般的IDE(eclipse,Intellij)都有自动生成代码的功能,如:生成setter,getter,toString,equels,hashcode等.但是如果 ...
- node 下查看安装插件的最新版本号的方法
例如查看extract-text-webpack-plugin的最新版本号 (不一定时本地安装的插件的版本号) npm view extract-text-webpack-plugin version ...
- iOS之分类(category)
1.分类(category)的作用 1.1作用:可以在不修改原来类的基础上,为一个类扩展方法.1.2最主要的用法:给系统自带的类扩展方法. 2.分类中能写点啥? 2.1分类中只能添加“方法”,不能增加 ...
- ios -RunLoop(简单理解)
一. RunLoop简介 RunLoop字面意思是运行时,即跑圈得意思.它可以在我们需要的时候自己跑起来运行,在我们没有操作的时候就停下来休息,充分节省CPU资源,提高程序性能. 二. RunLoop ...
- Flash and Scalform CLIK
Flash shift + f7 打开组件检查面板 Scaleform As bit define bool Unrolling :1; // indi ...
- Lua 变量名词
UpValue Lua中的函数是一阶类型值(first-class value),定义函数就象创建普通类型值一样(只不过函数类型值的数据主要是一条条指令而已),所以在函数体中仍然可以定义函数.假设函数 ...
- 制作STM32开发板要买的电子元器件
1.STM32F103VET6芯片 2.电阻(10K.1.5K.1K.510R.47R.27R.0R) 3.电容(104.4.7uf.1uf.22uf.10pf.) 4.二极管(普通二极管D1206. ...
- tomcat在Eclipse中和idea中的使用
在eclipse中的使用 下载 http://tomcat.apache.org/ 部署项目到tomcat 常见问题 访问时如何出掉项目名 中文乱码问题 1.浏览器编码问题,修改浏览器的编码 2.js ...
- 洛谷P3248 树 [HNOI2016] 主席树+倍增+分治
正解:主席树+倍增+分治 解题报告: 传送门! 首先看到这题会想到之前考过的这题 但是那题其实简单一些,,,因为那题只要用个分治+预处理就好,只是有点儿思维难度而已 这题就不一样,因为它说了是按照原树 ...