微信小程序> 【前端前沿看点】微信小程序状态管理——ReduxVSMobxmvvm完成

【前端前沿看点】微信小程序状态管理——ReduxVSMobxmvvm完成

浏览量：4301 时间： 来源：占有欲极强的无知偏执狂

一、微信小程序自身的应用状态是怎样定义的呢？page({ data: { item: '', isLoading: true }, onLoad: function(){ this.setData({ isLoading: false }) }})二、为什么使用应用状态管理工具？同一数据，一次请求，应 ...

一、微信小程序自身的应用状态是怎样定义的呢？

  1. page({
  2.   data: {
  3.     item: '',
  4.     isLoading: true
  5.   },
  6.   onLoad: function(){
  7.     this.setData({
  8.       isLoading: false
  9.     })
  10.   }
  11. })
二、为什么使用应用状态管理工具？
同一数据，一次请求，应用全局共享。 
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
  1. import { combineReducers } from 'redux'
  2. import { createReducer } from 'redux-immutablejs'
  3. import { fromJS } from 'immutable'
  4. import {
  5.   EXAMPLE
  6. } from '../constants'
  8. const example = createReducer(fromJS({
  9.   title: "项目构建成功"
  10. }),{
  11.   [EXAMPLE]: (state, action) => {
  12.     return state.merge({
  13.           title: action.payload.title
  14.     })
  15.   }
  16. })
  18. const rootReducer = combineReducers({
  19.   example
  20. })
  22. export default rootReducer
action
  1. import {
  2.   EXAMPLE
  3. } from '../constants'
  5. function example(val){
  6.   return {
  7.     type: EXAMPLE,
  8.     payload: {
  9.       title: val
  10.     }
  11.   }
  12. }
  14. export function changeTitle(val){
  15.   return (dispatch, getState) => {
  16.     dispatch(example(val))
  17.   }
  18. }
声明式编程 reducer 
纯函数 action 无副作用 
不可变数据 immutable 
对比Mobx：
  1. var extendObservable = require('../libs/mobx').extendObservable;
  2. var apiPath = require('../config/apiPath')
  3. var {formatTime} = require('../utils/tool')
  5. var app = getApp()
  7. var userInfo = function(){
  8.   extendObservable(this,{
  9.     title: '我的预约',
  10.     data: {},
  11.     order: []
  12.   })
  13.   this.receive = function(){
  14.     var that = this
  15.     app.getUserInfo(function (userInfo) {
  16.       that.data = userInfo
  17.     })
  18.   }
  19.   this.getUserOrder = function(){
  20.     var that 
            
    
              
    
                点击这里免费试用，快速创建您的专属小程序
              
    
              
    
                标签：
                微信小程序
                小程序
                小程序是什么
              
    
            
    
            
    版权声明
    即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。
    
          
        
        
    
          
    
            
    
            
    
              
              
    
                
    
                  产品经理
                  
                
    
                
    
                  手机 :
                  13312967497
                
    
                
    
                  擅长 :
                  小程序流量变现
                
    
                扫码领取礼包
              
    
            
    
          
    
          
    
            
    最新资讯
    
            
          
    
          
    
            
    热门模板
    
            
          
    
          
    
            
    相关资讯
    
            
          
    
        
    
			
		
	
	
  

    
    
    
        
    
            
    
                
                
    招商热线
    
                
    17304402882
    
                
            
    
            
        
    
                
    

            
      
                
      • 
                
    • 头条
      • 
                
    • 搜狐
      • 
                
    • 微博
      • 
                
    • 百家
      • 
                
    • 一点资讯
      • 
                
    • 知乎
      •      
            
    
        
    
                
    
                                                
    
                深圳市咫尺网络科技开发有限公司©2015 咫尺网络 粤ICP备14097199号
                工商网监电子标识