webpack 配置react脚手架(五):mobx
1. 配置项。使用mobx,因为语法时es6-next,所以先配置 .babelrc 文件
{
"presets": [
["es2015", { "loose": true }],
"stage-1",//改动了这里
"react"
],
"plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
//还有这里,transform-decorators-legacy 放在 数组的第一项
}
安装:
npm i transform-decorators-legacy babel-preset-stage-1 -D
npm i mobx-react -S
2. 使用 在store/app-state.js中:
import {
observable,
computed,
autorun,
action,
} from 'mobx' export class AppState {//方便组件调用的时候 判断props的类型
@observable count = 0; //定义属性值
@observable name = 'jok'
@computed get msg() { //定义计算属性
return `${this.name} say count is ${this.count}`
}
@action.add(){ //定义action 是由组件触发该方法的
this.count + =1;
}
@action.changeName(name){
this.name = name;
}
}
const appState = new AppState(); autorun(()=>{
console.log(appState.msg); //一旦更新appState
}) setInterval(()=>{
appState.add();//实时更新,触发add的action
},1000)
export default appState;
调用方法:首先在 入口文件中,类似于使用 context的传入方式,把外层组件包裹起来:
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'mobx-react'
import { AppContainer } from 'react-hot-loader' // eslint-disable-line import App from './views/App'
import appState from './store/app-state' const root = document.getElementById('root');
// 其实包裹组件的方式,使用的是context
const render = (Component) => {
ReactDOM.hydrate(
<AppContainer>
<Provider appState={appState}>
<BrowserRouter>
<Component />
</BrowserRouter>
</Provider>
</AppContainer>,
root,
)
}
然后在业务组件中使用,由于要用到 props,所以要先安装 props-type: npm i prop-types -S
import React from 'react'
import {
observer,
inject,
} from 'mobx-react'
import PropTypes from 'prop-types'
import { AppState } from '../../store/app-state';
@inject('appState') @observer
// 入口文件中 Provider定义的名字 <Provider appState={appState}> 这里引入什么名字
// @observer 规定是观察者模式,appState的状态发生变化,则对应的这里的数据也发生变化 export default class TopList extends React.Component {
constructor(){
super();
this.changeName = this.changeName.bind(this);
//因为在执行 onChange方法的时候,上下文已经不在组件内部了,所以要加上this指向
}
componentDidMount() {
// do something here
}
changeName(event){
this.props.appState.changeName(event.target.value);
}
render() {
return [
<div>
<input type="text" onChange={this.changeName}/>
<span>{this.props.appState.msg}</span>
</div>
]
}
} TopList.propTypes = {
appState: PropTypes.instanceOf(AppState).isRequired
}
webpack 配置react脚手架(五):mobx的更多相关文章
- webpack 配置react脚手架(六):api
1 访问网址 https://cnodejs.org/api 可以调取api 2.//该body-parser 可以将请求的body数据,转变成 json 格式数据://express-session ...
- webpack 配置react脚手架(三):eslint 及优化
首先谨记 eslint的官网: http://eslint.cn/ 1 安装eslint npm i eslint -D 2.在根目录下新建文件 .eslintrc { "extends ...
- webpack 配置react脚手架(二):热更新
下面继续配置 webpack dev server hot module replacement: 首先配置dev-server 安装 npm i webpack-dev-ser ...
- webpack 配置react脚手架
1 react 基本js文件: import React from 'react'; import ReactDOM from 'react-dom'; import App from './App. ...
- webpack 配置react脚手架(四):路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack配置React开发环境(上)
Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...
- 使用webpack配置react并添加到flask应用
学习react,配置是很痛苦的一关,虽然现在有了create-react-app这样方便的工具,但是必须要自己配置一遍,才能更好地进行项目开发. 首先要明确一个概念:react的文件必须经过编译才能被 ...
- 基于webpack的react脚手架
一.前言:react的cli开发模式太过于简单,好多东西都要自己配置 二.这里有个简单的配置,可以直接上手开发(不熟悉webpack和npm的绕路),已经完成的配置如下 1:默认ejs模板 2:编译l ...
随机推荐
- C# Hook原理及EasyHook
C# Hook原理及EasyHook简易教程 前言 在说C# Hook之前,我们先来说说什么是Hook技术.相信大家都接触过外挂,不管是修改游戏客户端的也好,盗取密码的也罢,它们都是如何实现的呢? 实 ...
- 6、rabbitmq&java代码操作
记住四个注解 存: rabbitTemplate.convertAndSend("bw","我要红包"); 取: @Component @RabbitListe ...
- shrio学习笔记
Thymeleaf扩展坐标 <!--thyemleaf对shrio的扩展坐标--> <dependency> <groupId>com.github.thebora ...
- Java基础---Java 练习题49
1.分别用do-while和for循环计算1+1/2!+1/3!+…前20项和 /** * 用do-while计算1+1/2!+1/3!+……的前20项的和 * @Hoagn * */ public ...
- C++知识点总结篇
const在不同位置时的不同意义 指针类型前:声明一个指向常量的指针,程序中不能通过指针来改变它所指向的值,但指针本身的值可以改变,即指针可以指向其他数据: "*"号和指针名之间, ...
- jquery根据html()的内容来选择
<ul><li>First</li><li>http://www.hfxskyyj.com/</li></ul> 如上,如何选中 ...
- ALV报表——基础(一)
目录 一.ALV的简介 二.程序实现 2.1.实现步骤 2.2.代码示例 三.Layout.Fieldcat相关属性,ALV输出函数 3.1.Layout相关属性 3.2.Fieldcat相关属性 3 ...
- FPS 游戏实现GDI透视
FPS游戏可以说一直都比较热门,典型的代表有反恐精英,穿越火线,绝地求生等,基本上只要是FPS游戏都会有透视挂的存在,而透视挂还分为很多种类型,常见的有D3D透视,方框透视,还有一些比较高端的显卡透视 ...
- sqlserver 查看表死锁
1.SELECT request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName FROM sys.dm_tr ...
- SpringMVC源码解读
1.SpringMVC简介 SpringMVC框架是围绕一个DispatherServlet来设计的.这个Servlet会把请求分发给各个处理器,并支持可配置的处理器映射.视图渲染.本地化.时区与主题 ...