昨天把慕课网的react教程看完了，加上今天的成果如下。
1. lightbox 效果制作
登陆弹窗的时候，需要背景变灰一点，无法滚动，只能按叉退出。
1.1 position: absolute
一开始使用 absolute，给 props 传值每次登陆组件渲染的时候传当前滚动条的位置，再填充进css样式里。
这样做有很多缺点：
- 一是还要传值不优雅。
- 二是如果灰色的时候点击回到顶部，由于登录组件并没有重新渲染，绝对定位导致还停留在底部的位置，这个时候滚动条也没有，滚不到底部，连退出都没办法，只能刷新。
1.2 position: fixed
用 fixed 直接完事，早该想到的。
2. addEventListener 的捕获和冒泡
之前一直以为第三个参数是指定捕获还是冒泡，但其实捕获和冒泡是一定会都发生的，第三个参数只是指定绑定在哪个阶段。完全可以捕获绑定一个，冒泡也绑定一个。然后捕获阶段发生一次，冒泡阶段再发生一次。
然后这里有一个小坑，捕获阶段不包括目标元素，冒泡阶段包括。看这里。
3. 链接和包裹该链接的容器同时定向到指定网页
- 由于 a 元素中不能包裹 a 元素，并且内部链接希望能够有 :visited 样式，因此只能将外部容器改为非 a 元素，然后设置 onClick 事件定向到目标网页。
- 中间的坑在于，设置了外部容器的 onClick 事件后，如果点击内部链接，由于事件冒泡，会跳转两次网页。
- 而直接在 Link 上设置 onClick 停止冒泡是做不到的，只能在 Link 外面再包裹一层元素，在 parents 元素上停止冒泡。
4. react-markdown
让 react 可以识别 markdown 语法。
5. react-loadable
异步加载网页组件，还有显示加载中功能。
5. HashRouter 和 BrowserRouter
- 然后这里还有一个坑，就是在 HashRouter 里使用 Link 不会有问题，但是如果使用类似于 window.open 这种方式打开页面，是不会加 hashtag 的，因此要手动添加。
6. 导航栏滚动
使用了闭包，每次滚动的时候比较scrollTop 和上次滚动的值之差，从而判断是往上还是往下滚动。
这里使用节流会有问题，因为节流函数一般也会用到防抖来发生最后一次事件，但是如果在这里用的话，会产生这么个情况：
- 首先给出代码：
- 鼠标向下滚动的时候，导航栏隐藏。
- 鼠标滚动完毕，静止了，但是此时由于节流的效果，静止的时候仍然会触发最后一次事件。
- 然而此时在判断的时候，scrollTop 和上次的 lastScroll 是一样的。
- 如果是上面这样的代码，就会产生向下滚动时导航栏确实收回了，但是停止的瞬间又回来了的情况。见下图，在这张图里我一直是向下滚动的，但是导航栏上下横跳（这个图的情况更不好，由于滚动较慢，滚动的时候就已经执行了防抖事件，判定了 scrollTop===lastScroll，然后在下次滚动的时候又被收回，因此表现为这样的BUG：）
- 即使把代码中的 <= 改成 = 也没用，这样子向下滑动没问题了，但是向上滑动又有问题了。
- 解决的方法有多种：
- 手动更改节流函数去掉防抖效果，缺点是如果节流值太大，有时候滚动太快就不会滚动。
- 对 scrollTop === lastScroll 的情况特殊处理。
- 使用第二种方式的代码如下：
- 这样子既防止了最后一次运行的 bug，也能享受到节流的最后一次防抖效果
- 运行结果，十分正常：
