Carloin

# 阅读的开源项目

github 上的，关于 react+redux 的开源项目，地址：https://github.com/bailicangdu/react-pxq (opens new window)

技术栈：react + redux + webpack + react-router + ES6/7/8 + immutable

# 第一步，阅读`package.json`文件

打开package.json文件，查看此项目所用的依赖包，这一步可大概了解辞项目所需要的技术，以及版本；根据scripts描述可知项目的启动指令。

package.json部分截图

# 第二步，看项目目录结构

通过项目目录结构，大致了解项目。对此项目主要目录解读如下：

└── src
     ├── api //主要存放进行数据请求的文件
     │
     ├── assets  //主要存放静态文件
     │
     ├── components //主要存放公用的组件
     │
     ├── envconfig //主要存放配置的文件，此项目主要是域名
     │
     ├── pages //主要存放页面的文件
     │
     ├── router //主要存放路由文件
     │
     ├── store//主要是关于reducer和action文件
     │
     ├── style //主要是样式文件
     │
     ├── utils //主要是工具类文件
     │    ├── asyncComponent.js //懒加载组件
     │    ├── mixin.js
     │    └── setRem.js //用rem进行自适应的js文件
     │
     ├──  index.js //入口文件
     │
     └──registerServiceWorker.js //资源的缓存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 第三步，看入口文件`index.js`

首先看导入了哪些文件，此时可去相应的文件查看这些文件的功能；在入口文件中导入的，是在全局环境中使用的。关于此项目入口文件的主要解读：

FastClick:移动设备上的浏览器默认会在用户点击屏幕大约延迟 300 毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了 FastClick。
react-hot-loader: 就是使用 react 编写代码时，能让修改的部分自动刷新。但这和自动刷新网页是不同的，因为 hot-loader 并不会刷新网页，而仅仅是替换你修改的部分，也就是
react-redux:引入Provider,与store数据建立连接
module.hot.accept；实现热更新
registerServiceWorker.js:为 react 项目注册了一个 service worker，用来做资源的缓存，这样你下次访问时，就可以更快的获取资源。而且因为资源被缓存，所以即使在离线的情况下也可以访问应用（此时使用的资源是之前缓存的资源）。但有一点要注意，registerServiceWorker 注册的 service worker 只在生产环境中生效（process.env.NODE_ENV === 'production'），所以开发的时候，可以注释掉。当然了，在生产环境中，你也可以选择使用或者不适用这个功能。

# 第四步，根据`index.js`文件，由上到下看对应的组件及相关文件

以下内容是根据自己的现有知识点，挑重点来胡编滥造😔

# 壹. `./router/index.js`

import home from "@/pages/home/home";:home 组件不使用异步加载组件，因为是主组件，不需要异步

# 贰. `pages/record/record`

记录列表，记录三个状态：已通过、待审核、未通过；进入这三个状态的页面，主要是通过路由<NavLink>;
这里有一个公共组件RecordList,根据路由的type,展示这三个状态的对应数据,使用API.getRecord发起不同type的请求
这个页面用了之前不怎么常用的生命周期

（1） componentWillMount():一般用的比较少，它更多的是在服务端渲染时使用；它代表的过程是组件已经经历了constructor()初始化数据后，但是还未渲染 DOM 时。这里主要是用来获取 type，type==pass,去请求一次数据。

（2） componentWillReceiveProps():用在更新过程，在接受父组件改变后的 props 需要重新渲染组件时用到的比较多，接受一个参数 nextProps，通过对比 nextProps 和 this.props，将 nextProps 的 state 为当前组件的 state，从而重新渲染组件。这里主要是获取type,判断类型是否重复,是否需要重新渲染组件

（3） shouldComponentUpdate(nextProps,nextState):主要用于性能优化(部分更新) ；唯一用于控制组件重新渲染的生命周期，由于在 react 中，setState 以后，state 发生变化，组件会进入重新渲染的流程，在这里 return false 可以阻止组件的更新；因为 react 父组件的重新渲染会导致其所有子组件的重新渲染，这个时候其实我们是不需要所有子组件都跟着重新渲染的，因此需要在子组件的该生命周期中做判断。这里使用immutable中is、fromJS进行判断。

# 叁. `pages/helpcenter/helpcenter`

帮助中心，内容较为简单

# 肆. `pages/production/production`

产品列表，通过connect进行数据状态管理，通过第一个参数，获取proData的值，即最新的产品数据；第二个参数，是当前production组件中管理的数据发生了变化，需要更新数据，不能直接在组件中进行更新，需要根据不同的 action，更新不同的数据

（1）togSelect：处理是否选择产品，通过this.props.togSelectPro(index);将数据更新

（2）handleEdit：处理选择的产品数量，通过this.props.editPro(index, currentNum);将数据更新

# 伍. `pages/balance/balance`

提现页面，通过输入数据，提交提现的金额

# 参考

https://github.com/bailicangdu/react-pxq

← 01.React-redux 03.react源码解读 →

# 阅读的开源项目

# 第一步，阅读package.json文件

# 第二步，看项目目录结构

# 第三步，看入口文件index.js

# 第四步，根据index.js文件，由上到下看对应的组件及相关文件

# 壹. ./router/index.js

# 贰. pages/record/record

# 叁. pages/helpcenter/helpcenter

# 肆. pages/production/production

# 伍. pages/balance/balance