一、微信小程序自身的应用状态是怎样定义的呢？page({ data: { item: '', isLoading: true }, onLoad: function(){ this.setData({ isLoading: false }) }})二、为什么使用应用状态管理工具？同一数据，一次请求，应 ...
一、微信小程序自身的应用状态是怎样定义的呢？
-
page({
-
data: {
-
item: '',
-
isLoading: true
-
},
-
onLoad: function(){
-
this.setData({
-
isLoading: false
-
})
-
}
-
})
二、为什么使用应用状态管理工具？
同一数据，一次请求，应用全局共享。 MVVM架构开发中清晰的数据流向——单向数据流。 将分散在不同页面的数据与应用状态统一管理，共享数据与状态变化。 适应组件化、模块化开发的数据结构，提高代码重复使用率、提高开发效率。 三、应用状态管理工具有哪些？
前端MVVM架构基础库有很多，目前主流的有React、Vue、Angular，不同的库有不同的应用状态管理方案，比如React常用的Flux，Redux，Mobx，Vue的Vuex，Angular的ngrx/store，Redux并不是React的专属，而是针对Redux有最优的解决方案，当然Redux同样也能移植到其他框架使用，比如可以在微信小程序中使用。
四、微信小程序如何选择应用状态管理工具库？
目前微信有移植的Redux与Mobx来作为应用状态管理，Redux 和 Mobx 都是当下比较火热的数据流模型，一个背靠函数式，似乎成为了开源界标配，一个基于面向对象，低调的前行。
函数式 vs 面向对象
函数式的优点：
将数据和处理逻辑分离，代码更加简洁，模块化，可读性好 易测试、易维护，测试环境容易模拟 逻辑代码可复用性强 相对比面向对象的编程：
javascript的弱类型，表明它基于对象，不适合完全函数式表达。 数学思维和数据处理适合用函数式，而业务逻辑的处理适合用面向对象。 逻辑严谨的函数式编程相当完美，但为了实现具体业务功能不得不写更多细粒度代码来实现，而面向对象的方式更为简洁和灵活。 Redux vs Mobx
那么具体到这两种模型，又有一些特定的优缺点呈现出来。
先来看 Redux 的特点:
reducer
-
import { combineReducers } from 'redux'
-
import { createReducer } from 'redux-immutablejs'
-
import { fromJS } from 'immutable'
-
import {
-
EXAMPLE
-
} from '../constants'
-
-
const example = createReducer(fromJS({
-
title: "项目构建成功"
-
}),{
-
[EXAMPLE]: (state, action) => {
-
return state.merge({
-
title: action.payload.title
-
})
-
}
-
})
-
-
const rootReducer = combineReducers({
-
example
-
})
-
-
export default rootReducer
action
-
import {
-
EXAMPLE
-
} from '../constants'
-
-
function example(val){
-
return {
-
type: EXAMPLE,
-
payload: {
-
title: val
-
}
-
}
-
}
-
-
export function changeTitle(val){
-
return (dispatch, getState) => {
-
dispatch(example(val))
-
}
-
}
声明式编程 reducer 纯函数 action 无副作用 不可变数据 immutable 对比Mobx：
-
var extendObservable = require('../libs/mobx').extendObservable;
-
var apiPath = require('../config/apiPath')
-
var {formatTime} = require('../utils/tool')
-
-
var app = getApp()
-
-
var userInfo = function(){
-
extendObservable(this,{
-
title: '我的预约',
-
data: {},
-
order: []
-
})
-
this.receive = function(){
-
var that = this
-
app.getUserInfo(function (userInfo) {
-
that.data = userInfo
-
})
-
}
-
this.getUserOrder = function(){
-
var that = this
-
wx.request({
-
url: apiPath.GETUSERORDER,
-
method: 'GET',
-
header: {
-
'Authorization': `Bearer ${wx.getStorageSync('token') || []}`,
-
'Content-Type': 'application/json'
-
},
-
邀请
原作者: 模板之家
来自: 网络收集
|
