简述react、redux、react-redux、redux-saga、dva之间的关系
<p>【react】</p><ol start="1">
<li>
<p>定位：React 是一个用于构建用户界面的JavaScript库。</p>
</li>
</ol><ol start="2">
<li>
<p>特点：它采用声明范式来描述应用，建立虚拟dom，支持JSX语法，通过react构建组件，能够很好的去复用代码；</p>
</li>
</ol><ol start="3">
<li>
<p>缺点：react抽离了dom，使我们构建页面变得简单，但是对于一个大型复杂应用来说，只有dom层的便捷是不够的，如何组织、管理应用的代码，如何在组件件进行有效通信，这些它都没有解决；因此，它还需要一个前端架构才能应对大型应用；</p>
</li>
</ol>
<p>【redux】</p>
<ol start="1">
<li>
<p>定位：它是将flux和函数式编程思想结合在一起形成的架构；</p>
</li>
</ol><ol start="2">
<li>
<p>思想：视图与状态是一一对应的；所有的状态，都保存在一个对象里面；</p>
</li>
</ol><ol start="3">
<li>
<p>API：</p>
<ol>
<li>store：就是一个数据池，一个应用只有一个； </li>
<li>state：一个 State 对应一个 View。只要 State 相同，View 就相同。</li>
<li>action：State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。Action 是一个对象。其中的type<code></code>属性是必须的，表示 Action 的名称。其他属性可以自由设置。</li>
<li>dispatch：它是view发出action的唯一方法；</li>
<li>reducer：view发出action后，state要发生变化，reducer就是改变state的处理层，它接收action和state，通过处理action来返回新的state；</li>
<li>subscribe：监听。监听state，state变化view随之改变；</li>
</ol></li>
</ol>
<p>【react-redux】</p>
<ol start="1">
<li>
<p>定位：react-redux是为了让redux更好的适用于react而生的一个库，使用这个库，要遵循一些规范；</p>
</li>
</ol><ol start="2">
<li>
<p>主要内容</p>
<ol>
<li>UI组件：就像一个纯函数，没有state，不做数据处理，只关注view，长什么样子完全取决于接收了什么参数（props）</li>
<li>容器组件：关注行为派发和数据梳理，把处理好的数据交给UI组件呈现；React-Redux规定，所有的UI组件都由用户提供，容器组件则是由React-Redux自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。</li>
<li>connect：这个方法可以从UI组件生成容器组件；但容器组件的定位是处理数据、响应行为，因此，需要对UI组件添加额外的东西，即mapStateToProps和mapDispatchToProps，也就是在组件外加了一层state；</li>
<li>mapStateToProps：一个函数， 建立一个从（外部的）state对象到（UI组件的）props对象的映射关系。 它返回了一个拥有键值对的对象；</li>
<li>mapDispatchToProps：用来建立UI组件的参数到store.dispatch方法的映射。 它定义了哪些用户的操作应该当作动作，它可以是一个函数，也可以是一个对象。</li>
</ol></li>
</ol>
<p> 以上，redux的出现已经可以使react建立起一个大型应用，而且能够很好的管理状态、组织代码，但是有个棘手的问题没有很好地解决，那就是异步； </p>
<p>【redux-saga】：</p>
<ol start="1">
<li>
<p>定位：react中间件；旨在于更好、更易地解决异步操作（action）；redux-saga相当于在Redux原有数据流中多了一层，对Action进行监听，捕获到监听的Action后可以派生一个新的任务对state进行维护；</p>
</li>
</ol><ol start="2">
<li>
<p>特点：通过 Generator 函数来创建，可以用同步的方式写异步的代码；</p>
</li>
</ol><ol start="3">
<li>
<p>API：</p>
<ol>
<li>Effect： 一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息。所有的Effect 都必须被 yield 才会执行。</li>
<li>put：触发某个action，作用和dispatch相同；</li>
</ol></li>
</ol>
<p>【dva】</p>
<ol start="1">
<li>
<p>定位：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux-saga；</p>
</li>
</ol><ol start="2">
<li>
<p>核心：</p>
<ol>
<li>State：一个对象，保存整个应用状态；</li>
<li>View：React 组件构成的视图层；</li>
<li>Action：一个对象，描述事件</li>
<li>connect 方法：一个函数，绑定 State 到 View</li>
<li>dispatch 方法：一个函数，发送 Action 到 State</li>
</ol></li>
</ol><ol start="3">
<li>
<p>model：dva 提供 app.model 这个对象，所有的应用逻辑都定义在它上面。</p>
</li>
</ol><ol start="4">
<li>
<p>model内容：</p>
<ol>
<li>namespace：model的命名空间；整个应用的 State，由多个小的 Model 的 State 以 namespace 为 key 合成；</li>
<li>state：该命名空间下的数据池；</li>
<li>effects：副作用处理函数；</li>
<li>
<div>reducers：等同于 redux 里的 reducer，接收 action，同步更新 state；</div>
</li>
<li>
<div>subscriptions：订阅信息；</div>
</li>
</ol></li>
</ol><br><br>
来源：https://www.cnblogs.com/shzj/p/11174802.html
頁:
[1]