前言
我常使用的Vue技术栈。对于React，一直是想接触而一直没有接触，因为听说上手很难。。
考虑到职业发展，还是决定好好学习该框架及其周边。
我首先跟着技术胖，花了2天的时间学习了react&&redux&&react-hooks，跟着撸代码发现很简单的嘛。
于是，我决定自己实现一个react-hooks项目。
然后我找到了一篇关于react-hooks总结的文章：React Hooks 详解 【近 1W 字】+ 项目实战，发现不错，然后按图索骥，跟着github从零开始一点点实现。
写代码的过程中发现了很多的问题。和Vue相比，react组件的封装粒度更细，对业务的理解及架构分析的要求也更高，对JS的基础要求也更高——react上手确实没那么容易。。。
在熟练使用react的道路上，还有很长的路要走。
项目介绍
这个项目是慕课网的一个课程：React劲爆新特性Hooks 重构旅游电商网站火车票PWA，仿的是支付宝小程序上的去哪儿网，使用的是多页开发模式。
我知道如果自己买课程跟着老师写代码，没有从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 类的一个包
参考：
prop-types
prop-types是用于参数类型检测的第三方包
dayjs
dayjs是一个极简的JavaScript库(相比moment),可以为现代浏览器解析、验证、操作和显示日期和时间
urijs
urijs是一个uri解析工具,可以方便地提取和编辑URL中的任意一部分
left-pad
在字符串前填充一些东西到一定的长度。
这个模块有个大瓜： left-pad引发的血案
技术栈
redux && react-redux
状态管理工具
性能优化
工具
优化性能前，我们需要观察性能指标。那么，首先就需要安装chrome的2个插件：React Developer Tools &&
Redux Devtools,并勾选上 Highlight Update。
常用手段
memo && useMemo && useCallback。
参考
多页面应用传值
页面内传值
比如在首页index.html中需要进行日期选择、城市选择。
如果是单页应用，（必然）使用react-router时，进入日期选择新页面（或者城市选择新页面），把需要传递的参数通过router参数query或者params进行页面间传递即可；
但是对于多页应用来说，进入新页面后所有的资源重新加载，参数又需要来回传递，比较麻烦。
于是index.html中的处理逻辑是把日期组件、城市组件、本身业务组件全都放在一起，通过display:none && block切换显隐。因为本来就是存在一个页面里，就不存在传递的事情了（解决不了问题，就消灭问题）。
页面间传值
确实需要页面间的传值，需要借助第三方库urijs。
比如index.html页面设置好搜索条件后，需要把条件参数传递给query.html。具体的做法是：
- 在index.html中使用form表单提交，于是自然地在跳转后通过search传递了相关参数；
- 在query.html中借助
urljs的解析函数URI.parseQuery(window.location.search),获取传递过来的参数。
最后
欢迎reacter来撩，批评指正、交流学习。
