React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React框架Dva数据流向

React应用框架Dva数据流向原理总结分析

作者:超级白的小白

这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Dva是什么?

在刚刚接触Dva时,我最想知道的第一个问题就是:

Dva官网文档的介绍是:

dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。

dva = React-Router + Redux + Redux-saga

说实话这些名词让我只能一个一个的百度,虽然不能说毫无收获,但是依然难以理解。 现在我的理解Dva是一个轻量化的数据流向方案。 既然说是数据流向方案,那就应该先看数据流向的流程图嘛,但是在我看到官网的流程图后,发现对于第一次接触Dva的我来说,确实无异于“天书”。

流程图怎么看?

其中的单词代表的又是什么意思呢?

参考最近接触到的项目中使用的Dva流程和官网文档给出的解释,再次进行梳理。

首先,当一个页面发生一个行为,如:用户交互行为或者页面跳转时通常会发生数据的改变,此时dispatch函数会调用一个action,从而使数据发生改变。

** dispatch 函数** dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。 常见的形式如:

dispatch({//dispatch函数具有type,payload两个参数
type: 'user/add', // type是用于找到与渲染层所连接@connet的Model层。
payload: {}, // payload中存放的是访问API所需的参数传递给Model。
});

需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。 const { dispatch } = this.props;

在 Dva 中,可以通过@connect组件来实现View层与Model层的绑定。 dispatch可以调用 Model 中的 Reducer 或者 Effects(对于同步行为则直接调用Reducer来改变State,如果是异步行为则先触发Effects(副作用)然后流向Reducer最终改变State)来改变State。

@connect(({ namespace,loading }) => ({//namespace为Model的一个属性用于识别Model,
其中整个页面的State是由许多Model以namespace为key合成State。
  namespace,
  loading
}))

以上是在页面的js文件中所需做的介绍,当dispatch调用刀Model页面时:

Model对象属性

在接触Dva这几天,使用到了Model对象所具有以下几种属性:

(1)namespace:前面提到过相当于全局State中的key。 namespace: 'historyScoreServiceModel'

(2)state:表示 Model 当前的状态数据。

state: {
    reportData: [],
    workData: [],
    report: '',
    reportUrl:''
  },

State State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);

操作的时候每次都要当作不可变数据来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

(3)effect:在使用过程中其中存放着dispatch所需调用的函数。在使用过程中通过yield call函数调用了server层发送Ajax请求的函数,返回的数据。call的第一个参数是你要调用的函数,第二个参数开始是你要传递的参数。然后对于返回的数据通过yield put的type属性调用调用一个方法并将获取到的State作为参数传入tpye属性所调用的函数中。

  effects: {
  *getHistoryScore({ payload }, { call, put }) {
    const response = yield call(调用的server层的函数, 传入的参数);
    console.log(response)//返回的数据
    yield put({
      type: 'save',//调用的save方法
      payload: {
        reportUrl: response
      },
    });
  },
  },

(4)reducers:用于数据合并。

在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。

需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。

  reducers: {
    save(state, { payload }) {//save函数传入两个参数一个是原State,一个是新数据,save函数用于将两者扩展合并。
      return {
        ...state,
        ...payload,
      };
    },
  },

Ajax请求是在effect中通过调用server层的函数,函数体中通过ruquest函数发送Ajax请求,从ApI获取数据。

至此,数据的获取,到拼接到State最终渲染到页面的dva的完整流程就OK了。 现在再来理解一下dva官方文档的数据流程介绍吧。

数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致。

参考文献:

DvaJS官方文档:https://dvajs.com/guide/

以上就是React应用框架Dva数据流向原理总结分析的详细内容,更多关于React框架Dva数据流向的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文