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

时间：2022-01-02 09:38:57

【react】

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

  1. 特点：它采用声明范式来描述应用，建立虚拟dom，支持JSX语法，通过react构建组件，能够很好的去复用代码；

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

【redux】

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

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

  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】

  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：订阅信息；
标签：

相关文章