10.6 react性能优化 Reselect，路由懒加载dynamic import()，项目的构建与部署，打包路径问题_react中的写法dynamic(() => import('./detailreply')

一、Reselect
1、使页面更关注组件本身而不是状态量，避免页面组件需要计算得到selector。
2、reselect可以提升redux性能。

// 前几次参数是selector，最后一个回调函数是，前面selector的集合，并操作。
export const getTotalPrice = createSelector(
  getQuantity,
  getProduct,
  (quantity, product) => {
    if (!product) {
      return 0;
    }
    return (quantity * product.currentPrice).toFixed(1);
  }
);
1
2
3
4
5
6
7
8
9
10
11

注：若selector涉及不同参数。页面传参需要一传入所有参数。

// 页面组件

// redux-selectors

// 控制台输出

二、dynamic import()
dynamic import 是es新提案，用于动态加载模块。

import(’…/pathtocomponent’) // 注：这里的import不是一个函数，而是一个运算符，运算符运算后的返回结果是一个Promise对象，当 Promise完成后，才会正常加载组件。

如何去使用高阶组件？
一般对于分片时间同路由信息保持一致。

三、项目的构建与部署

1、默认打包是相对根路径（盘符）
项目部署,nginx的配置会决定文件的读取位置。

此时react默认使用的路由是history路由。和vue默认的hash路由不同。
一旦刷新页面就挂了。
那么需要对nginx进行配置，让检索不到的页面进行重定向。

相关介绍

nginx配置选项try_files详解

https://www.cnblogs.com/jedi1995/p/10900224.html

2、如果要相对某个子目录(/dianping)

1、打包出来的文件都是默认根目录的。

归根结底就是，使目录加上前缀/dianping。配置package.json加上字段homepage:

2、完成路径前缀的添加后。还需要修改Route的相对路径
（因为当前reactRouter配合的path是直接从/目录，即host第一级path开始的，不是/dianping)。
对Router增加属性basename即可

3、但是页面可以正常运行，静态资源的指向仍有问题。

方案一：可以对url.js 每一级路径增加/dianping。（较繁琐）

方案二：对nginx进行配置，让/mock匹配正确的文件目录。（推荐）