dva/React使用小结（一）

目录

1、PureComponent组件

2、组件生命周期

3、关于箭头函数

4、path-to-regexp Package

5、classnames Package

6、Injected Props (e.g. location)

7、基于 action 进行页面跳转

---

关于dva的基础知识框架，可以查看这里，毕竟国产的框架，阿里在里面详细、全面而通俗解释了dva整体的框架知识，对刚入门使用dva的同学有很大的帮助；另外一篇个人觉得写的也非常不错的文章，有兴趣也可以去拜读一下，初识dva。本文主要总结了我在使用过程中遇到的以及周围同学建议的比较好的技巧或方法。

1、PureComponent组件

PureComponent和Component都是React中的两种内置类。前者相对于后者，有一个比较突出的特点是：PureComponent只重新渲染组件props中变化的部分值所影响的元素，如果组件props没有变化，则不会触发render方法重新渲染组件。这个特点的一个好处是可以提高应用的性能，因为往往只是props中的部分成员发生变化，却要重新渲染整个组件，这是比较鸡肋的。但是坏处是，当我们想要使用有状态的组件时，setState方法是不能触发渲染的，因为组件的props没有变化，这时候就不得不舍弃PureComponent而使用Component了。反正各有利弊，不同场合下合理区别选择。

2、组件生命周期

React组件的生命周期，在官方网站上给了全面而详细的解释。

这里比较强调的是，componentWillUpdate()和componentDidUpdate()。经过踩坑发现，这里的Update是指的Update组件的props而不是render，从这两个生命周期方法的参数也可以推测出这一点，切记切记。

3、关于箭头函数

在dva的实际工程开发中，常常用到箭头函数定义各种事件的回调函数。我目前碰到的情况一般有两种：

一是回调函数没有自定义参数（事件对象除外），这种情况比较简单。直接将回调函数写到事件回调属性上去即可（最好使用箭头函数定义回调函数，这涉及到当前组件的成员方法/事件/属性的使用问题）；

二是回调函数有自己的参数，这种情况往往需要通过箭头函数将回调事件转移到自定义的回调函数上去，以便在事件发生时执行我们想要的操作。比较传统的就是在组件内重新定义一个方法，就是标准的箭头函数式定义，一般不会出问题；但是这样有一个麻烦：每次有事件回调都要单独定义一个方法，很不方便；为了偷懒，我们直接在事件回调属性上定义这个简单的回调方法，一开始我是这样的

作为ECMAScript 6的菜鸟，并没有发现什么异常，但这样写的结果是【查询】按钮的点击事件是无效的，并不会乖乖去干我想让它干的事情。其实呢，从ES6 箭头函数的语法角度来看，this.onSearch("CIP")是一个方法块，有多行语句，对于有多行语句的，需要用{}括起来，因为js需要一个符号去识别这个方法体从而老老实实的去执行他们。因此，上面的写法应该改成这样

按钮点击事件无效的问题就解决了

【切记】不要直接将带参数的回调方法写在回调事件的属性上去，这会导致无限次调用该方法而使浏览器崩溃甚至是数据库服务器崩溃，这种写法是不需要事件触发的。

【补充】有一个尚未完全解决的问题：本地运行没有问题，编译后发布在本地站点下按钮依然无效，原因正在挖掘中...

4、path-to-regexp Package

如果 url 规则比较复杂，比如 /users/:userId/search，那么匹配和 userId 的获取都会比较麻烦。这是推荐用 path-to-regexp简化这部分逻辑。

import pathToRegexp from 'path-to-regexp';

// in subscription
const match = pathToRegexp('/users/:userId/search').exec(pathname);
if (match) {
  const userId = match[1];
  // dispatch action with userId
}

5、classnames Package

在一些复杂的场景中，一个元素可能对应多个 className，而每个 className 又基于一些条件来决定是否出现。这时，classnames 这个库就非常有用。

import classnames from 'classnames';
const App = (props) => {
  const cls = classnames({
    btn: true,
    btnLarge: props.type === 'submit',
    btnSmall: props.type === 'edit',
  });
  return <div className={ cls } />;
}

这样，传入不同的 type 给 App 组件，就会返回不同的 className 组合：

<App type="submit" /> // btn btnLarge
<App type="edit" />   // btn btnSmall

6、Injected Props (e.g. location)

Route Component 会有额外的 props 用以获取路由信息。

• location
• params
• children

更多详见：react-router

7、基于 action 进行页面跳转

import { routerRedux } from 'dva/router';

// Inside Effects
yield put(routerRedux.push('/logout'));

// Outside Effects
dispatch(routerRedux.push('/logout'));

// With query
routerRedux.push({
  pathname: '/logout',
  query: {
    page: 2,
  },
});

除 push(location) 外还有更多方法，详见 react-router-redux

8、dva重要概念之订阅Subscription

订阅方法接收的参数对象是谁？

这个对象属性只有dispatch和history，也就是用的最多的路由监听。

9、加载中处理小技巧——dva‐loading插件

可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading

 

【待续...】