react前端框架dva(二)

news/2024/7/19 14:05:36 标签: react, js, dva, antd, html
htmledit_views">

html" title=dva>dva的8个基础概念:

数据流向

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

Models

State

type State = any

State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

html" title=dva>dva 中你可以通过 html" title=dva>dva 的实例属性 _store 看到顶部的 state 数据,但是通常你很少会用到:

const app = html" title=dva>dva();
console.log(app._store); // 顶部的 state 数据

Action

type AsyncAction = any

Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。无论是从 UI 事件、网络回调,还是 WebSocket 等数据源所获得的数据,最终都会通过 dispatch 函数调用一个 action,从而改变对应的数据。action 必须带有 type 属性指明具体的行为,其它字段可以自定义,如果要发起一个 action 需要使用 dispatch 函数;需要注意的是 dispatch 是在组件 connect Models以后,通过 props 传入的。

dispatch({
  type: 'add',
});

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#dispatch-%E5%87%BD%E6%95%B0" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">dispatch 函数

type dispatch = (a: Action) => Action

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

html" title=dva>dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects,常见的形式如:

html" title=js>js" style="margin-bottom:16px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
dispatch({
  type: 'user/add', // 如果在 model 外调用,需要添加 namespace
  payload: {}, // 需要传递的信息
});

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#reducer" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">Reducer

type Reducer<S, A> = (state: S, action: A) => S

Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中:

html" title=js>js" style="margin-bottom:16px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
[{x:1},{y:2},{z:3}].reduce(function(prev, next){
    return Object.assign(prev, next);
})
//return {x:1, y:2, z:3}

html" title=dva>dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutable data,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#effect" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">Effect

Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

html" title=dva>dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostly adequate guide to FP,或者它的中文译本JS函数式编程指南。

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#subscription" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">Subscription

Subscriptions 是一种从  获取数据的方法,它来自于 elm。

Subscription 语义是订阅,用于订阅一个数据源,然后根据条件 dispatch 需要的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。

html" title=js>js" style="margin-bottom:16px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
import key from 'keymaster';
...
app.model({
  namespace: 'count',
  subscriptions: {
    keyEvent(dispatch) {
      key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
    },
  }
});

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#router" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">Router

这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 History API 可以监听浏览器url的变化,从而控制路由相关操作。

html" title=dva>dva 实例提供了 router 方法来控制路由,使用的是html" title=react>react-router。

html" title=js>js" style="margin-bottom:16px;color:rgb(36,41,46);font-family:'-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
import { Router, Route } from 'html" title=dva>dva/router';
app.router(({history}) =>
  <Router history={history}>
    <Route path="/" component={HomePage} />
  </Router>
);

html" title=dva>dvahtml" title=js>js/html" title=dva>dva/blob/master/docs/Concepts_zh-CN.md#route-components" class="anchor" style="color:rgb(3,102,214);float:left;padding-right:4px;margin-left:-20px;line-height:1;">Route Components

在组件设计方法中,我们提到过 Container Components,在 html" title=dva>dva 中我们通常将其约束为 Route Components,因为在 html" title=dva>dva 中我们通常以页面维度来设计 Container Components。

所以在 html" title=dva>dva 中,通常需要 connect Model的组件都是 Route Components,组织在/routes/目录下,而/components/目录下则是纯组件(Presentational Components)。

继续学习,下一章:html" title=react>react前端框架html" title=dva>dva(三)


http://www.niftyadmin.cn/n/719475.html

相关文章

java实现文件复制粘贴功能

java编程思想中讲到了IO流的思想&#xff0c;以前对于java基础总是不够深入&#xff0c;浅尝辄止&#xff0c;如今碰到语句插桩的时候就感到书到用时方恨少啊&#xff01; 文件的复制涉及到源文件和新文件&#xff08;无需手动创建&#xff09;&#xff0c;给出源文件的路径和文…

react前端框架dva(三)

API 输出文件 dva 默认输出文件。 dva/router 默认输出 react-router 接口&#xff0c; react-router-redux 的接口通过属性 routerRedux 输出。 比如&#xff1a;import { Router, Route, routerRedux } from dva/router;dva/fetch 异步请求库&#xff0c;输出 isomorphic-fet…

Plone中用户、组和权限管理

Users, Groups, and Permissions 来源&#xff1a;http://weblion.psu.edu/services/documentation/bootcamp-beginners/users-groups-permissions Controlling who can do what on your Plone siteAlso available in presentation mode… Users Anonymous Those who cannot l…

获取记录集中不同组的特定记录

/****** Script for SelectTopNRows command from SSMS ******/ /**求序列号&#xff08;[Serial]&#xff09;相同&#xff0c;编号&#xff08;[Num]主键&#xff09;最大者的记录**/SELECT [Num] --主键,[Serial],[Depart],[Time] --非主键(不同序列号的时间可能相同)FRO…

pronunciation from Longman

1. as England 中有个schwa as old as I am 前一个as 是schwa 后一个和d连读发梅花音 2 make your presence felt 3 almost 4 excellence 5 performance 6 dramatically 第一个a是schwa 第二个是fan 值得注意的是第三个a不发音&#xff0c;它的音标是/drəˈmtɪkli/ 7 spend …

react前端框架dva(四)

dva.js 知识导图 不知大家学 react 或 dva 时会不会有这样的疑惑&#xff1a; es6 特性那么多&#xff0c;我需要全部学会吗?react component 有 3 种写法&#xff0c;我需要全部学会吗?reducer 的增删改应该怎么写?怎么做全局/局部的错误处理?怎么发异步请求?怎么处理复杂…

解决方案:Oracle导入DMP文件后,注释和CLOB字段乱码

2019独角兽企业重金招聘Python工程师标准>>> 这两天在公司&#xff0c;遇到奇怪的问题&#xff1a; 从一个oracle数据库导出带有CLOB字段表的DMP文件&#xff0c;然后再导入进另一个Oracle数据库&#xff0c;数据中除了CLOB字段中的中文&#xff0c;其他都是正常的…

如何更换一个网站的Plone标志

第一步&#xff1a;访问Plone的Zope的管理界面.登录后到您的Plone安装主画面中&#xff0c;点击“站点设置”链接&#xff0c;在右上角的角落位置.在下面的屏幕上&#xff0c;点击“Zope管理界面”链接在左侧导航栏的底部。第二步&#xff1a;找到控制面板的图像.点击“portal_…