webpack环境搭建

npm init -ynpm i webpack webpack-cli webpack-dev-server -Dnpm i html-webpack-plugin -Dnpm i babel-loader @babel/core @babel/preset-env -Dnpm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -Dnpm i mobx -S

编写webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {mode: 'development',entry: {app: path.resolve(__dirname, './src/index.js')},output: {path: path.resolve(__dirname, './dist')},module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader:'babel-loader',options:{presets:['@babel/preset-env'],plugins:[//支持装饰器['@babel/plugin-proposal-decorators',{"legacy":true}],// 支持类里面写属性["@babel/plugin-proposal-class-properties",{'loose':true}],['@babel/plugin-transform-runtime']]}}}]},plugins:[new HtmlWebpackPlugin()],// 代码合并方式在一行devtool:'inline-source-map'
}

observable可观察对象

import {observable} from 'mobx'

map

set设置，get获取，delete删除，has判断有无

const map = observable.map({a:1,b:2})
map.set('a',11)
console.log(map.get('a'));
console.log(map.get('b'));
map.delete('a')
console.log(map.has('a'));

数组

数组转成可观察的后是proxy，访问和操作与js相同

const arr = observable([1,2,3,4,5])
// arr是一个proxy
console.log(arr[2]);
arr.pop()
arr.push(12)
console.log(arr);

对象

对象转成可观察的后是proxy

let obj = observable({a:1,b:2})
console.log(obj);//obj是一个proxy

基础类型

枚举，布尔值，字符串需要放入box，使用get访问，使用set设置

枚举

 const num = observable.box(10)console.log(num.get());

字符串

const str = observable.box('str')
console.log(str.get());

布尔值

const bool = observable.box(true)
console.log(bool.get());

observable装饰器

对 observables 作出响应

autorun

检测数据变化，数据必须是可观察的

参数是一个回调函数

第一次运行会调用，回调函数被引用的数据有变化会调用

用于检测回调函数里对象的变化

let obj = observable({title:'msg'})
autorun(()=>{console.log(obj.title);
})
obj.title = 'mmm'

when

有两个参数，都是回调函数，第一个回调函数返回布尔值，为true才运行第二个回调函数

when(()=>{return store.bool},()=>{console.log('when function run...');}
)

reaction

autorun的变种

基于某个数据实现视图更新

两个参数，均为回调函数，第一个回调函数的返回值作为第二个回调函数的输入

和autorun的区别：第一次不会调用，发生变化时调用

reaction(()=>{return store.str},(arr)=>{console.log(arr.join('/'));}
)
setTimeout(() => {store.bool = true,store.str = 'world'store.num = 220
}, 5000);

computed

定义方法：

1.computed函数（使用不多）

对观察的结果可以使用observer方法

const rs = computed(()=>{return store.str+store.num
})
console.log(rs.get());
rs.observe((change)=>{console.log(rs.get());
})store.bool = true,
store.str = 'world'
store.num = 220

2.装饰器定义computed

@computedget result(){return this.str+this.num}
//使用reaction检测变化
reaction(()=>{return store.result},(result)=>{console.log(result);}
)

改变observable的状态

action

mobx中引入action对象，通过装饰器装饰函数

@actionbar(){this.str = 'mobx',this.num = '232'}
store.bar()

绑定this

 @action.bound foo(){this.str = 'foo'}

异步操作

npm i @babel/runtime @babel/plugin-transform-runtime

在webpackconfig.js里配置

@actionasync fzz(){console.log('fzz');let obj = await new Promise((reslove)=>{setTimeout(() => {reslove({num:1234,str:'wowo'})}, 4000);})runInAction(()=>{store.num = obj.numstore.str = obj.str})console.log(store.num,store.str);}

在react中使用mobx

npx create-react-app react-mobx-app

create-react-app不支持装饰器

二次配置webpack的方法:cra，rewied,eject

yarn eject

npm i @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D

在package.json里配置babel

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

npm i mobx mobx-react -S

yarn start

注意：vscode编译器中，js文件使用装饰器会报红。解决方式：

在根目录编写写jsconfig.json

{"compilerOptions": {"module": "commonjs","target": "es6","experimentalDecorators": true},"include": ["src/**/*"]
}

React + Mobx 案例

创建store/index.js

import {observable, action, computed,runInAction} from 'mobx'
class AppStore{@observabletitle = 'mobx'@observabletodos = []@computedget desc(){return `一共${this.todos.length}条`}@action.boundaddTodo(todo){//可以直接操作数据this.todos.push(todo)}@action.bounddelTodo(){this.todos.pop()}@action.boundresetTodo(){this.todos = []}@action.bound//异步操作方法1// asyncAddTodo(todo){//     this.todos.push(todo)// }//异步操作方法2async asyncAddTodo(todo){await new Promise((resolve)=>{setTimeout(() => {resolve() }, 1000);})runInAction(()=>{this.todos.push(todo)})}}
const store = new AppStore()
//导出类的实例
export default store

创建pages/Home.js,在这里使用store

import React, { Component } from 'react'
import {observer,inject} from 'mobx-react'
import store from '../store'
//观察者observer:类被引用后，属性发生变化，重新渲染类
// inject可以传入参数，
// 类可以响应变化，根据变化做出渲染或修改数据
@inject('store')
@observer
class Home extends Component {addTodo=(item)=>{return()=>{store.addTodo(item)}}delTodo=()=>{store.delTodo()}resetTodo=()=>{store.resetTodo()}asyncAddTodo=(item)=>{return ()=>{setTimeout(() => {store.asyncAddTodo(item)}, 2000);}}render() {return (<><div>{store.title}</div><button onClick = {this.addTodo('这是一条内容')}>add</button><button onClick = {this.delTodo}>delete</button><button onClick = {this.resetTodo}>reset</button><button onClick = {this.asyncAddTodo('这是一条异步添加内容')}>async add</button><h6>{store.todos.length}</h6>{store.todos.map((item,index)=>{return(<div key = {index}>{item}</div>)})}</>)}
}
export default Home

n onClick = {this.resetTodo}>reset</button><button onClick = {this.asyncAddTodo('这是一条异步添加内容')}>async add</button><h6>{store.todos.length}</h6>{store.todos.map((item,index)=>{return(<div key = {index}>{item}</div>)})}</>)}
}
export default Home

前端学习——Mobx相关推荐

前端共享桌面_2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 图下面是我翻译的一个文字版,可以先看 ...
2020 前端学习路线总结，哎呦，不错哦！
2020 前端学习路线总结在 GitHub 看到一个很不错的前端学习路线图(roadmap),从前端基础到前端工程化,再到跨端,都有知识点的覆盖,非常推荐阅读. 在前端领域混了这几年,总结了一套前端 ...
2021 年前端学习路线总结
下面是我翻译的一个文字版,可以先看图再看文字. ✅ 表示个人推荐学习 ✳️ 表示可选择学习 ❇️ 表示不需要严格按照路线的先后顺序,可在任何时间补充这一块的知识 ❎ 表示个人不再推荐计算机网络掌握 ...
【FE前端学习】第二阶段任务-基础
技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握上文 [FE前端学习]第二阶段任务- ...
Web前端学习有哪些技巧?
想要学好web前端技术,在学习过程中找到合适的方法和技巧,那么在实际学习过程中会更加的容易和快速掌握知识重点,尤其是对于初学者尤为关键,下面小编就为大家详细的介绍一下Web前端学习有哪些技巧?希望能够 ...
“计算机之子”winter：我的前端学习路线与方法
你好,我是winter.今天我们一起来聊聊前端的学习路线与方法. 到现在为止,前端工程师已经成为研发体系中的重要岗位之一.可是,与此相对的是,我发现极少或者几乎没有大学的计算机专业愿意开设前端课程,更 ...
python比前端好学吗_前端学习到底难不难？
难易程度是相对的,不是绝对的. 前端学习相对于java,python等肯定是更为简单的.精通会有难度,而且更新速度很快,需要不断的充实自己,提升自己,这也是一个难点. 前端学习初期,不知道该怎么学,学 ...
hbuilder前端需要的插件_最新web前端学习路线
随着互联网的深入发展,前端开发工程师已成为市场上极具竞争力的人才.许多学生,包括以前的UI,java,或完全零基础,想学习的前端.下面的思维导图是在互联网上广泛传播的前端学习地图.许多初学者说,当他们 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...

前端学习——Mobx