# react-hooks-qunar

**Repository Path**: cathy1007/react-hooks-qunar

## Basic Information

- **Project Name**: react-hooks-qunar
- **Description**: react-hooks重构旅游电商网站去哪儿
- **Primary Language**: Unknown
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2020-12-08
- **Last Updated**: 2022-03-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

---
# 主题列表：juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable
# 贡献主题：https://github.com/xitu/juejin-markdown-themes
theme: juejin
highlight:
---



## 前言
我常使用的`Vue`技术栈。对于`React`，一直是想接触而一直没有接触，因为听说上手很难。。

考虑到职业发展，还是决定好好学习者框架及其周边。

我首先跟着[技术胖](https://jspang.com/)，花了2天的时间学习了`react`&&`redux`&&`react-hooks`，跟着撸代码发现很简单的嘛。
于是，我决定自己实现一个`react-hooks`项目。

然后我找到了一篇关于`react-hooks`总结的文章：[React Hooks 详解 【近 1W 字】+ 项目实战](https://juejin.cn/post/6844903985338400782)，发现不错，然后按图索骥，跟着`github`从零开始一点点实现。

写代码的过程中发现了很多的问题。和`Vue`相比，`react`组件的封装粒度更细，对业务的理解及架构分析的要求也更高，对JS的基础要求也更高——`react`上手确实没那么容易。。。

在熟练使用`react`的道路上，还有很长的路要走。

## 项目介绍
这个项目是慕课网的一个课程：[React劲爆新特性Hooks 重构旅游电商网站火车票PWA](https://coding.imooc.com/class/348.html)，仿的是支付宝小程序上的去哪儿网，使用的是多页开发模式。

我知道如果自己买课程跟着老师写代码，没有从0到1的思考，依然会觉得`react-hooks`很简单，学习效果就差了很多。
于是我把要实现的页面和逻辑自己捋了一遍，从0开始模拟写。

### 目录说明
```

train-front
├── config //weback配置文件夹--yarn eject弹出webpack配置，改造为多页应用
│   ├── env.js
│   ├── getHttpsConfig.js
│   ├── jest
│   ├── modules.js
│   ├── multiPageConfig.js
│   ├── paths.js
│   ├── pnpTs.js
│   ├── webpack.config.js
│   └── webpackDevServer.config.js
├── debug.log
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── imgs //项目UI页面
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── mock //模拟数据文件夹
│   ├── order.html
│   ├── query.html
│   ├── robots.txt
│   └── ticket.html
├── README.md
├── scripts
│   ├── build.js
│   ├── start.js
│   └── test.js
├── src
│   ├── common
│   ├── components
│   ├── custom-hooks
│   ├── index //首页
│   ├── order //订单页
│   ├── query //车次查询页
│   ├── reportWebVitals.js
│   ├── serviceWorker.js
│   ├── setupTests.js
│   └── ticket //车次选择页
└── yarn.lock
```

## 插件库说明

### classnames
classnames 是 React 官方推荐的一个用来控制给组件添加 CSS 类的一个包

参考：
1. [React/Redux 的好帮手Classnames](https://www.jianshu.com/p/9cf57787360d)
2. [classname-github仓库](https://github.com/JedWatson/classnames)

### prop-types
`prop-types`是用于参数类型检测的第三方包

### dayjs
`dayjs`是一个极简的JavaScript库(相比`moment`),可以为现代浏览器解析、验证、操作和显示日期和时间

### urijs
`urijs`是一个`uri`解析工具,可以方便地提取和编辑URL中的任意一部分


### left-pad
在字符串前填充一些东西到一定的长度。

这个模块有个大瓜：
[left-pad引发的血案](https://segmentfault.com/a/1190000004700432)


## 技术栈
### redux && react-redux
状态管理工具

[redux基础教程-阮一峰](http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html)


## 性能优化

### 工具
优化性能前，我们需要观察性能指标。那么，首先就需要安装chrome的2个插件：`React Developer Tools` && 
`Redux Devtools`,并勾选上` Highlight Update`。

### 常用手段
`memo && useMemo && useCallback`。

### 参考
1. [react性能优化工具](https://blog.csdn.net/qq_32281471/article/details/106893990)





## 多页面应用传值
### 页面内传值
   比如在首页`index.html`中需要进行日期选择、城市选择。
	 如果是单页应用，（必然）使用`react-router`时，进入日期选择新页面（或者城市选择新页面），把需要传递的参数通过router参数`query`或者`params`进行页面间传递即可；
	 但是对于多页应用来说，进入新页面后所有的资源重新加载，参数又需要来回传递，比较麻烦。
	 于是`index.html`中的处理逻辑是把日期组件、城市组件、本身业务组件全都放在一起，通过`display:none && block`切换显隐。因为本来就是存在一个页面里，就不存在传递的事情了（*解决不了问题，就消灭问题*）。
### 页面间传值
   确实需要页面间的传值，需要借助第三方库`urijs`。
比如index.html页面设置好搜索条件后，需要把条件参数传递给query.html。具体的做法是：
     
 1. 在index.html中使用form表单提交，于是自然地在跳转后通过search传递了相关参数；
 2. 在query.html中借助`urljs`的解析函数`URI.parseQuery(window.location.search)`,获取传递过来的参数。