巴哈场外休憩区B页爬虫 - 文章瀑布流

应该不少场外老巴友都知道，巴哈场外有分成B页和C页
B页是标题列表，也就是你各位整天缩在电脑前疯狂刷新的宅宅小世界

我自己滑场外是比较常用列表样式，但缩图样式显示的资讯会比较多
瀑布流的文章块资料主要就是从缩图排版抓的
接下来要说的是 JS 怎么做到把别站的内容爬到自己这边来

Axios ＆ Cheerio（去置顶 / 去广告）

AJAX == Asynchronous JavaScript and XML
它是 JS 非同步请求的技术 ：
我跟和伺服器要了资料后，不需要等待结果，程式仍然继续做其他事，对面把结果传回来给我之后，就放进当下页面里

而 Axios 是一个实现非同步请求的套件，这是构成专案最重要的一部份，没有它我拿不到巴哈的HTML

当然，用爬HTML的方式来实现巴哈瀑布流也有一个非常致命的缺点
就是当巴哈官方又在更新些有的没的时，原站的HTML结构若是改动，可能我这边也得修改
甚至最惨会出现前功尽弃，需要重新分析编写架构的状况

Cheerio 则是一个参照 Jquery 设计的套件，它们 API 极其相似，但 Cheerio 并不代表 Jquery
简单地说：Cheerio 能做很多 Jquery 能做的事情，但 Jquery 能做的事情 Cheerio 并不一定都能做

现在我们来爬虫：（这张截图是很早期的开发画面，现在改了很多，但已经足够表示）

众所周知，巴哈把广告塞在文章列表里面，所以爬虫一定会爬到：

列表总共30篇文章，爬回的总数却是31，然后第10个元素一定是空阵列
这是什么？ 是 Sega 的 money 阿

那么...怎么把 站长的生财工具 广告给去掉呢？ ──── Cheerio！
除了广告之外，我们也该把置顶文章给去掉，毕竟不会有人想到重複看到特定文章：

这段什么意思？
「如果标题不是空的（广告）、如果没有置顶标籤（板务文）、如果没有精华标籤（精华+板务文），
那么就爬回来我这边。」

这是一个很基础的资料筛选，你要什么、不要什么，都可以这样子搞定

chcp 65001

有没有发现上面那张截图，底下终端机印出来的东西都是乱码？

阿，这个搞得我很崩溃，因为我很确定爬到的都是对的资料，最后发现是文字编码设定问题
去 package.json 加入 "start": "chcp 65001" ，就会正常显示中文字了
chcp 是 windows cmd 的指令，65001 则是指示 cmd 换成中文显示环境

React Hook ＆ 为什么弃用 Class Component

React 元件分成两种：Class Component 与 Function Component
事情是这样的：原本只有 Function Component ，但大家非常需要的一个功能「State」随着 Class Component 问世了，于是开发者们纷纷把专案转成编写 Class Component

就在大家觉得情况大致底定了之后，事情又有了变化：
官方发布了新的功能「Hook」，让你不必写 Class Component 就能使用 state 以及其他 React 的功能
然后他们宣布 Hook 只能在 Function Component 里面用

......整人？ 已经用 Class Component 写了87%的大专案，是不可能给他这样瞎折腾
React 也可能发现这操作造成不少疑问，特别发布了一篇 Q&A
他们的论调是说：希望大家以后开发新专案的时候，再改成使用 Function Component

Function Component 写法少很多，可读性比较高
在 React Hook 问世之后，两者有了相同的功能，Function Component 却在程式码可读性上胜出
只能说 Hook 出现得太晚，给开发者一种被整的感觉，一个历史债的概念
我应该是不会回去用 Class Component 了，相信 Function Component 也会回归主流写法