React的数据流方案

Posted 2021-07-17 曹豆芽

mobx

mobx一款可以与redux媲美的数据流方案，Flux思想单向数据流方案，以 Redux 为代表，Reactive响应式数据流方案。详细可看mobx

• 单向数据流实现：redux + react-redux + react-thunk

• 响应式数据流实现：mobx + mobx-react

MobX 的理念是通过观察者模式对数据做出追踪处理，在对可观察属性作出变更或者引用的时候，触发其依赖的监听函数，整体的store注入机制采用react提供的context来进行传递。当我们使用mobx mobx-react需要使用装饰器，所以下面会大致讲述装饰器的基本使用。

装饰器Decorator

是个函数,用来装饰类或者类成员 ，是Object.defineProperty的语法糖

//给对象添加或修改属性
Object.defineProperty(target, prop, desc)
//target 需要定义属性的当前对象
//prop 当前需要定义的属性名 类型：字符

desc	默认值	说明
configurable	false	描述属性是否可以被删除，默认为 false
enumerable	false	描述属性是否可以被for…in或Object.keys枚举，默认为 false
writable	false	描述属性是否可以修改，默认为 false
get	undefined	当访问属性时触发该方法，默认为undefined
set	undefined	当属性被修改时触发该方法，默认为undefined
value	undefined	属性值，默认为undefined

//定义装饰器
function 装饰器名 (target,prop,descriptor){
  descriptor.writable=false;//writable属性是否可以写入
  return descriptor;
}

//使用定时器
@装饰器名 类
@装饰器名 类的实例属性|静态属性
@装饰器名 类的实例方法|静态方法

//使用场景
mobx / angluarTs / vueTs / reactTs / java ...

配置装饰器

当前是不支持装饰器语法，这个时候我们需要去添加装饰器的配置

yarn add @babel/plugin-proposal-decorators --save

package.json

babel: {
  "presets":...

  +
  "plugins": [
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
   ]

  ....
}

mobx成员

observable action 装饰类和其成员

@observable 装饰store类的成员，为被观察者
@action 实例方法, 处理实例属性，修改状态，不推荐组件内部改

mobx-react成员

inject observer Provider

Provider，顶层提供store的服务

<Provider store={store}></Provider>

inject，注入Provider提供的store到该组件的props中，组件内部使用,inject 是一个高阶组件 高阶组件返回的是组件，作用在包装组件

export default inject('store')(react函数式组件)

@inject 是装饰器，装饰的是类本身和类成员

@inject('store') class 类组件

observer，设置当前组件为观察者,一旦检测到store中被监测者发生变化就会进行视图的强制刷新

@observer class 类组件
  
const 组件=observer((store)=>{jsx})

构建

环境配置

npm install --save mobx mobx-react //安装mobx mobx-react
//配置装饰器在上述已经讲述

程序主入口

import {Provider} from 'mobx-react'
import store from './store';
<Provider store={store}>所有</.>

store

// index.js文件
import User from './user'
...

class Store {

  constructor(){
    this.user = new User(this);//传递this防止this丢失
   	.... 可以把组件的数据交给一个一个类来处理，有的模块管理的感觉
  }

}
export default new Store();


// user.class文件
import { observable, action } from 'mobx'
import axios from "axios";

class User {
	
  //被观测者
  @observable user= window.localStorage.getItem('1909_newsapp') ?
    JSON.parse(window.localStorage.getItem('1909_newsapp')) :
    {
      err:1,
      msg:'未登录',
      data:{}
    };

  constructor(store){
    this.store=store;
  }
	
	//处理被观测者数据
  @action check = async ({api,method='get',username,password}) => {
    return axios({
      url:`/api/${api}`,
      method,
      params: method === 'get' ? {username, password}: null,
      data: method === 'post' ? {username, password}: null,
    }).then(
      res=>{
        this.user = res.data;
        window.localStorage.setItem('xxx',JSON.stringify(res.data));
        return res
      }
    )
  };
}

export default User;

//组件注入 被做一个观察者
import {inject, observer} from "mobx-react";

@inject('store')
@observer
export default class Home extends React.Component{
  constructor(props){
    super(props);
    props.store.goods.update({
      ...
    })
  }

  render(){
    let {goods:{home,banner}}=this.props.store;
    return(
      ...
    )
  }
}
  
//面对函数式组件
const react函数式组件=observer((store)=>{jsx})
export default inject('store')(react函数式组件)

欢迎一起交流🙏🙏