简述react、redux、react-redux、redux-saga、dva之间的关系

时间  2019-11-13 标签 简述 react redux saga dva 之间 关系

【react】前端

  1. 定位：React 是一个用于构建用户界面的JavaScript库。react

  1. 特色：它采用声明范式来描述应用，创建虚拟dom，支持JSX语法，经过react构建组件，可以很好的去复用代码；编程

  1. 缺点：react抽离了dom，使咱们构建页面变得简单，可是对于一个大型复杂应用来讲，只有dom层的便捷是不够的，如何组织、管理应用的代码，如何在组件件进行有效通讯，这些它都没有解决；所以，它还须要一个前端架构才能应对大型应用；redux

【redux】react-router

  1. 定位：它是将flux和函数式编程思想结合在一块儿造成的架构；架构

  1. 思想：视图与状态是一一对应的；全部的状态，都保存在一个对象里面；app

  1. API：框架

    1. store：就是一个数据池，一个应用只有一个；　　
    2. state：一个 State 对应一个 View。只要 State 相同，View 就相同。
    3. action：State 的变化，会致使 View 的变化。可是，用户接触不到 State，只能接触到 View。因此，State 的变化必须是 View 致使的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。其余属性能够自由设置。
    4. dispatch：它是view发出action的惟一方法；
    5. reducer：view发出action后，state要发生变化，reducer就是改变state的处理层，它接收action和state，经过处理action来返回新的state；
    6. subscribe：监听。监听state，state变化view随之改变；

【react-redux】dom

  1. 定位：react-redux是为了让redux更好的适用于react而生的一个库，使用这个库，要遵循一些规范；异步

  1. 主要内容

    1. UI组件：就像一个纯函数，没有state，不作数据处理，只关注view，长什么样子彻底取决于接收了什么参数（props）
    2. 容器组件：关注行为派发和数据梳理，把处理好的数据交给UI组件呈现；React-Redux规定，全部的UI组件都由用户提供，容器组件则是由React-Redux自动生成。也就是说，用户负责视觉层，状态管理则是所有交给它。
    3. connect：这个方法能够从UI组件生成容器组件；但容器组件的定位是处理数据、响应行为，所以，须要对UI组件添加额外的东西，即mapStateToProps和mapDispatchToProps，也就是在组件外加了一层state；
    4. mapStateToProps：一个函数， 创建一个从（外部的）state对象到（UI组件的）props对象的映射关系。 它返回了一个拥有键值对的对象；
    5. mapDispatchToProps：用来创建UI组件的参数到store.dispatch方法的映射。 它定义了哪些用户的操做应该看成动做，它能够是一个函数，也能够是一个对象。

       以上，redux的出现已经可使react创建起一个大型应用，并且可以很好的管理状态、组织代码，可是有个棘手的问题没有很好地解决，那就是异步；    

【redux-saga】：

  1. 定位：react中间件；旨在于更好、更易地解决异步操做（action）；redux-saga至关于在Redux原有数据流中多了一层，对Action进行监听，捕获到监听的Action后能够派生一个新的任务对state进行维护；

  1. 特色：经过 Generator 函数来建立，能够用同步的方式写异步的代码；

  1. API：

    1. Effect： 一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息。全部的Effect 都必须被 yield 才会执行。
    2. put：触发某个action，做用和dispatch相同；

【dva】

  1. 定位：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，而后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，因此也能够理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux-saga；

  1. 核心：

    1. State：一个对象，保存整个应用状态；
    2. View：React 组件构成的视图层；
    3. Action：一个对象，描述事件
    4. connect 方法：一个函数，绑定 State 到 View
    5. dispatch 方法：一个函数，发送 Action 到 State

  1. model：dva 提供 app.model 这个对象，全部的应用逻辑都定义在它上面。

  1. model内容：

    1. namespace：model的命名空间；整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成；
    2. state：该命名空间下的数据池；
    3. effects：反作用处理函数；
    4. reducers：等同于 redux 里的 reducer，接收 action，同步更新 state；
    5. subscriptions：订阅信息；
联系我们 沪ICP备13005482号-10