• 先初始化一个react native的项目 npm install -g yarn react-native-cli react-native init AwesomeProject 准备安装dvareact-navigation 1.yarn add dva-core 2.yarn addreact-redux 3.yarn add react-...

    先初始化一个react native的项目

    npm install -g yarn react-native-cli

    react-native init AwesomeProject

    准备安装dva 、react-navigation

    1.yarn add  dva-core

    2.yarn add react-redux

    3.yarn add react-navigation

    4.yarn add react-native-gesture-handler

    5.react-native link react-native-gesture-handler

    然后是集成步骤

    1.集成dva,使用dva-core和react-redux,新建app文件夹

    app文件夹中新建.root.js

    import * as React from 'react';
    import indexModel from './models/index'
    import { Provider  } from 'react-redux';
    import App from './routes'//    这个是react-navigation路由文件
    
    import { create } from 'dva-core';
    
    const models = [indexModel];
    
    const app = create(); // 创建dva实例,可传递配置参数。https://dvajs.com/api/#app-dva-opts
    
    models.forEach((o) => { // 装载models对象
      app.model(o);
    });
    
    app.start(); // 实例初始化
    
    const store = app._store; // 获取redux的store对象供react-redux使用
    
    export default class Container extends React.Component {
      render() {
        return (
          <Provider store={store}>//    注入dva
            <App/>
          </Provider>
        );
      }
    }
    

    2.编写路由,react-navigation

    app文件夹下新建routes.js

    import React, { PureComponent } from 'react'
    import {
      TabBarBottom, addNavigationHelpers, createSwitchNavigator,
      createBottomTabNavigator, createStackNavigator, createAppContainer
    } from 'react-navigation'
    import AuthLoadingScreen from './components/loading/index'
    import {StatusBar, View, Platform} from "react-native";
    
    import Home from './pages/Home/Home'
    import Order from './pages/Order/Order'
    import Get from './pages/Get/Get'
    import Register from './pages/Register/index'
    import Establish from './pages/Establish/index'
    import Restore from './pages/Restore/index'
    
    const AuthStack = createStackNavigator(
      {
        Register: Register,
        Establish: Establish,
        Restore: Restore
      },
    );
    const HomeNavigator = createBottomTabNavigator(
      {
        Home: { screen: Home },
        Order: { screen: Order },
        Get: { screen: Get }
      }
    );
    
    const AppNavigation = createSwitchNavigator(
      {
        App: HomeNavigator,
        Auth: AuthStack,
        AuthLoading: AuthLoadingScreen
      },
      {
        initialRouteName: 'AuthLoading',
      }
    );
    
    const App = createAppContainer(AppNavigation);
    
    export default App
    

    3.链接项目

    根目录下的index.js

    import {AppRegistry} from 'react-native';
    import App from './app/root';
    import {name as appName} from './app.json';
    
    AppRegistry.registerComponent(appName, () => App);

    最后,如何在组件中使用dva,点我的另外一篇文章----->点这里

    展开全文
  • 学习react前端框架dva

    2019-03-18 13:18:40
    dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dvareact 和 redux 的最佳实践”。 一.介绍 1.What's dva ? dva 是基于现有应用架构 (redux + react-router...

     dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”。


    一.介绍

    1.What's dva ?

    dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心的是提供了 app.model 方法,用于把 reducer, initialState, action, saga 封装到一起。官网    dva = React-Router + Redux + Redux-saga

    2.安装

    1.安装 dva-cli
    npm install dva-cli -g
    2.扎到安装项目的目录
    cd ylz_project/my_reactdemo
    3.创建项目:Dva-test项目名
    dva new Dva-test
    4.进入项目
    cd Dva-test
    5.启动项目
    npm  start

     成功。

    3.项目结构

    二.概念

    下面都是官网的知识点

    (1).数据流向

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

    (2).Model

    model 是 dva 中最重要的概念,Model 非 MVC 中的 M,而是领域模型,用于把数据相关的逻辑聚合到一起,几乎所有的数据,逻辑都在这边进行处理分发

    1.State

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

    // dva()初始化
    const app = dva({
      initialState: { count: 1 },
    });
    
    // modal()定义事件
    app.model({
      namespace: 'count',
      state: 0,
    });
    
    //初始值,我们在 dva() 初始化的时候和在 modal 里面的 state 对其两处进行定义,其中  modal 中的优先级低于传给  dva() 的  opts.initialState

    2.Action   :type dispatch = (a: Action) => Action

    Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。表示操作事件,可以是同步,也可以是异步
    action 的格式如下,它需要有一个 type ,表示这个 action 要触发什么操作;payload 则表示这个 action 将要传递的数据

    我们通过 dispatch 方法来发送一个 action

    /*Action
    Action 表示操作事件,可以是同步,也可以是异步
     {
      type: String,
      payload: data
    }
    */
    dispatch(Action);
    dispatch({ type: 'todos/add', payload: 'Learn Dva' });
    

    其实我们可以构建一个Action 创建函数,如下 

    const  USER-LIST  = 'USER-LIST'//用户列表
    //action 函数
    function  user(data){
    	return {type:MSG_READ ,payload:data}
    }
    
    dispatch(user(data))

    3.dispatch 函数: type dispatch = (a: Action) => Action

    dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
    在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects,常见的形式如:

    dispatch({
      type: 'user/add', // 如果在 model 外调用,需要添加 namespace
      payload: {}, // 需要传递的信息
    });

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

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

    //state的值
    const initState = {
    	users:{},//用户信息
    }
    
    //1 reducer 函数
    export function chat(state=initState, action){
    	switch(action.type){
    		case USER_LIST:
    			return {...state,users:action.payload.users}
    		default:
    		 	return state
    	}
    }

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

    [{x:1},{y:2},{z:3}].reduce(function(prev, next){
        return Object.assign(prev, next);
    })
    //return {x:1, y:2, z:3}

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

    5.Effect

    用于处理异步操作和业务逻辑,不直接修改 state,简单的来说,就是获取从服务端获取数据,并且发起一个 action 交给 reducer 的地方。基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。

    常见的操作:

    1.put
    用于触发 action 。
    yield put({ type: 'todos/add', payload: 'Learn Dva' });
     
    2.call
    用于调用异步逻辑,支持 promise 。
    const result = yield call(fetch, '/todos');
     
    3.select
    用于从 state 里获取数据。
    const todos = yield select(state => state.todos);
    

    简单的理解Redux-Saga

    6.subscription

    subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、当前页面的url、服务器的 websocket 连接、history 路由变化等等。

    一般格式是:

    subscriptions: {
        setup({ dispatch, history }) { 
    		
        },
    },

    异步数据初始化
    比如:当用户进入 /users 页面时,触发 action users/fetch 加载用户数据。 

    app.model({
      subscriptions: {
        setup({ dispatch, history }) {
          history.listen(({ pathname }) => {
            if (pathname === '/users') {
              dispatch({
                type: 'users/fetch',
              });
            }
          });
        },
      },
    });

     键盘事件

    import key from 'keymaster';
    ...
    app.model({
      namespace: 'count',
      subscriptions: {
        keyEvent({dispatch}) {
          key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
        },
      }
    });

    (3).Router   表示路由配置信息

    项目中的 router.js。

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

    Route Component 表示 Router 里匹配路径的 Component,通常会绑定 model 的数据

    import { connect } from 'dva';
    
    function App() {
      return <div>App</div>;
    }
    
    function mapStateToProps(state) {
      return { todos: state.todos };
    }
    
    export default connect(mapStateToProps)(App);
    

    三.Dva API

    官网.

    1.app = dva(Opts):创建应用,返回 dva 实例。(注:dva 支持多实例)​

    opts 包含:
        history:指定给路由用的 history,默认是 hashHistory      关于react-router中的hashHistorybrowserHistory的区别大家可以看:react-router
        initialState:指定初始数据,优先级高于 model 中的 state,默认是 {},但是基本上都在modal里面设置相应的state。
    如果要配置 history 为 browserHistory,可以这样:

    import createHistory from 'history/createBrowserHistory';
    const app = dva({
      history: createHistory(),
    });

    另外,出于易用性的考虑,opts 里也可以配所有的 hooks ,下面包含全部的可配属性:

    const app = dva({
      history,
      initialState,
      onError,
      onAction,
      onStateChange,
      onReducer,
      onEffect,
      onHmr,
      extraReducers,
      extraEnhancers,
    });

     2.app.use(Hooks):配置 hooks 或者注册插件。  

    这里最常见的就是dva-loading插件的配置,就是引入第三方插件的时候使用

    import createLoading from 'dva-loading';
    ...
    app.use(createLoading(opts));

    3.app.model()

    model 是 dva 中最重要的概念。 这个是你数据逻辑处理,数据流动的地方。

    (1).5个属性

    A.namespace
    model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。
    B.state
    初始值,优先级低于传给 dva() 的 opts.initialState。

    const app = dva({
      initialState: { count: 1 },
    });
    app.model({
      namespace: 'count',
      state: 0,
    });
    此时,在 app.start() 后 state.count 为 1 。

    同上面
    C.reducer
    D.Effect
    E.subscription

    总结:

    Model 对象的属性

    1. namespace: 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
    2. state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
    3. reducers: Action 处理器,处理同步动作,用来算出最新的 State
    4. effects:Action 处理器,处理异步动作

    4.app.unmodel(namespace)   取消 model 注册

    5.app.router(({ history, app }) => RouterConfig)
    注册路由表,我们做路由跳转的地方。一般是这样写:

    import { Router, Route } from 'dva/router';
    app.router(({ history }) => {
      return (
        <Router history={history}>
          <Route path="/" component={App} />
        <Router>
      );
    });

    推荐把路由信息抽成一个单独的文件,这样结合 babel-plugin-dva-hmr 可实现路由和组件的热加载。

    比如:app.router(require('./router'));

    但是如果你的项目特别的庞大,我们就要考虑到相应的性能的问题,就要router按需加载的写法。 

    6.app.start(selector)

    启动应用,项目跑起来
    app.start('#root');

    四.安装插件

    1.使用 antd

    A.antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的,

    npm install antd babel-plugin-import --save

    B.编辑 .webpackrc,使 babel-plugin-import 插件生效。

    {
      "extraBabelPlugins": [
        ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
      ]
    }

    2.安装antd-mobile

    npm install antd-mobile --save 

    直接引用css就好:import 'antd-mobile/dist/antd-mobile.css'

    按需加载:

    安装babel-plugin-import:   cnpm install babel-plugin-import --save

    找到根目录下的.webpackrc文件,并在该文件中添加以下代码

    {
    	"extraBabelPlugins": [
    	    ["import", { "libraryName": "antd-mobile", "style": "css" }]
    	]
    }

    五.操作

    官网:操作         上手快速

    一.路由定义:router.js
    	import React from 'react';
    	import { Router, Route, Switch } from 'dva/router';
    	import User from './routes/user';
    
    	function RouterConfig({ history }) {
    		return (
    			<Router history={history}>
    			  	<Switch>
    			    	<Route path="/user" exact component={User} />
    			  	</Switch>
    			</Router>
    		);
    	}
    
    	export default RouterConfig;
    	浏览器访问:http://localhost:8000/#/user
    
    
    二.定义 model/user:设置state的值
    
       export default {
    	  	namespace: 'user',
    	  	state: {
    		    list: [],
    		    total: null,
    		    loading: false, // 控制加载状态
    			current: null, // 当前分页信息
    			currentItem: {}, // 当前操作的用户对象
    		},
    	}
    
    三.页面组件定义:
    1. routes/user
    	import React from 'react';
    	import { connect } from 'dva';
    	import styles from './user.css';
    	import UserList from '../components/users/userList';
    	import UserSearch from '../components/users/userSearch';
    	import UserModal from '../components/users/userModal';
    
    	function User() {
    		const userSearchProps = {};
    		const userListProps = {};
    		const userModalProps = {};
    
    		return (
    			<div className={styles.normal}>
    			   {/* 用户筛选搜索框 */}
    				<UserSearch {...userSearchProps} />
    				{/* 用户信息展示列表 */ }
    				<UserList {...userListProps} />
    				{/* 添加用户 & 修改用户弹出的浮层 */ }
    				<UserModal {...userModalProps} />
    			</div>
    		);
    	}
    
    
    	export default connect()(User);
    
    2.完成component页面:userList  userSearch userModal
    	import React, { PropTypes } from 'react';
    	import { Table, message, Popconfirm } from 'antd';
    
    	const UserList = ({total,current,loading,dataSource}) => {
    		const columns=[{}];
    		const pagination = {};
    		return (
    			<div>
    		      	<Table  columns={columns}
    			        dataSource={dataSource}
    			        loading={loading}
    			        rowKey={record => record.id}
    			        pagination={pagination} />
    		    </div>
    		);
    	}
    
    	export default userList;
    
    
    注意:routes可以简单的理解是页面组件   components可以理解是模块组件, 
     routes里面引用多个components的组件
    
    
    四.更新state:—》model/user里面完成 reducers  计算新的state
    
    	export default {
    	  	namespace: 'user',
    		reducers: {
    		     // 使用静态数据返回
    		    querySuccess(state){
    		      	const mock = {
    			        total: 3,
    			        current: 1,
    			        loading: false,
    			        list: [
    						{
    							id: 1,
    							name: '张三',
    							age: 23,
    							address: '成都',
    						},
    			        ]
    			    };
    		      	return {...state, ...mock, loading: false};
    		    },
    		    createSuccess(){},
    	    	deleteSuccess(){},
    	    	updateSuccess(){},
    		}
    	}
    
    五.关联Model数据:把model中计算的新state的值  关联到组件 
        =》返回routes/user 
    
    	import { connect } from 'dva';
    	function User({ location, dispatch, user }) {
    		//Model中state 赋值到 { loading, list, total, current,currentItem, modalVisible, modalType}
    		const {
    		    loading, list, total, current,
    		    currentItem, modalVisible, modalType
    		} = user;
    
    		const userListProps = {
    			dataSource: list,
    			total,
    			loading,
    			current,
    		};		
    		const userSearchProps = {};
    		const userModalProps = {};
    
    		return (
    			<div className={styles.normal}>
    			   {/* 用户筛选搜索框 */}
    				<UserSearch {...userSearchProps} />
    				{/* 用户信息展示列表 */ }
    				<UserList {...userListProps} />
    				{/* 添加用户 & 修改用户弹出的浮层 */ }
    				<UserModal {...userModalProps} />
    			</div>
    		);
    	}
        //指定订阅数据,这里关联了model中 user
    	function mapStateToProps({ user }) {
    	  return {user};
    	}
    	//建立数据关联关系
    	const User = connect(mapStateToProps)(User);
    	export default  User;
    
    注意:1.记得 index.js 入口文件处要要关联model :app.model(require('./models/user')); 否则获取不到数据
    
    2.数据关联以后,就可以通过 props 访问到 model 的数据了,
    而 UserList 展示组件的数据,也是 routes/user 组件 通过 props 传递的过来的。
    
    六.数据关联后,就要更新reducer的数据 :model/user
    调用 reducers呢,就是需要发起一个 action。  这边可以使用Subscription 订阅 监听路由的改变
    subscriptions: {
    	    setup({ dispatch, history }) {
    		    history.listen(location => {
    		        if (location.pathname === '/user') {
    		          	dispatch({
    		            	type: 'querySuccess',
    		            	payload: {}
    		          	});
    		        }
    		    });
    	    },
      	},
    
    
    七.异步处理:返回model  effects: {...}的操作
    
        	import { hashHistory } from 'dva/router';
    	import { query } from '../services/user';
    	export default {
    		namespace: 'user',
    		reducers: {
    			showLoading(state, action){
    				return { ...state, loading: true };
    			},// 控制加载状态的 reducer
    			showModal(){}, // 控制 Modal 显示状态的 reducer
    			hideModal(){},
    			// 使用服务器数据返回
    			querySuccess(state, action){
    			  return {...state, ...action.payload, loading: false};
    			},
    		},
    		effects: {
    			*query({ payload }, { select, call, put }) {
    				yield put({ type: 'showLoading' });
    				const { data } = yield call(query);
    				if (data) {
    					yield put({
    						type: 'querySuccess',
    						payload: {
    							list: data.data,
    							total: data.page.total,
    							current: data.page.current
    						}
    					});
    				}
    			},
    		}
    	}
    
    八.后端数据请求
    1.代理 
     在.webpackrc 文件里面加
    "proxy": {
    	  	"/api": {
    	    	"target": "http://localhost:8080",
    	    	"changeOrigin": true,
    	    	"pathRewrite": { 
    	    		"^/api" : "" 
    	    	}
    	  	}
    	},
    
    或是  安装  roadhorg    在.roadhogrc.js里面做代理
    
    2.在services/user 做交互   
    
    	/*与后台系统的交互)
    	request 是我们封装的一个网络请求库
    	qs是一个npm仓库所管理的包  对请求返回的数据进行处理
    */
    	import request from '../utils/request';
    	import qs from 'qs';
    
    	export async function query(params) {
    	  return request(`/api/user?${qs.stringify(params)}`);
    	}

    执行上面8步骤就差不多

    六.补充

    (一).dva 2.0中如何使用代码进行路由跳转

    react-router@4.0 让路由变得更简单,最大特点就是可以路由嵌套。由于 dva 将react-router-domreact-router-redux都封装到了 dva/router 中,在使用 react-router@4.0 和 redux 里面的东西时只需引入 dva/router 这个包即可。react-router@4.0 文档 API

    dva 中使用 router4.0

    router.js:

    import React from 'react';
    import { Router, Route, Switch,routerRedux } from 'dva/router';
    import BasicLayout from '../layouts/BasicLayout'
    
    
    const { ConnectedRouter } = routerRedux;
    function RouterConfig({ history }) {
    	return (
    		<ConnectedRouter history={history}>
            	<Route path="/" component={BasicLayout} />
          	</ConnectedRouter>
    	);
    }
    
    export default RouterConfig;
    

    Route 为 react-router-dom 内的标签
    ConnectedRouter 为 react-router-redux 内的对象 routerRedux 的标签,作用相当于 react-router-dom 中的 BrowserRouter 标签,作用为连接 redux 使用
     

    1.路由跳转

    引入 dva/router,使用 routerReux 对象的 push 方法控制,值为要跳转的路由地址,与根目录下 router.js 中配置的路由地址是相同的。routerReux 就是上面 dva/router 第二个导出的 react-router-redux 包对象。

    此处示例为跳转到 /user 路由。

    // models > app.js
    import { routerRedux } from 'dva/router';
    
    export default {
      // ...
      effects: {
          // 路由跳转
          * redirect ({ payload }, { put }) {
            yield put(routerRedux.push('/user'));
          },
      }
      // ...
    }
    

    2.携带参数
    有时路由的跳转还需要携带参数。

    3.传参:
    routerRedux.push 方法的第二个参数填写参数对象。此处示例表示跳转到 /user 路由,并携带参数 {name: 'dkvirus', age: 20}。

    // models > app.js
    import { routerRedux } from 'dva/router';
    
    export default {
      // ...
      effects: {
          // 路由跳转
          * redirect ({ payload }, { put }) {
            yield put(routerRedux.push('/user', {name: 'dkvirus', age: 20}));
          },
      }
      // ...
    }
    

    接收参数: 

    // models > user.js
    export default {
      subscriptions: {
        /**
         * 监听浏览器地址,当跳转到 /user 时进入该方法
         * @param dispatch 触发器,用于触发 effects 中的 query 方法
         * @param history 浏览器历史记录,主要用到它的 location 属性以获取地址栏地址
         */
        setup ({ dispatch, history }) {
          history.listen((location) => {
            console.log('location is: %o', location);
            console.log('重定向接收参数:%o', location.state)
            // 调用 effects 属性中的 query 方法,并将 location.state 作为参数传递 
            dispatch({
              type: 'query',
              payload: location.state,
            })
          });
        },
      },
      effects: {
        *query ({ payload }, { call, put }) {
           console.log('payload is: %o', payload);
        }
      }
      // ...
    }
    

    在 user.js 中 subscriptions 属性会监听路由。当 app.js 中通过代码跳转到 /user 路由,models>user.js>subscriptions 属性中的 setup 方法会被触发,location 记录着相关信息。打印如下:

    location is: Object
        hash: ""
        key: "kss7as"
        pathname: "/user"
        search: ""
        state: {name: "bob", age: 21}
    重定向接收参数:Object
        age:21
        name:"bob"

     可以看到 location.state 就是传递过来的参数。在 subscriptions 中可以使用 dispatch 触发 effects 中的方法同时传递参数。

    (三). 解决组件动态加载问题的 util 方法

    import dynamic from 'dva/dynamic';

    opts 包含:

    • app: dva 实例,加载 models 时需要
    • models: 返回 Promise 数组的函数,Promise 返回 dva model
    • component:返回 Promise 的函数,Promise 返回 React Component

    使用如下:

    mport dynamic from 'dva/dynamic'
    
    {
    routeArr.map((item, key) => {
    	return <Route key={key} exact path={item.path} component={dynamic({ //保证路由的唯一性 exact key
    		app,
    		model: item.models,
    		component: item.component,
    	})} />
    })
    
    }

    (四).React.Component与React.PureComponent的区别


    React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一,易于实施,只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate 函数,节省了点代码。

        React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过prop和state的浅对比来实现 shouldComponentUpate()
    如果React组件的 render() 函数在给定相同的props和state下渲染为相同的结果,在某些场景下你可以使用 React.PureComponent 来提升性能

    七.参考

    1. Dva-React 应用框架在蚂蚁金服的实践
    2.   dva.js 知识导图     
    3. redux-saga   
    4.  UMI       
    5. dva理论到实践——帮你扫清dva的知识盲点      
    6. History API   
    7. redux docs 中文
    8. roadhog介绍
    9. 基于dva-cli&antd的react项目实战
    10. 10分钟 让你dva从入门到精通
    11. 上手快速
    12. async 函数的含义和用法
    13. 基于 dva 创建 antd-mobile 的项目

    八.案例

    1.后台管理系统

    展开全文
  • dva + react hooks实战Demo

    2020-06-21 16:16:52
    dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-router和fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量...

    前言

    dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量的样板代码,对开发者而言使用体验十分的不友好.而dva将这些繁杂的工作封装到了底层去实现,开发者只需要调用它提供的几个简单Api就能实现完全相同的功能,从而大大的提升了开发效率.

    本篇博文将从实战的角度将dva和目前流行的react hooks相结合开发一款Demo应用,在实际开发中去体会dva的使用方法和其带来的变化.

    dva官方文档

    Demo源代码

     

    需求分析

    Demo最终效果:

                                              

     

    • Demo总共有三张页面:首页,商品详情页和登录页.

    • 首页有"猜你喜欢"和"今日推荐"两个数据列表.数据从服务器端获取并渲染出来.

    • 点击列表项会获取到商品id进入到商品详情页面并展现出商品的详细信息.

    • 点击头部的登录按钮会进入登录页面,用户登陆后会持久化保存登录状态.

     

    Dva概念简述

     

    1.Dav项目结构描述

                                                                             

    • 按照官网文档的步骤下载完项目,它的结构如上图所示.
    • assets是静态资源文件夹,components放置一些全局组件
    • routes里面创建具体的页面.services里面编写请求后台数据接口的函数
    • utils下面的request.js是dva内部对fetch做的封装
    • index.js是应用的入口,router.js是路由文件
    • models文件夹是开发环节中最核心的部分,它里面主要编写状态处理的逻辑.以前我们编写redux的代码现在全部都放在        models里面去编写.

     

    2.models文件描述

    1.如果想新建一个页面,首先在routes文件下面创建HomePage编写好样式代码,随后在router.js中注册路由,如此该页面就能通过url访问了.如果我们想将页面的状态放到redux中管理,需要在models下面创建一个home.js.

    
    import { getList } from "../services/api";
    export default {
          namespace: 'home', 
          state: {
              likes:null,
              recommends:null
          },
          effects: {
            *getListHttp({ payload }, { call, put }) {  // eslint-disable-line
              const data = yield call(getList,payload);
              yield put({ type: 'getList',payload:data.data});
            },
          },
          reducers: {
            getList(state, action) {
              return { ...state, likes:action.payload.likes,recommends:action.payload.recommends };
            },
          },
          subscriptions: {
           keyEvent({dispatch,history}) {
             
           }
         }  
    };

    2.这个模型文件最终导出来的一个对象.namespace是命名空间,页面的组件如果想要获取此model中的state和函数需要通过namespace来获取.

    •  页面上获取数据状态

    • 页面上调用action修改state.只要在页面上用connect包裹的组件,props里面就会拥有dispatch方法.dispatch可以调用model中的同步和异步的方法.type是必传的参数,home是命名空间,getListHttp是model中定义的函数.payload是用户自定义传递的可选参数.只要调用了dispatch方法,对应的model中相应的函数就会被调用.

    3.我们拉回来继续分析models中的数据结构.state不言而喻是定义的数据状态,reducers里面定义的是操作redux中state的同步方法.在reducers里面的每个函数中,第一个参数state是数据状态,第二个参数action里面包含了用户在页面上调用dispatch函数时传递过来的参数.我们最终要返回一个新的state回去才能改变redux中的state.

    4.effects里面盛放的也是函数,但是呢它和reducers不同.reducers里面装的是同步函数,effects里面放的是异步函数(比如请求服务器端数据的操作).

    • effects中定义的函数的第一个参数还是用户在页面上执行disptach方法传递过来的action,action里面可能含有用户的自定义参数payload.

    • 函数的第二个参数call和put的作用分别是什么呢?call是用来调用异步方法,比如上面的代码中getList就是一个请求服务器端数据的异步函数.使用call来调用它请求服务器端的数据,用yield将线程阻塞在那里,等到服务器返回数据了再往下执行代码.

    • 现在服务器端已经返回数据了,我现在要对这些数据做下处理存储到redux中去.此时就可以使用put来调用reducers中的同步函数来操作redux中的状态.

    5. subscriptions看自己的需求来进行配置,它不是必须的.它里面定义的函数如果监听到页面上用dispatch派发了action,那么这些函数都会执行,但是呢只会执行一次.在实际应用场景中,可以在subscriptions里面的函数利用其参数history可以编写一些监听路由变化的方法.

     

    首页开发

     

                                                        

    说明

    通过上面对dva基本概念的讲述我们可以来了解一下页面组件如何与models进行通信的.

    • 从dva中导出connect并包裹页面组件.这样就可以使用dispatch来派发action来触发model中定义的同步或者异步函数.
    • 编写mapStateToProps函数放置到connect中,页面组件就能从props获取到redux的数据来渲染页面.


    首页源码

    import React,{useEffect} from 'react';
    import { connect } from 'dva';
    import './style.scss';
    import Header from "../../components/Header";
    import Product from "./components/Product";
    
    function HomePage(props) {
      
      useEffect(()=>{
        const {dispatch} = props;
        dispatch({
          type:"home/getListHttp",
          payload:{}
        })
      },[])
    
      const { likes = null,recommends = null } = props;
    
      if(!likes || !recommends){
        return null;
      }
    
      return (
        <div className="home-page">
          <Header title="首页"/>
          <Product data={likes}/>
          <Product data={recommends}/>
        </div>
      );
    }
    
    const mapStateToProps = (state)=>{
      return {
        likes:state.home.likes,
        recommends:state.home.recommends
      }
    }
    
    export default connect(mapStateToProps)(HomePage);
    

     

    首页Header组件源码

     

    说明

    • 了解Header组件的目的是为了知道在dva中子组件如何使用路由跳转.
    • 从dva中引入withRouter包裹组件,这样就可以使用props.history里面的api实现跳转

     

    源码

    import React from 'react';
    import "./style.scss";
    import { withRouter } from 'dva/router'
    
    const Header = (props)=>{
    
        const {title,has_back=false,has_login=true} = props;
    
        function goBack(){
            props.history.goBack();
        }
    
        function login(){
            props.history.push("/login");
        }
    
        return (
            <div className="header">
                  {has_back?<a className="back" onClick={goBack}>返回</a>:null} 
                  {title}
                  {has_login?<a className="login" onClick={login}>登录</a>:null}
            </div>
        );
    }
    
    export default withRouter(Header);

     

     

    详情页

                                                              

     

    说明

    • 如果了解了首页的开发规律,其他页面也都差不多.
    • 我们这里着重看一下dva中如何获取路由参数.在props.match.props里面获取参数.

     

    源码

    import React,{useEffect} from 'react';
    import { connect } from 'dva';
    import './style.scss';
    import Header from "../../components/Header";
    
    function DetailPage(props) {
    
      const { dispatch,match,product_data } = props;
    
      useEffect(()=>{
        const { id } = match.params;
        dispatch({
          type:"detail/getDataHttp",
          payload:{
            id
          }
        })
      },[])
    
      if(!product_data){
        return null;
      }
    
      return (
        <div className="detail-page">
          <Header title="详情页" has_back={true}/>   
          <div className="item">
            <p className="item_top box">
              <i className="lt">id</i>
              <i className="gt">{product_data.id}</i>
            </p>
          </div>
          <div className="item">
            <p className="item_top box">
              <i className="lt">名称</i>
              <i className="gt">{product_data.name}</i>
            </p>
          </div>
          <div className="item">
            <p className="item_top box">
              <i className="lt">数量</i>
              <i className="gt">{product_data.count}</i>
            </p>
          </div>
          <div className="item">
            <p className="item_top box">
              <i className="lt">价格</i>
              <i className="gt">{product_data.price}</i>
            </p>
          </div>
          <div className="item high">
            <p className="item_top box">
              <i className="lt">照片</i>
              <i className="gt"><img src={product_data.img}/></i>
            </p>
          </div>
          <div className="item high">
            <p className="item_top box">
              <i className="lt">描述</i>
              <i className="gt">{product_data.desc}</i>
            </p>
          </div>
        </div>
      );
    }
    
    const mapStateToProps = (state)=>{
      return {
        product_data:state.detail.product_data
      }
    }
    
    export default connect(mapStateToProps)(DetailPage);
    

     

    登录页

                                      

                                                  

    说明

    1. 登录页需要说的点就是请求服务端数据时全局loading该如何处理.dva提供了插件机制,比如 dva-loading 可以自动处理 loading 状态.我们看下如何具体的配置.
    2. 安装dva-loading并在入口文件中启用插件.

                                     

        3.此时在页面的组件中就可以直接通过state.loading获取加载的状态了.在这背后,dva会自动监听是否有异步的ajax请求,根据它的请求状态(请求中还是请求完成)dva会自动处理全局的loading数据,我们只需要获取它就可以了.

                       

       4.获取到loadin后通过查看它的属性global是为true还是false来决定是否渲染加载中的图标.

               

    源码

    import React,{useEffect} from 'react';
    import { connect } from 'dva';
    import './style.scss';
    import Header from "../../components/Header";
    import LoginForm from "./components/LoginForm";
    import LoginState from "./components/LoginState";
    import Loading from "../../components/Loading";
    
    function LoginPage(props) {
    
      const { dispatch,user,loading } = props;
    
      useEffect(()=>{
        dispatch({
          type:"login/getUser"
        })
      },[])
    
      return (
        <div className="login-page">
          <Header title="登录页" has_back={true} has_login={false}/>
          {
            user?<LoginState/>:<LoginForm/>
          }
          {loading.global?<Loading/>:false}
        </div>
      );
    }
    
    const mapStateToProps = (state)=>{
      return {
        user:state.login.user,
        loading:state.loading
      }
    }
    
    export default connect(mapStateToProps)(LoginPage);
    


     

     

    展开全文
  • ReactDva学习

    2019-09-11 09:09:29
    一、创建Dva工程 我们前两篇都是用create-react-app创建工程的,但是它只能创建一个最基本的空程序。在前两篇中,我们自己用npm装上了router,redux等依赖包,并自己手动写了很多操作。 Dva将上述一切进行了简化,它...

    一、创建Dva工程

    我们前两篇都是用create-react-app创建工程的,但是它只能创建一个最基本的空程序。在前两篇中,我们自己用npm装上了router,redux等依赖包,并自己手动写了很多操作。
    Dva将上述一切进行了简化,它是一个封装好很多模块的框架,并且拥有自己的脚手架。用Dva创建的工程,从目录结构起就非常清晰。(虽然框架这种东西可以简化很多操作,但在使用框架前还是不能忘记本源,所以建议前两篇也粗略的看一看。)

    先安装dva-cli脚手架

    npm install dva-cli -g
    

    dva -v可以查看版本号
    在这里插入图片描述
    跟create-react-app一样,用dva在命令行创建app。

    dva new dva-app   //这里的dva new 是创建项目的命令   dva-app是我们新建的项目名
    

    其后进入工程文件并启动工程。

    cd dva-app
    npm start
    

    在这里插入图片描述
    Dva工程的目录结构如下:
    在这里插入图片描述
    可以看出,比create-react是多了很多东西的。
    除了index.js的入口文件,和router.js的初始路由,上面那些文件夹里大致意义如下:

    • asserts 用于存放静态资源,跟以往正常的java工程一样,里面扔图片视频之类的。
    • components 用于存放公共组件,比如页面头尾导航条。
    • routes 用于存放路由组件,可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来。
    • models 用于存放模型文件,(个人认为model才是react-redux体系里最重要的部分),我们之前说的state以及reducer都会写在里面,同时,通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据,model也能通过connect接收到组件中dispatch的action。
    • services 用于存放跟后台交互的服务文件,一般都需要调用后台的接口。
    • utils 用于存放工具类库。

    其他的配置文件暂时不管啦。

    整体的流程大致(数据流向)是:
    从index入口进入 => 通过url匹配routes里的组件(顺便看看components里有没有啥公共组件要加载过来) => routes里的组件dispatch action => model通过action改变state(中途可能会通过services跟后台交互) => 通过connect重新渲染routes中的组件
    在这里插入图片描述

    二、实践出真知

    理论不如实践,那么,我们用Dva搞一个前两篇中的例子试一试,路由切换并且做个表格。(其实具体各个函数的写法跟前两篇中基本一样,只是写的位置不一样。下面详解。)
    在这里插入图片描述

    在这里插入图片描述
    首页

    入口文件:

    首先,在入口文件index.js中,能看到已经给我们留了model模型和router路由的位置。在开发中,所有的model模型文件都需要在这里注册,这样才能用connect跟组件联系起来。

    // 1. Initialize
    const app = dva();
    
    // 2. Plugins
    // app.use({});
    
    // 3. Model   //先暂时不管Model
    // app.model(require('./models/example').default);
    
    // 4. Router
    app.router(require('./router').default);
    
    // 5. Start
    app.start('#root');
    
    

    先不管Model,Router告诉我们引用了router.js,打开router.js文件看一眼如下。 下面有代码讲解

    import IndexPage from './routes/IndexPage';
    ……
        <Router history={history}>
          <Switch>
            <Route path="/" exact component={IndexPage} />
          </Switch>
        </Router>
    

    讲解:通俗易懂,在路径为/的时候匹配到IndexPage。(说明:不用我们自己装Router,我们建立router.js以后,框架自动给我们配置了Router,是不是很方便~)注意这里加了exact,表示精确匹配,如果不加则/aaa, /bbb, /whatever都会匹配到IndexPage,精确匹配的话只有输入/的时候才会匹配。
    IndexPage里能看到欢迎信息,那个小丑图片和提示文字,这里就不贴过来了。

    路由切换:

    下面我们自己做个路由切换的效果。

    Step1: 装Antd!

    虽然Dva很贴心的封装了很多工具包但是并没有封装样式库,所以Antd还是需要自己装的。

    npm install antd
    npm install babel-plugin-import
    

    并编辑.webpackrc文件。如下所示

    {
    "extraBabelPlugins": [
        ["import", { 
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": true
        }]
      ]
    }
    

    这样就可以使用Antd了。

    Step2: 新增组件

    下一步我们需要新建一些组件:
    在这里插入图片描述
    我们在routes里面新建aaa.jsbbb.js两个组件。内容随便写点啥,反正只是为了切换用。
    ① aaa.js

    // aaa.js
    import React, { Component } from 'react'
    import { connect } from 'dva'
    
    class AAA extends Component { //BBB同理
        render() {
            return (
                <div>
                   <h1>AAA</h1>
                </div>
            )
        }
    }
    
    AAA.propsTypes = {}
    export default connect()(AAA)  //connect函数将store对象与本组件联系在一起
    

    Step3: 定义导航栏

    然后,在components里建立两个公共组件header.jslayout.js
    header.js用作页面上方的导航栏,理想效果如下,通过点击不同导航切换地址栏url。
    在这里插入图片描述
    header.js需要引入antd的Menu模块,以及dva封装好的LinkLink的作用即匹配相应的路径,在爬坑之路二里我们也用到过。

    // header.js
    ……
    import { Menu } from 'antd';
    import { Link } from 'dva/router'
    
    class Header extends Component {
        render() {
            return (
                <Menu
                  theme="dark"
                  mode="horizontal"
                  defaultSelectedKeys={['1']}
                  style={{ lineHeight: '64px' }}
                >
                  <Menu.Item key="1">
                        <Link to="/">Index</Link>
                  </Menu.Item>
                  <Menu.Item key="2">
                        <Link to="/aaa">AAA</Link>
                  </Menu.Item>
                  <Menu.Item key="3">
                        <Link to="/bbb">BBB</Link>
                  </Menu.Item>
                </Menu>
            )
        }
    }
    ……
    

    Step4: 定义布局

    layout.js用来当整体页面布局,我们想把页面分成两部分,上面放导航条下面放子内容。头部需要引入刚刚的header组件,然后以<Header />的方式插入到节点中。props是layout.js组件的属性(解释:就是其他组件向Layout组件传值的时候,Layout组件用props来接收),用于传递数据,每个组件都有自己的props。props.children表示该组件的所有子节点。

    // layout.js
    import React, { Component } from 'react'
    import { connect } from 'dva';
    import Header from '../components/header'
    
    class Layout extends Component {
        render() {
            const { children } = this.props
            return (
                <div>
                    <Header />
                    <div style={{ background: '#fff', padding: 24 }}>{children}</div>
                </div>
            )
        }
    }
    
    export default Layout;
    

    Step5: 连接路由

    此时还差最后一步,就是把路由跟刚刚的这些组件联系起来。我们回到router.js,修改如下。

    // router.js
    import React from 'react';
    import { Router, Route, Switch } from 'dva/router';
    import Layout from './components/layout'
    import IndexPage from './routes/IndexPage';
    import AAA from './routes/aaa';
    import BBB from './routes/bbb';
    
    function RouterConfig({ history }) {  //这里的history是存储历史浏览记录的栈
      return (
        <Router history={history}>  //{history}固定写法
            <Layout>   //下面有代码讲解
                  <Switch>
                    <Route path="/" exact component={IndexPage} />
                    <Route path="/aaa" exact component={AAA} />
                    <Route path="/bbb" exact component={BBB} />
                  </Switch>
            </Layout>
        </Router>
      );
    }
    
    export default RouterConfig;
    

    讲解:
    <Layout></Layout>标签括起来的那部分就是父组件传给 Layout组件的值。然后在Layout组件内部,通过props属性做接收,从而展示在Layout组件中

    以上操作的流程是,在header.js中,我们通过点击不同导航栏,更换地址栏的url;接下来在router.js中,通过匹配地址栏的url,选择加载的子组件呈现到页面上。
    最终的效果应如下所示:
    在这里插入图片描述
    在这里插入图片描述
    路由到此结束,接下来加上列表。

    列表操作:

    Step1:创建routes页面组件

    routes/IndexPage.js页面组件里,我们把爬坑之路二的那个列表拿过来。

    在这里插入图片描述

    //IndexPage.js部分代码如下
      <div>
            <Button type="primary" onClick={this.changeData}>修改数据</Button>
            <div>
                <Table columns={columns} dataSource={data}/>
            </div>
        </div>
    

    Table标签有两个属性,columns是表头,dataSource是数据,均绑定到state。只是这一次,state和action都不是直接写在页面组件下的了,而是定义到对应的模型文件中。

    Step2:创建models模型

    我们新建models/indexpage.js作为模型文件。可以参考项目自带的example.js,里面已经给出了state,effects和reducers的地方。

    //models/indexpage.js   //下面有代码讲解
    export default {    
      namespace: 'indexpage',
      state: {
        columns: [{
              title: '姓名',
              dataIndex: 'name',
            }, {
              title: '性别',
              dataIndex: 'gender',
            }],
        data: [{
            "key": "1",
            "name": "王大斌",
            "gender": "男"
          },{
            "key": "2",
            "name": "刘小洋",
            "gender": "男"
          }]
      },
    
      subscriptions: {
      ……
      },
    
      effects: {
      ……
      },
    
      reducers: {
      ……
      },
    };
    

    讲解namespace是该模型文件的命名空间,也是在全局state上的属性,在routes组件中,我们可以用this.props.某命名空间获取state(根节点)中某命名空间的数据。

    Step3:通过connect关联数据

    回到routes/IndexPage.js页面组件,如果我们在routes中想要用model里面的数据的话,我们需要通过connect工具来传递,其基本用法是connect(从model中获取数据)(绑定到routes组件)

    //routes/IndexPage.js
    import { connect } from 'dva';
    
    class IndexPage extends Component{
        changeData = () => {
            console.log("Change Data");
        };
    
        render() {     //因为在下面的export default connect已经把model层里的indexpage中的state绑     定到本组件了
            const { columns, data } = this.props.indexpage; //获取indexpage中的state
            console.log(this.props);
            return (
                <div>
                    <Button type="primary" onClick={this.changeData}>修改数据</Button>
                    <div>
                        <Table columns={columns} dataSource={data}/>
                    </div>
                </div>
            )
        }
    }
    //这样models/indexpage.js的state数据就被绑定到routes/IndexPage.js的table节点上啦,列表被赋予了两行值。
    export default connect(({ indexpage }) => ({  /connect()里面的函数体为什么这样写????
      indexpage,
    }))(IndexPage);
    

    Step4:创建services获取数据

    假设我们有个json数据是这样的,放在8080端口,我们想把它当做一行添加到上面的列表里。
    在这里插入图片描述
    在services中我们同后台进行交互,新建services/user.js文件。

    //services/user.js
    import request from '../utils/request';
    
    export function getUser() {     //request方法用于向后台发送请求  
      return request('http://localhost:8080/data');
    }
    

    utils/request.js里面已经贴心的自带了request方法用于请求url,直接拿来用就可以。
    这样,在我们调用getUser()方法时,就会得到请求数据啦。
    友情提示,以往我们一直习惯直接在model里调用getUser()然后用setstate改变state的值,但这是不符合Dva的规则的,Dva规定我们必须通过触发action才可以改变state,也就是下一步。

    Step5:触发action

    对于这个列表,我们希望点击按钮添加一行。根据前面的讲述我们知道了,改变state的值需要dispatch(action),再调用reducer改变state,进而重新渲染,这是Dva规定的数据流传输方式。
    这里的action有两种走向,对于同步行为(比如我就改变个按钮颜色),可以直接调用model中的reducer。而对于异步行为(比如从服务器请求数据),需要先触发effects然后调用reducer。
    下面我们在routes/IndexPage.js里,通过onClick={this.changeData}按钮事件,触发一个action给模型文件。

    //点击按钮触发
        changeData = () => {
            const { dispatch } = this.props;
            dispatch({   //通过dispatch向models层发送一个请求
              type: 'indexpage/addUser',  //这表示我们要调用models/indexpage.js的addUser方法。
              payload: {},
            });
        };
    

    这表示我们要调用models/indexpage.jsaddUser方法。
    models/indexpage.js里,我们需要在effects中定义好这个方法。
    effects 属性的语法可以参考Redux-saga 中文文档,它可以获取全局state,也可以触发action。effects内部使用 yield 关键字标识每一步的操作,call表示调用异步函数,put表示dispatch(action)。

    effects: {    //因为该函数里面有yield处理异步函数,所以函数名前面有*,这里的*是ES6里generator function的一种语法,     函数的第一个参数是payload,这是默认约定俗成的参数名,我们应该也可以改成其他的参数名,参数名叫什么都可以,无所谓的。函数的第二个参数对象是 effect 原语集,其中 call, put 最为常用
        *addUser({ payload }, { call, put }) {  // eslint-disable-line
          const myuser = yield call(userService.getUser, {});
          yield put({  
            type: 'ADD_USER',
            payload: {
                  myuser:myuser.data
            },
          });
        },
      },
    

    这表明,我们先读取service中的getUser()方法,得到返回结果,然后将它放到payload里,然后调用了model层里面的reducer里面名为ADD_USER的action,告诉它要改变state。

    Step5:调用reducer

    我们说过,reducer是纯函数,当输入相同时输出也必然相同,其输入参数是当前的state和收到的action,他会返回一个新的 state。
    ...三点运算符在爬坑二中说过了哦,作用是把数组打开进行操作。我们把payload中的信息加在state的原有data之后。

     reducers: {
        ADD_USER(state, action) {
          return { ...state, 
            data:state.data.concat(action.payload.myuser) }; //把payload中的信息加在state的原有data之后
        },
      },
    

    点击一下按钮,是不是已经添加成功了~ 还记得在爬坑之路二中,我们需要手动去创建监听重新渲染页面才能看到更新效果,而在Dva中,由于使用了connect,会在内部自动更新,并不用手动刷新了呢。

    最终的成果如下所示:
    在这里插入图片描述
    这样,就完成了一个简单的页面切换和修改state的例子。

    本文转载自:https://www.jianshu.com/p/513c5eab17c1

    展开全文
  • 刚开始使用dva最陌生的就是像@connect…等这样的装饰器语法, 后来查询到是我未知的es6的语法,@connect实质上就是react-redux中的connect 因为对function component的形式不熟悉, 即使换成了export default...

    刚开始使用dva最陌生的就是像@connect…等这样的装饰器语法,
    后来查询到是我未知的es6的语法,@connect实质上就是react-redux中的connect
    因为对function component的形式不熟悉,
    即使换成了export default(mapStateToProps)(Demo)后还是报了props not definite的错误,结果发现我的props没有传到函数中。。。

    import React, { useState } from 'react'
    import { Card, /* Button  */ } from 'antd'
    import { connect } from 'dva'
    import puzzlecards from '../../models/puzzlecards'
    
    const namespace = 'puzzlecards'
    
    const mapStateToProps = (state) => {
    	const cardList = state[namespace]
    	return {
    	  cardList 
    	}
    }
    
    //只是语法糖而已  实质上就是react-redux中的connect
    //@connect(mapStateToProps) 修饰器只能用于类和类的方法,不能用于函数,因为存在函数提升
    function Demo(props){
    	return(
    		<div>
    			{
    				props.cardList.map(card =>{
    						return(
    							<Card key={card.id}>
    								<div>Q: {card.setup}</div>
    								<div>
    									<strong>A: {card.punchline}</strong>
    								</div>
    							</Card>
    						)
    					})
    				}
    			{/* <div>
    				<Button onClick={ addNewCard }> 添加卡片 </Button>
    			</div> */}
    		</div>
    	)
    }
    
    export default connect(mapStateToProps,null)(Demo)
    

    models 层的 puzzlecards.js

    export default {
      namespace: 'puzzlecards',
      state: [
        { id: 1,
          setup: 'Did you hear about the two silk worms in a race?',
          punchline: 'It ended in a tie',
        },
        {
          id: 2,
          setup: 'What happens to a frog\'s car when it breaks down?',
          punchline: 'It gets toad away',
        },
      ],
    };
    

    例子来源https://www.yuque.com/ant-design/course/dsl8ee-----
    搭建基于 model 的卡片列表页面

    展开全文
  • dva 构建 react 项目 DvaJS umi 构建项目 React 的生命周期 HOC(高阶组件) 功能: ​ 1. 进行某些方法或是属性的复用 ​ 2. 让外层的组件替我们完成任务,那么里层组件直接使用就可以了 const NewComponent = ...
  • Dva整体理解 前言 README.md 欢迎阅读,本文档将带你了解dva的整体思路。 介绍 应用 dva 框架搭建平台,dva 是基于 redux 最佳实践实现的framework,简化使用 redux 和redux-saga 时很多繁杂的操作...
  • dva+react+ant.design

    2018-04-27 16:23:39
    所以用自己能理解的解释下dva是什么东东基于 redux、redux-saga 和 react-router 的轻量级前端框架特性易学易用:仅有 6 个 api,对 redux 用户尤其友好elm 概念:通过 reducers, effects 和 subscriptions 组织 ...
  • react+dva+antd的骚操作

    2019-08-06 14:25:29
    原谅我直接跳过react的基础,直接就讲react+dva的实际应用,因为直接从项目结构来讲,我觉得学习的成本更低,开发的速度更快,当然有时间的话还是建议冲react的基础学起。 react的参考资料: 建议先从React 入门...
  • React-Native集成dva.js

    2019-08-15 10:20:23
    dvajs作为一个基于redux的状态管理框架,在react中的表现还是很不错的,如果我们想要在react-native应用中使用dvajs该怎么做呢? 首先安装dva-core和react-redux: npm i -S dva-core react-redux dva-core...
  • React+DVA开发实践

    2017-05-27 12:09:28
    文档概述本文档在前面章节简单的介绍了React和其相关的一系列技术,最后章节介绍了React+Dva开发的整套过程和基本原理,也就是将一系列框架整合的结果。
  • dva版本从1.2.1=>2.1.0(内置react-router2=>react-router4) 其实react升级基本只更新一下包就可以了,主要是react-router升到4有很大的破坏性改动 ###升级总结### 1.react-router4不能嵌套<route>,现...
  • Dva最佳实践一. 门槛React 技术栈二. Hello World三. 一个简单H5功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容...
  • dva+react中的CDN缓存

    2019-12-26 16:05:01
    所谓CDN缓存 已经放在服务器的项目,如果做了调整重新打包上传之后发现,不会...调整配置文件:此处是使用dva+react,使用的打包工具是roadhog,所以调整.webpackrc文件 1.添加配置: "hash": true, "html": { ...
  • React-Dva学习

    2018-10-12 17:00:01
    npm install dva-cli -g or yarn global add dva-cli 创建新应用 安装完cli工具以后就可以在命令行访问到, 为了方便学习,我们可以使用命令创建 // 创建一个标准项目 dva new my-app // 创建一个学习的 简答...
  • dva构建react应用程序

    2017-07-10 14:47:44
    昨天才用create-react-app创建了react的开发环境,以为今后就用它来创建开发环境咯,谁知道才用了一天,才发下dva也是用来创建react开发环境的。 dva是淘宝团队弄的,为了支持国货,赶紧试试看咋用吧 第一步:安装...
  • 简介:dva 首先是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-router和fetch 使用步骤: 定义路由 编写UIComponent Model:处理数据和逻辑。dva 通过 model 的概念把...
  • 一:安装dva,启动react工程 1、安装dva :执行命令 npm install dva-cli -g 输入dva -v 查看版本 2、创建react工程:dva new dva-app 3、启动工程 npm start 二、React Dva 1、react项目目录 ...
  • 1.用dva-cli 启动后我们会看到这样一个目录结构,具体 生成方法和结构官网说的很明确,照做就好 https://dvajs.com/guide/getting-started.html2.这里主要记录 跨域怎么解决 :target 换成自己的地址即可...
1 2 3 4 5 ... 20
收藏数 3,412
精华内容 1,364
热门标签