寫給初中級(jí)前端的高級(jí)進(jìn)階指南(JS、TS、Vue、React、性能、學(xué)習(xí)...
原文來自于公眾號(hào)：前端從進(jìn)階到入院，覺得文章不錯(cuò)可以關(guān)注原作者公眾號(hào)。
前言
我曾經(jīng)一度很迷茫，在學(xué)了 Vue、React 的實(shí)戰(zhàn)開發(fā)和應(yīng)用以后，好像遇到了一些瓶頸，不知道該怎樣繼續(xù)深入下去。相信這也是很多一兩年經(jīng)驗(yàn)的前端工程師所遇到共同問題，這篇文章，筆者想結(jié)合自己的一些成長(zhǎng)經(jīng)歷整理出一些路線，幫助各位初中級(jí)前端工程師少走一些彎路。
筆者畢業(yè)于一個(gè)很普通的本科學(xué)校，非計(jì)算機(jī)專業(yè)，17 年的時(shí)候剛畢業(yè)的時(shí)候還不知道自己的方向在哪（實(shí)習(xí)做過銷售、運(yùn)營、推廣）。后來機(jī)緣巧合走上了開發(fā)這條路，第一年的時(shí)候 Java 和前端都做，慢慢發(fā)現(xiàn)了自己的興趣所在轉(zhuǎn)向前端。第二年的時(shí)候跳槽來到杭州，開始前端工程師的生涯。
目前開發(fā)經(jīng)驗(yàn)一共是 2 年 8 個(gè)月，目前帶一個(gè) 5 人的團(tuán)隊(duì)，前任的組長(zhǎng)讓我?guī)ьI(lǐng)團(tuán)隊(duì)的主要原因是個(gè)人技術(shù) + 溝通能力相對(duì)較好，但是在技術(shù)能力成長(zhǎng)的背后需要怎么去走呢，相信有很多小伙伴會(huì)迷失方向。
這篇文章會(huì)提到非常非常多的學(xué)習(xí)路線和鏈接，如果你還在初中級(jí)的階段，不必太焦慮，可以把這篇文章作為一個(gè)進(jìn)階的路線圖，在未來的時(shí)日里朝著這個(gè)方向努力就好。
我也并不是說這篇文章是進(jìn)階高級(jí)工程師的唯一一條路線，如果你在業(yè)務(wù)上做的精進(jìn)，亦或是能在溝通上八面玲瓏，配合各方面力量把項(xiàng)目做的漂漂亮亮，那你也一樣可以擁有這個(gè)頭銜。本文只是我自己的一個(gè)成長(zhǎng)路線總結(jié)。
本篇文章面對(duì)的人群是開發(fā)經(jīng)驗(yàn)1到3年的初中級(jí)前端工程師，希望能和你們交個(gè)心。
已經(jīng)晉升高級(jí)前端的同學(xué)，歡迎你在評(píng)論區(qū)留下你的心得，補(bǔ)充我的一些缺失和不足。
我的 github 地址[1]，歡迎 follow，我會(huì)持續(xù)更新一些值得你關(guān)注的項(xiàng)目。
我的 blog 地址[2]，這里會(huì)持續(xù)更新，點(diǎn)個(gè) star 不失聯(lián)！?
基礎(chǔ)能力
我整理了一篇中級(jí)前端的必備技術(shù)棧能力，寫給女朋友的中級(jí)前端面試秘籍[3] 。這篇文章里的技術(shù)棧當(dāng)然都是需要扎實(shí)掌握的，（其實(shí)我自己也有一些漏缺，偷偷補(bǔ)一下）。
當(dāng)然了，上進(jìn)心十足的你不會(huì)一直滿足于做中級(jí)前端，我們要繼續(xù)向上，升職加薪，迎娶白富美！
JavaScript
原生 js 系列
冴羽大佬的這篇博客里，除了 undescore 的部分，你需要全部都能掌握。并且靈活的運(yùn)用到開發(fā)中去。
JavaScript 深入系列、JavaScript 專題系列、ES6 系列[4]
完全熟練掌握 eventLoop。
tasks-microtasks-queues-and-schedules[5]
Promise
你需要閱讀 Promise A+規(guī)范，注意其中的細(xì)節(jié)，并且靈活的運(yùn)用到開發(fā)當(dāng)中去。
Promise A+ 英文文檔[6]你需要跟著精品教程手寫一遍 Promise，對(duì)里面的細(xì)節(jié)深入思考，并且把其中異步等待、錯(cuò)誤處理等等細(xì)節(jié)融會(huì)貫通到你的開發(fā)思想里去。
剖析 Promise 內(nèi)部結(jié)構(gòu)，一步一步實(shí)現(xiàn)一個(gè)完整的、能通過所有 Test case 的 Promise 類[7]最后，對(duì)于 promise 的核心，異步的鏈?zhǔn)秸{(diào)用，你必須能寫出來簡(jiǎn)化版的代碼。
最簡(jiǎn)實(shí)現(xiàn) Promise，支持異步鏈?zhǔn)秸{(diào)用（20 行）[8]
題外話，當(dāng)時(shí)精煉這 20 行真的繞了我好久 ?，但是搞明白了會(huì)有種恍然大悟的感覺。這種異步隊(duì)列的技巧要融會(huì)貫通。
async await
對(duì)于 Promise 我們非常熟悉了，進(jìn)一步延伸到 async await，這是目前開發(fā)中非常非常常用的異步處理方式，我們最好是熟悉它的 babel 編譯后的源碼。
手寫 async await 的最簡(jiǎn)實(shí)現(xiàn)（20 行搞定）[9]
babel 對(duì)于 async await 配合 generator 函數(shù)，做的非常巧妙，這里面的思想我們也要去學(xué)習(xí)，如何遞歸的處理一個(gè)串行的 promise 鏈？
這個(gè)技巧在axios 的源碼[10]里也有應(yīng)用。平常經(jīng)常用的攔截器，本質(zhì)上就是一串 promise 的串行執(zhí)行。
當(dāng)然，如果你還有余力的話，也可以繼續(xù)深入的去看 generator 函數(shù)的 babel 編譯源碼。不強(qiáng)制要求，畢竟 generator 函數(shù)在開發(fā)中已經(jīng)用的非常少了。
ES6 系列之 Babel 將 Generator 編譯成了什么樣子[11]
異常處理
你必須精通異步場(chǎng)景下的錯(cuò)誤處理，這是高級(jí)工程師必備的技能，如果開發(fā)中的異常被你寫的庫給吞掉了，那豈不是可笑。
Callback Promise Generator Async-Await 和異常處理的演進(jìn)[12]
插件機(jī)制
你需要大概理解前端各個(gè)庫中的插件機(jī)制是如何實(shí)現(xiàn)的，在你自己開發(fā)一些庫的時(shí)候也能融入自己適合的插件機(jī)制。
Koa 的洋蔥中間件，Redux 的中間件，Axios 的攔截器讓你迷惑嗎？實(shí)現(xiàn)一個(gè)精簡(jiǎn)版的就徹底搞懂了。[13]
設(shè)計(jì)模式
對(duì)于一些復(fù)雜場(chǎng)景，你的開發(fā)不能再是if else嵌套一把梭了，你需要把設(shè)計(jì)模式好好看一遍，在合適的場(chǎng)景下選擇合適的設(shè)計(jì)模式。這里就推薦掘金小冊(cè)吧，相信這篇小冊(cè)會(huì)讓你的工程能力得到質(zhì)的飛躍，舉例來說，在 Vue 的源碼中就用到了觀察者模式、發(fā)布訂閱模式、策略模式、適配器模式、發(fā)布訂閱模式、工廠模式、組合模式、代理模式、門面模式等等。
而這些設(shè)計(jì)模式如果你沒學(xué)習(xí)過可能很難想到如何應(yīng)用在工程之中，但是如果你學(xué)習(xí)過，它就變成了你內(nèi)在的工程能力，往大了說，也可以是架構(gòu)能力的一部分。
在《設(shè)計(jì)模式》這本小冊(cè)中我們提到過，即使是在瞬息萬變的前端領(lǐng)域，也存在一些具備“一次學(xué)習(xí)，終生受用”特性的知識(shí)。從工程的角度看，我推薦大家著重學(xué)習(xí)的是設(shè)計(jì)模式。-修言
基礎(chǔ)算法
掌握一些基礎(chǔ)算法核心思想或簡(jiǎn)單算法問題，比如排序。
開發(fā)思想
你需要知道組合優(yōu)于繼承的思想，不要再滿口都是 oop，寫什么都來個(gè) class extends 了，在前端 ui 扁平化的前提下，真的沒那么多需要繼承的場(chǎng)景。
https://medium.com/javascript-scene/master-the-javascript-interview-what-s-the-difference-between-class-prototypal-inheritance-e4cd0a7562e9
“…the problem with object-oriented languages is they’ve got all this implicit environment that they carry around with them. You wanted a banana but what you got was a gorilla holding the banana and the entire jungle.” ~ Joe Armstrong — “Coders at Work”
面向?qū)ο笳Z言的問題在于它們帶來了所有這些隱含的環(huán)境。你想要一個(gè)香蕉，但你得到的是拿著香蕉和整個(gè)叢林的大猩猩。
代碼規(guī)范
你需要熟讀 clean-code-javascript，并且深入結(jié)合到日常開發(fā)中，結(jié)合你們小組的場(chǎng)景制定自己的規(guī)范。
clean-code-javascript[14]
框架篇
對(duì)于高級(jí)工程師來說，你必須要有一個(gè)你趁手的框架，它就像你手中的一把利劍，能夠讓你披荊斬棘，斬殺各種項(xiàng)目于馬下。
下面我會(huì)分為Vue和React兩個(gè)方面深入去講。
Vue
Vue 方面的話，我主要是師從黃軼老師，跟著他認(rèn)真走，基本上在 Vue 這方面你可以做到基本無敵。
熟練運(yùn)用
對(duì)于 Vue 你必須非常熟練的運(yùn)用，官網(wǎng)的 api 你基本上要全部過一遍。并且你要利用一些高級(jí)的 api 去實(shí)現(xiàn)巧妙的封裝。舉幾個(gè)簡(jiǎn)單的例子。
你要知道怎么用
slot-scope去做一些數(shù)據(jù)和 ui 分離的封裝。以vue-promised[15]這個(gè)庫為例。Promised 組件并不關(guān)注你的視圖展示成什么樣，它只是幫你管理異步流程，并且通過你傳入的slot-scope，在合適的時(shí)機(jī)把數(shù)據(jù)回拋給你，并且?guī)湍闳フ故灸銈魅氲囊晥D。
<template>
??<Promised?:promise="usersPromise">
????
????<template?v-slot:pending>
??????<p>Loading...p>
????template>
????
????<template?v-slot="data">
??????<ul>
????????<li?v-for="user?in?data">{{?user.name?}}li>
??????ul>
????template>
????
????<template?v-slot:rejected="error">
??????<p>Error:?{{?error.message?}}p>
????template>
??Promised>
template>
- 你需要熟練的使用
Vue.extends，配合項(xiàng)目做一些命令式api的封裝。并且知道它為什么可以這樣用。（需要具備源碼知識(shí)）confirm 組件[16]
export?const?confirm?=?function(text,?title,?onConfirm?=?()?=>?{})?{
??if?(typeof?title?===?"function")?{
????onConfirm?=?title
????title?=?undefined
??}
??const?ConfirmCtor?=?Vue.extend(Confirm)
??const?getInstance?=?()?=>?{
????if?(!instanceCache)?{
??????instanceCache?=?new?ConfirmCtor({
????????propsData:?{
??????????text,
??????????title,
??????????onConfirm
????????}
??????})
??????//?生成dom
??????instanceCache.$mount()
??????document.body.appendChild(instanceCache.$el)
????}?else?{
??????//?更新屬性
??????instanceCache.text?=?text
??????instanceCache.title?=?title
??????instanceCache.onConfirm?=?onConfirm
????}
????return?instanceCache
??}
??const?instance?=?getInstance()
??//?確保更新的prop渲染到dom
??//?確保動(dòng)畫效果
??Vue.nextTick(()?=>?{
????instance.visible?=?true
??})
}
- 你要開始使用
JSX來編寫你項(xiàng)目中的復(fù)雜組件了，比如在我的網(wǎng)易云音樂項(xiàng)目中，我遇到了一個(gè)復(fù)雜的音樂表格需求[17]，支持搜索文字高亮、動(dòng)態(tài)隱藏列等等。
當(dāng)然對(duì)于現(xiàn)在版本的 Vue，JSX 還是不太好用，有很多屬性需要寫嵌套對(duì)象，這會(huì)造成很多不必要的麻煩，比如沒辦法像 React 一樣直接把外層組件傳入的 props 透?jìng)飨氯ィ琕ue3 的 rfc 中提到會(huì)把 vnode 節(jié)點(diǎn)的屬性進(jìn)一步扁平化，我們期待得到接近于 React 的完美 JSX 開發(fā)體驗(yàn)吧。
????const?tableAttrs?=?{
??????attrs,
??????on:?{
????????...this.$listeners,
????????["row-click"]:?this.onRowClick,
??????},
??????props:?{
????????...props,
????????headerCellClassName:?"title-th",
????????cellClassName:?this.tableCellClassName,
????????data:?this.songs,
??????},
????}
你要深入了解 Vue 中 nextTick 的原理，并且知道為什么要用微任務(wù)隊(duì)列優(yōu)于宏任務(wù)隊(duì)列，結(jié)合你的 eventloop 知識(shí)深度思考。最后融入到你的
異步合并優(yōu)化的知識(shí)體系中去。
Vue 源碼詳解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！[18]你要能理解 Vue 中的高階組件。關(guān)于這篇文章中為什么 slot-scope 不生效的問題，你不能看他的文章講解都一頭霧水。（需要你具備源碼知識(shí)）
探索 Vue 高階組件 | HcySunYang[19]對(duì)于 Vuex 和 vue-router 的使用必須非常熟練，知道什么時(shí)候該用 Vuex，什么需求需要利用什么樣的 router 鉤子，這樣才能 hold 住一個(gè)大型的項(xiàng)目，這個(gè)我覺得還是盡量去學(xué)源碼吧。
源碼深入
你不光要熟練運(yùn)用 Vue，由于 Vue 的源碼寫的非常精美，而且閱讀難度不是非常大，很多人也選擇去閱讀 Vue 的源碼。這里推薦黃軼老師的 Vue 源碼課程。這里也包括了 Vuex 和 vue-router 的源碼。
Vue.js 源碼全方位深入解析 （含 Vue3.0 源碼分析）[20]推薦 HcySunYang 大佬的 Vue 逐行分析，需要下載 git 倉庫，切到 elegant 分支自己本地啟動(dòng)。
Vue 逐行級(jí)別的源碼分析[21]當(dāng)然，這個(gè)倉庫的 master 分支也是寶藏，是這個(gè)作者的渲染器系列文章，脫離框架講解了 vnode 和 diff 算法的本質(zhì)
組件的本質(zhì)[22]
Vue3 展望
- Vue3 已經(jīng)發(fā)布了 Alpha 版本，你可以提前學(xué)習(xí)
Hook相關(guān)的開發(fā)模式了，面向未來的異步請(qǐng)求管理是zeit/swr[23]這種自定義 Hook 庫所帶來的。在講解之前，先舉個(gè)例子，在 Vue2 中如果我需要請(qǐng)求一份數(shù)據(jù)，并且在loading和error時(shí)都展示對(duì)應(yīng)的視圖，一般來說，我們會(huì)這樣寫：
<template>
????<div?v-if="error">failed?to?loaddiv>
????<div?v-else-if="loading">loading...div>
????<div?v-else>hello?{{fullName}}!div>
template>
<script>
import?{?createComponent,?computed?}?from?'vue'
import?useSWR?from?'vue-swr'
export?default?{
??data()?{
????//?集中式的data定義?如果有其他邏輯相關(guān)的數(shù)據(jù)就很容易混亂
????return?{
????????data:?{
????????????firstName:?'',
????????????lastName:?''
????????},
????????loading:?false,
????????error:?false,
????},
??},
??async?created()?{
??????try?{
????????//?管理loading
????????this.loading?=?true
????????//?取數(shù)據(jù)
????????const?data?=?await?this.$axios('/api/user')
????????this.data?=?data
??????}?catch?(e)?{
????????//?管理error
????????this.error?=?true
??????}?finally?{
????????//?管理loading
????????this.loading?=?false
??????}
??},
??computed()?{
??????//?沒人知道這個(gè)fullName和哪一部分的異步請(qǐng)求有關(guān)?和哪一部分的data有關(guān)?除非仔細(xì)閱讀
??????//?在組件大了以后更是如此
??????fullName()?{
??????????return?this.data.firstName?+?this.data.lastName
??????}
??}
}
script>
這段代碼，怎么樣都談不上優(yōu)雅，湊合的把功能完成而已，并且對(duì)于loading、error等處理的可復(fù)用性為零。
數(shù)據(jù)和邏輯也被分散在了各個(gè)option中，這還只是一個(gè)邏輯，如果又多了一些邏輯，多了data、computed、methods？如果你是一個(gè)新接手這個(gè)文件的人，你如何迅速的分辨清楚這個(gè)method是和某兩個(gè)data中的字段關(guān)聯(lián)起來的？
讓我們把zeit/swr[24]的邏輯照搬到 Vue3 中，
看一下swr在 Vue3 中的表現(xiàn)：
<template>
????<div?v-if="error">failed?to?loaddiv>
????<div?v-else-if="loading">loading...div>
????<div?v-else>hello?{{fullName}}!div>
template>
<script>
import?{?createComponent,?computed?}?from?'vue'
import?useSWR?from?'vue-swr'
export?default?createComponent({
??setup()?{
??????//?useSWR幫你管理好了取數(shù)、緩存、甚至標(biāo)簽頁聚焦重新請(qǐng)求、甚至Suspense...
??????const?{?data,?loading,?error?}?=?useSWR('/api/user',?fetcher)
??????//?輕松的定義計(jì)算屬性
??????const?fullName?=?computed(()?=>?data.firstName?+?data.lastName)
??????return?{?data,?fullName,?loading,?error?}
??}
})
script>
就是這么簡(jiǎn)單，對(duì)嗎？邏輯更加聚合了。
有人要問，全部邏輯都寫在 setup 里了，這是面條式代碼！而且針對(duì)我上面提出的代碼邏輯分散的問題，哪里進(jìn)步了。
那么我們用自定義hook把邏輯統(tǒng)一抽出來？
<template>
????<div?v-if="error">failed?to?loaddiv>
????<div?v-else-if="loading">loading...div>
????<div?v-else>hello?{{fullName}}!div>
template>
<script>
import?{?createComponent,?computed?}?from?'vue'
import?useSWR?from?'vue-swr'
export?default?createComponent({
??setup()?{
????return?{?...useName()?}
??}
})
//?姓名相關(guān)邏輯
function?useName()?{
???//?useSWR幫你管理好了取數(shù)、緩存、甚至標(biāo)簽頁聚焦重新請(qǐng)求、甚至Suspense...
???const?{?data,?loading,?error?}?=?useSWR('/api/user',?fetcher)
???//?輕松的定義計(jì)算屬性
???const?fullName?=?computed(()?=>?data.firstName?+?data.lastName)
???return?{?data,?fullName,?loading,?error?}
}
script>
這下好了，useName這個(gè) hook 甚至成為了一個(gè)所有組件都可以共用的 hook。在 Vue2 里，你怎么抽取？難道用mixins？
那么你應(yīng)該看這篇知乎：為何不要用 mixins 來實(shí)現(xiàn)組件復(fù)用[25]
Vue3 源碼
對(duì)于響應(yīng)式部分，如果你已經(jīng)非常熟悉 Vue2 的響應(yīng)式原理了，那么 Vue3 的響應(yīng)式原理對(duì)你來說應(yīng)該沒有太大的難度。甚至在學(xué)習(xí)之中你會(huì)相互比較，知道 Vue3 為什么這樣做更好，Vue2 還有哪部分需要改進(jìn)等等。
Vue3 其實(shí)就是把實(shí)現(xiàn)換成了更加強(qiáng)大的 Proxy，并且把響應(yīng)式部分做的更加的抽象，甚至可以，不得不說，Vue3 的響應(yīng)式模型更加接近響應(yīng)式類庫的核心了，甚至react-easy-state等 React 的響應(yīng)式狀態(tài)管理庫，也是用這套類似的核心做出來的。
再次強(qiáng)調(diào)，非常非常推薦學(xué)習(xí) Vue3 的@vue/reactivity這個(gè)分包。
推一波自己的文章吧，細(xì)致了講解了 Vue3 響應(yīng)式的核心流程。
帶你徹底搞懂 Vue3 的 Proxy 響應(yīng)式原理！TypeScript 從零實(shí)現(xiàn)基于 Proxy 的響應(yīng)式庫。[26]
帶你徹底搞懂 Vue3 的 Proxy 響應(yīng)式原理！基于函數(shù)劫持實(shí)現(xiàn) Map 和 Set 的響應(yīng)式[27]
深度解析：Vue3 如何巧妙的實(shí)現(xiàn)強(qiáng)大的 computed[28]
在學(xué)習(xí)之后，我把@vue/reactivity包輕松的集成到了 React 中，做了一個(gè)狀態(tài)管理的庫，這也另一方面佐證了這個(gè)包的抽象程度：
40 行代碼把 Vue3 的響應(yīng)式集成進(jìn) React 做狀態(tài)管理[29]
React
React 已經(jīng)進(jìn)入了 Hook 為主的階段，社區(qū)的各個(gè)庫也都在積極擁抱 Hook，雖然它還有很多陷阱和不足，但是這基本上是未來的方向沒跑了。這篇文章里我會(huì)減少 class 組件的開發(fā)技巧的提及，畢竟好多不錯(cuò)的公司也已經(jīng)全面擁抱 Hook 了。
熟練應(yīng)用
你必須掌握官網(wǎng)中提到的所有技巧，就算沒有使用過，你也要大概知道該在什么場(chǎng)景使用。
推薦 React 小書，雖然書中的很多 api 已經(jīng)更新了，但是核心的設(shè)計(jì)思想還是沒有變
React.js 小書[30]關(guān)于熟練應(yīng)用，其實(shí)掘金的小冊(cè)里有幾個(gè)寶藏
誠身大佬（悄悄告訴你，他的職級(jí)非常高）的企業(yè)級(jí)管理系統(tǒng)小冊(cè)，這個(gè)項(xiàng)目里的代碼非常深入，而且在抽象和優(yōu)化方面也做的無可挑剔，自己抽象了
acl權(quán)限管理系統(tǒng)和router路由管理，并且引入了reselect做性能優(yōu)化，一年前我初次讀的時(shí)候，很多地方懵懵懂懂，這一年下來我也從無到有經(jīng)手了一套帶acl和權(quán)限路由的管理系統(tǒng)后，才知道他的抽象能力有多強(qiáng)。真的是初聞不知曲中意，再聞已是曲中人。
React 組合式開發(fā)實(shí)踐：打造企業(yè)管理系統(tǒng)五大核心模塊[31]
三元大佬的 React Hooks 與 Immutable 數(shù)據(jù)流實(shí)戰(zhàn)，深入淺出的帶你實(shí)現(xiàn)一個(gè)音樂播放器。三元大家都認(rèn)識(shí)吧？那是神，神帶你們寫應(yīng)用項(xiàng)目，不學(xué)能說得過去嗎？React Hooks 與 Immutable 數(shù)據(jù)流實(shí)戰(zhàn)[32]
深入理解 React 中的
key
understanding-reacts-key-prop[33]react 中為何推薦設(shè)置 key[34]
React 官方團(tuán)隊(duì)成員對(duì)于
派生狀態(tài)的思考：
you-probably-dont-need-derived-state[35]
React Hook
你必須熟練掌握 Hook 的技巧，除了官網(wǎng)文檔熟讀以外：
推薦 Dan 的博客，他就是 Hook 的代碼實(shí)際編寫者之一，看他怎么說夠權(quán)威了吧？這里貼心的送上漢化版。
useEffect 完整指南[36]
看完這篇以后，進(jìn)入dan 的博客主頁[37]，找出所有和 Hook 有關(guān)的，全部精讀！推薦黃子毅大佬的精讀周刊系列
096.精讀《useEffect 完全指南》.md[38]
注意！不是只看這一篇，而是這個(gè)倉庫里所有有關(guān)于 React Hook 的文章都去看一遍，結(jié)合自己的思想分析。Hook 陷阱系列 還是 Dan 老哥的文章，詳細(xì)的講清楚了所謂
閉包陷阱產(chǎn)生的原因和設(shè)計(jì)中的權(quán)衡。
函數(shù)式組件與類組件有何不同？[39]去找一些社區(qū)的精品自定義 hook，看看他們的開發(fā)和設(shè)計(jì)思路，有沒有能融入自己的日常開發(fā)中去的。
精讀《Hooks 取數(shù) - swr 源碼》[40]
Umi Hooks - 助力擁抱 React Hooks[41]
React Hooks 的體系設(shè)計(jì)之一 - 分層[42]
React 性能優(yōu)化
React 中優(yōu)化組件重渲染，這里有幾個(gè)隱含的知識(shí)點(diǎn)。
optimize-react-re-renders[43]
如何對(duì) React 函數(shù)式組件進(jìn)行性能優(yōu)化？這篇文章講的很詳細(xì)，值得仔細(xì)閱讀一遍。[https://juejin.im/post/5dd337985188252a1873730f](如何對(duì) React 函數(shù)式組件進(jìn)行優(yōu)化 "https://juejin.im/post/5dd337985188252a1873730f")
React 單元測(cè)試
使用
@testing-library/react測(cè)試組件，這個(gè)庫相比起 enzyme 更好的原因在于，它更注重于站在用戶的角度去測(cè)試一個(gè)組件，而不是測(cè)試這個(gè)組件的實(shí)現(xiàn)細(xì)節(jié)。
Introducing The React Testing Library[44]
Testing Implementation Details[45]使用
@testing-library/react-hooks測(cè)試自定義 Hook
how-to-test-custom-react-hooks[46]
React 和 TypeScript 結(jié)合使用
這個(gè)倉庫非常詳細(xì)的介紹了如何把 React 和 TypeScript 結(jié)合，并且給出了一些進(jìn)階用法的示例，非常值得過一遍！
react-typescript-cheatsheet[47]這篇文章是螞蟻金服數(shù)據(jù)體驗(yàn)技術(shù)部的同學(xué)帶來的，其實(shí)除了這里面的技術(shù)文章以外，螞蟻金服的同學(xué)也由非常生動(dòng)給我們講解了一個(gè)高級(jí)前端同學(xué)是如何去社區(qū)尋找方案，如何思考和落地到項(xiàng)目中的，由衷的佩服。
React + Typescript 工程化治理實(shí)踐[48]微軟的大佬帶你寫一個(gè)類型安全的組件，非常深入，非常過癮...
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)[49]React + TypeScript 10 個(gè)需要避免的錯(cuò)誤模式。
10-typescript-pro-tips-patterns-with-or-without-react[50]
React 代碼抽象思考
何時(shí)應(yīng)該把代碼拆分為組件？
when-to-break-up-a-component-into-multiple-components[51]仔細(xì)思考你的 React 應(yīng)用中，狀態(tài)應(yīng)該放在什么位置，是組件自身，提升到父組件，亦或是局部 context 和 redux，這會(huì)有益于提升應(yīng)用的性能和可維護(hù)性。
state-colocation-will-make-your-react-app-faster[52]仔細(xì)思考 React 組件中的狀態(tài)應(yīng)該如何管理，優(yōu)先使用派生狀態(tài)，并且在適當(dāng)?shù)臅r(shí)候利用 useMemo、reselect 等庫去優(yōu)化他們。
dont-sync-state-derive-it[53]React Hooks 的自定義 hook 中，如何利用 reducer 的模式提供更加靈活的數(shù)據(jù)管理，讓用戶擁有數(shù)據(jù)的控制權(quán)。
the-state-reducer-pattern-with-react-hooks[54]
TypeScript
自從 Vue3 橫空出世以來，TypeScript 好像突然就火了。這是一件好事，推動(dòng)前端去學(xué)習(xí)強(qiáng)類型語言，開發(fā)更加嚴(yán)謹(jǐn)。并且第三方包的 ts 類型支持的加入，讓我們甚至很多時(shí)候都不再需要打開文檔對(duì)著 api 擼了。
關(guān)于 TypeScript 學(xué)習(xí)，其實(shí)幾個(gè)月前我還對(duì)于這門 JavaScript 的超集一竅不通，經(jīng)過兩三個(gè)月的靜心學(xué)習(xí)，我能夠去理解一些相對(duì)復(fù)雜的類型了，
可以說 TypeScript 的學(xué)習(xí)和學(xué)一個(gè)庫或者學(xué)一個(gè)框架是完全不同的，
入門
除了官方文檔以外，還有一些比較好的中文入門教程。
TypeScript Handbook 入門教程 [55]TypeScript Deep Dive 非常高質(zhì)量的英文入門教學(xué)。
TypeScript Deep Dive[56]工具泛型在日常開發(fā)中都非常的常用，必須熟練掌握。
TS 一些工具泛型的使用及其實(shí)現(xiàn)[57]視頻課程，還是黃軼大佬的，并且這個(gè)課程對(duì)于單元測(cè)試、前端手寫框架、以及網(wǎng)絡(luò)請(qǐng)求原理都非常有幫助。
基于 TypeScript 從零重構(gòu) axios[58]
進(jìn)階
這五篇文章里借助非常多的案例，為我們講解了 ts 的一些高級(jí)用法，請(qǐng)務(wù)必反復(fù)在 ide 里嘗試，理解，不懂的概念及時(shí)回到文檔中補(bǔ)習(xí)。
巧用 TypeScript 系列 一共五篇[59]TS 進(jìn)階非常重要的一點(diǎn)，條件類型，很多泛型推導(dǎo)都需要借助它的力量。
conditional-types-in-typescript[60]以及上面那個(gè)大佬博客中的所有 TS 文章。
https://mariusschulz.com
實(shí)戰(zhàn)
一個(gè)參數(shù)簡(jiǎn)化的實(shí)戰(zhàn)，涉及到的高級(jí)知識(shí)點(diǎn)非常多。
- ?TypeScript 的高級(jí)類型（Advanced Type）
- ?Conditional Types (條件類型)
- ?Distributive conditional types (分布條件類型)
- ?Mapped types（映射類型）
- ? 函數(shù)重載
TypeScript 參數(shù)簡(jiǎn)化實(shí)戰(zhàn)[61]
實(shí)現(xiàn)一個(gè)簡(jiǎn)化版的 Vuex，同樣知識(shí)點(diǎn)結(jié)合滿滿。
- ?TypeScript 的高級(jí)類型（Advanced Type[62]）
- ?TypeScript 中利用泛型進(jìn)行反向類型推導(dǎo)。(Generics[63])
- ?Mapped types（映射類型）
- ?Distributive Conditional Types（條件類型分配）
- ?TypeScript 中 Infer 的實(shí)戰(zhàn)應(yīng)用（Vue3 源碼里 infer 的一個(gè)很重要的使用[64]）
TS 實(shí)現(xiàn)智能類型推導(dǎo)的簡(jiǎn)化版 Vuex[65]
刻意訓(xùn)練
它幾乎是一門新的語言（在類型世界里來說），需要你花費(fèi)很大的精力去學(xué)好它。
我對(duì)于 TypeScript 的學(xué)習(xí)建議其實(shí)就是一個(gè)關(guān)鍵詞：刻意訓(xùn)練，在過基礎(chǔ)概念的時(shí)候，不厭其煩的在vscode中敲擊，理解，思考。在基礎(chǔ)概念過完以后去尋找實(shí)踐文章，比如我上面進(jìn)階和實(shí)戰(zhàn)部分推薦的幾篇，繼續(xù)刻意訓(xùn)練，一定要堆積代碼量，學(xué)習(xí)一門新的語言是不可能靠看文檔獲得成功的。
我會(huì)建立一個(gè)倉庫，專門記錄我遇到的TypeScript 的有趣代碼[66]，自己動(dòng)手敲一遍，并且深入理解。
能力分級(jí)
其實(shí) TypeScript 的能力也是兩級(jí)分化的，日常寫業(yè)務(wù)來說，你定義一些 interface，配合 React.FC 這種官方內(nèi)置的類型也就跑通了，沒什么特別難的點(diǎn)。
但是如果是造輪子呢？如果你自己寫了一個(gè)工具庫，并且類型比較復(fù)雜，你能保證推導(dǎo)出來嗎？亦或者就拿 Vue3 來說，ref 是一個(gè)很復(fù)雜的嵌套類型，
假如我們這樣定義一個(gè)值const value = ref(ref(2))，對(duì)于嵌套的 ref，Vue3 會(huì)做一層拆包，也就是說其實(shí)ref.value會(huì)是 2，
那么它是如何讓 ts 提示出 value 的類型是 number 的呢？
如果你看到源碼里的這段代碼，你只有基礎(chǔ)的話，保證懵逼。
//?Recursively?unwraps?nested?value?bindings.
export?type?UnwrapRef?=?{
??cRef:?T?extends?ComputedRef???UnwrapRef?:?T
??ref:?T?extends?Ref???UnwrapRef?:?T
??array:?T
??object:?{?[K?in?keyof?T]:?UnwrapRef?}
}[T?extends?ComputedRef
????'cRef'
??:?T?extends?Array
??????'array'
????:?T?extends?Ref?|?Function?|?CollectionTypes?|?BaseTypes
????????'ref'?//?bail?out?on?types?that?shouldn't?be?unwrapped
??????:?T?extends?object???'object'?:?'ref']
業(yè)務(wù)開發(fā)人員
如果短期內(nèi)你對(duì)自己的要求是能上手業(yè)務(wù)，那么你理解 TypeScript 基礎(chǔ)的interface和type編寫和泛型的普通使用（可以理解為類型系統(tǒng)里的函數(shù)傳參）也已經(jīng)足夠。
框架開發(fā)人員
但是長(zhǎng)期來看，如果你的目的是能夠自己編寫一些類型完善的庫或框架，或者說你在公司扮演前端架構(gòu)師、輪子專家等等角色，經(jīng)常需要寫一些偏底層的庫給你的小伙伴們使用，那么你必須深入學(xué)習(xí)，這樣才能做到給你的框架使用用戶完美的類型體驗(yàn)。
面試題
TypeScript 相關(guān)的面試題我見得不多，不過力扣中國的面試題算是難度偏高的，其中有一道 TS 的面試題，可以說是實(shí)用性和難度都有所兼顧，簡(jiǎn)單來說就是解包。
//?解開參數(shù)和返回值中的Promise
asyncMethod(input:?Promise):?Promise>
?↓
asyncMethod(input:?T):?Action
//?解開參數(shù)中的Action
syncMethod(action:?Action):?Action
?↓
syncMethod(action:?T):?Action
我在高強(qiáng)度學(xué)習(xí)了兩三個(gè)月 TS 的情況下，已經(jīng)能把這道題目相對(duì)輕松的解出來，相信這也是說明我的學(xué)習(xí)路線沒有走偏（題解就不放了，尊重面試題，其實(shí)就是考察了映射類型和infer的使用）。
力扣面試題[67]
代碼質(zhì)量
代碼風(fēng)格
在項(xiàng)目中集成 Prettier + ESLint + Airbnb Style Guideintegrating-prettier-eslint-airbnb-style-guide-in-vscode[68]
在項(xiàng)目中集成 ESLint with Prettier, TypeScript[69]
高質(zhì)量架構(gòu)
- 如何重構(gòu)一個(gè)過萬 Star 開源項(xiàng)—BetterScroll，是由滴滴的大佬嵇智[70]所帶來的，無獨(dú)有偶的是，這篇文章除了詳細(xì)的介紹一個(gè)合格的開源項(xiàng)目應(yīng)該做到的代碼質(zhì)量保證，測(cè)試流程，持續(xù)集成流程以外，也體現(xiàn)了他的一些思考深度，非常值得學(xué)習(xí)。
如何重構(gòu)一個(gè)過萬 Star 開源項(xiàng)目—BetterScroll[71]
Git 提交信息
很多新手在提交 Git 信息的時(shí)候會(huì)寫的很隨意，比如
fix、test、修復(fù)，這么糊弄的話是會(huì)被 leader 揍的！[譯]如何撰寫 Git 提交信息[72]
Git-Commit-Log 規(guī)范（Angular 規(guī)范）[73]
commitizen[74]規(guī)范流程的 commit 工具，規(guī)范的 commit 格式也會(huì)讓工具幫你生成友好的
changelog
構(gòu)建工具
- webpack 基礎(chǔ)和優(yōu)化
深入淺出 webpack[75] - 滴滴前端工程師的 webpack 深入源碼分析系列，非常的優(yōu)秀。
webpack 系列之一總覽[76]
性能優(yōu)化
- 推薦修言大佬的一本小冊(cè)，真的是講的很好很好了，從
webpack到網(wǎng)絡(luò)到dom操作，全方位的帶你做一些性能優(yōu)化實(shí)戰(zhàn)。這本小冊(cè)我當(dāng)時(shí)看的時(shí)候真的是完全停不下來，修言大佬的風(fēng)格既輕松又幽默。但是講解的東西卻能讓你受益匪淺。
谷歌開發(fā)者性能優(yōu)化章節(jié)，不用多說了吧？很權(quán)威了。左側(cè)菜單欄里還有更多相關(guān)內(nèi)容，可以按需選擇學(xué)習(xí)。
user-centric-performance-metrics[77]詳談合成層，合成層這個(gè)東西離我們忽遠(yuǎn)忽近，可能你的一個(gè)不小心的操作就造成
層爆炸，當(dāng)然需要仔細(xì)關(guān)注啦。起碼，在性能遇到瓶頸的時(shí)候，你可以打開 chrome 的layer面板，看看你的頁面到底是怎么樣的一個(gè)層分布。
詳談層合成（composite）[78]劉博文大佬的性能優(yōu)化指南，非常清晰的講解了網(wǎng)頁優(yōu)化的幾個(gè)重要的注意點(diǎn)。
讓你的網(wǎng)頁更絲滑[79]
社區(qū)討論
作為一個(gè)合格的前端工程師，一定要積極的深入社區(qū)去了解最新的動(dòng)向，比如在twitter上關(guān)注你喜歡的技術(shù)開發(fā)人員，如 Dan、尤雨溪。
另外 Github 上的很多 issue 也是寶藏討論，我就以最近我對(duì)于 Vue3 的學(xué)習(xí)簡(jiǎn)單的舉幾個(gè)例子。
為什么 Vue3 不需要時(shí)間切片？
尤雨溪解釋關(guān)于為什么在 Vue3 中不加入 React 時(shí)間切片功能？并且詳細(xì)的分析了 React 和 Vue3 之間的一些細(xì)節(jié)差別，狠狠的吹了一波 Vue3（愛了愛了）。
Why remove time slicing from vue3?[80]
Vue3 的composition-api到底好在哪？
Vue3 的 functional-api 相關(guān)的 rfc，尤大舌戰(zhàn)群儒，深入淺出的為大家講解了 Vue3 的設(shè)計(jì)思路等等。
Amendment proposal to Function-based Component API[81]
Vue3composition-api的第一手文檔
vue-composition-api 的 rfc 文檔，在國內(nèi)資料還不齊全的情況下，我去閱讀了
vue-composition-api-rfc[82] 英文版文檔，對(duì)于里面的設(shè)計(jì)思路嘆為觀止，學(xué)到了非常非常多尤大的思想。
總之，對(duì)于你喜歡的倉庫，都可以去看看它的 issue 有沒有看起來感興趣的討論，你也會(huì)學(xué)到非常多的東西。并且你可以和作者保持思路上的同步，這是非常難得的一件事情。
關(guān)于 Hook 的一些收獲
我在狠狠的吸收了一波尤大對(duì)于 Vue3 composition-api的設(shè)計(jì)思路的講解，新舊模式的對(duì)比以后，這篇文章就是我對(duì) Vue3 新模式的一些見解。
Vue3 Composition-Api + TypeScript + 新型狀態(tài)管理模式探索。[83]
并且由于它和React Hook在很多方面的思想也非常相近，這甚至對(duì)于我在React Hook上的使用也大有裨益，比如代碼組織的思路上，
在第一次使用Hook開發(fā)的時(shí)候，大部分人可能還是會(huì)保留著以前的思想，把state集中起來定義在代碼的前一大段，把computed集中定義在第二段，把mutation定義在第三段，如果不看尤大對(duì)于設(shè)計(jì)思想的講解，我也一直是在這樣做。
但是為什么 Logical Concerns 優(yōu)于 Vue2 和 React Class Component 的 Option Types？看完detailed-design[84]這個(gè)章節(jié)你就全部明白了，并且這會(huì)融入到你日常開發(fā)中去。
總之，看完這篇以后，我果斷的把公司里的首屏組件的一坨代碼直接抽成了 n 個(gè)自定義 hook，維護(hù)效率提升簡(jiǎn)直像是坐火箭。
當(dāng)然，社區(qū)里的寶藏 issue 肯定不止這些，我只是簡(jiǎn)單的列出了幾個(gè)，但就是這幾個(gè)都讓我的技術(shù)視野開闊了很多，并且是真正的融入到公司的業(yè)務(wù)實(shí)戰(zhàn)中去，是具有業(yè)務(wù)價(jià)值的。希望你養(yǎng)成看 issue，緊跟英文社區(qū)的習(xí)慣，Github issue 里單純的技術(shù)探討氛圍，真的是國內(nèi)很少有社區(qū)可以媲美的。
function?AppInner({?children?})?{
??const?[menus,?setMenus]?=?useState({});
??//?用戶信息
??const?user?=?useUser();
??//?主題能力
??useTheme();
??//?權(quán)限獲取
??useAuth({
????setMenus,
??});
??//?動(dòng)態(tài)菜單也需要用到菜單的能力
??useDynamicMenus({
????menus,
????setMenus,
??});
??return?(
????<Context.Provider?value={user}>
??????<Layout?routers={backgrounds}>
????????{children}
??????Layout>
????Context.Provider>
??);
}
可以看到，Hook在代碼組織的方面有著得天獨(dú)厚的優(yōu)勢(shì)，甚至各個(gè)模塊之間值的傳遞都是那么的自然，僅僅是函數(shù)傳參而已。
總之，社區(qū)推出一些新的東西，它總歸是解決了之前的一些痛點(diǎn)。我們跟著大佬的思路走，一定有肉吃。
Tree Shaking 的 Issue
相學(xué)長(zhǎng)的文章你的 Tree-Shaking 并沒什么卵用[85]中，也詳細(xì)的描述了他對(duì)于副作用的一些探尋過程，在UglifyJS 的 Issue[86]中找到了最終的答案，然后貢獻(xiàn)給中文社區(qū)，這些內(nèi)容最開始不會(huì)在任何中文社區(qū)里出現(xiàn)，只有靠你去探尋和發(fā)現(xiàn)。
學(xué)習(xí)方法的轉(zhuǎn)變
從初中級(jí)前端開始往高級(jí)前端進(jìn)階，有一個(gè)很重要的點(diǎn)，就是很多情況下國內(nèi)社區(qū)能找到的資料已經(jīng)不夠用了，而且有很多優(yōu)質(zhì)資料也是從國外社區(qū)二手、三手翻譯過來的，翻譯質(zhì)量也不能保證。
這就引申出我們進(jìn)階的第一個(gè)點(diǎn)，開始接受英文資料。
這里很多同學(xué)說，我的英文能力不行啊，看不懂。其實(shí)我想說，筆者的英語能力也很一般，從去年開始我立了個(gè)目標(biāo)，就是帶著劃詞翻譯插件也要開始艱難的看英文文章和資料，遇到不懂的單詞就劃出來看兩眼（沒有刻意去背），第五六次遇見這個(gè)單詞的時(shí)候，就差不多記得它是什么意思了。
半年左右的時(shí)間下來，（大概保持每周 3 篇以上的閱讀量）能肉眼可見的感覺自己的英語能力在進(jìn)步，很多時(shí)候不用劃詞翻譯插件，也可以完整的閱讀下來一段文章。
這里是我當(dāng)時(shí)閱讀英文優(yōu)質(zhì)文章的一些記錄，
英文技術(shù)文章閱讀[87]
后面英文閱讀慢慢成了一件比較自然的事情，也就沒有再刻意去記錄，前期可以用這種方式激勵(lì)自己。
推薦兩個(gè)英文站點(diǎn)吧，有很多高質(zhì)量的前端文章。
dev.to[88]
medium[89]
medium 可能需要借助一些科學(xué)工具才能查看，但是里面的會(huì)員付費(fèi)以及作者激勵(lì)機(jī)制使得文章非常的優(yōu)質(zhì)。登錄自己的谷歌賬號(hào)即可成為會(huì)員，前期可能首頁不會(huì)推薦一些前端相關(guān)的文章，你可以自己去搜索關(guān)鍵字如Vue、React、Webpack，任何你興趣的前端技術(shù)棧，不需要過多久你的首頁就會(huì)出現(xiàn)前端的推薦內(nèi)容。好好享受這個(gè)高質(zhì)量的英文社區(qū)吧。
關(guān)于實(shí)踐
社區(qū)有很多大佬實(shí)力很強(qiáng)，但是對(duì)新手寫的代碼嗤之以鼻，認(rèn)為有 any 的就不叫 TypeScript、認(rèn)為沒有單元測(cè)試就沒資格丟到 Github 上去。這種言論其實(shí)也不怪他們，他們也只是對(duì)開源軟件的要求高到偏執(zhí)而已。但是對(duì)于新手學(xué)習(xí)來說，這種言論很容易對(duì)大家造成打擊，導(dǎo)致不敢寫 ts，寫的東西不敢放出來。其實(shí)大可不必，工業(yè)聚 對(duì)于這些觀點(diǎn)就發(fā)表了一篇很好的看法，讓我覺得深受打動(dòng)，也就是這篇文章開始，我慢慢的把舊項(xiàng)目用 ts 改造起來，慢慢的進(jìn)步。
總結(jié)
本篇文章是我在這一年多的學(xué)習(xí)經(jīng)歷抽象中總結(jié)出來，還有很多東西我會(huì)陸續(xù)加入到這篇文章中去。
希望作為初中級(jí)前端工程師的你，能夠有所收獲。如果能夠幫助到你就是我最大的滿足。
未完待續(xù)... 持續(xù)更新中。
參考資料
[1]我的 github 地址: https://github.com/sl1673495
[2]我的 blog 地址: https://github.com/sl1673495/blogs
[3]寫給女朋友的中級(jí)前端面試秘籍: https://juejin.im/post/5e7af0685188255dcf4a497e
[4]JavaScript 深入系列、JavaScript 專題系列、ES6 系列: https://github.com/mqyqingfeng/Blog
[5]tasks-microtasks-queues-and-schedules: https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules
[6]Promise A+ 英文文檔: http://promisesaplus.com
[7]剖析 Promise 內(nèi)部結(jié)構(gòu)，一步一步實(shí)現(xiàn)一個(gè)完整的、能通過所有 Test case 的 Promise 類: https://github.com/xieranmaya/blog/issues/3
[8]最簡(jiǎn)實(shí)現(xiàn) Promise，支持異步鏈?zhǔn)秸{(diào)用（20 行）: https://juejin.im/post/5e6f4579f265da576429a907
[9]手寫 async await 的最簡(jiǎn)實(shí)現(xiàn)（20 行搞定）: https://juejin.im/post/5e79e841f265da5726612b6e
[10]axios 的源碼: https://github.com/axios/axios/blob/e50a08b2c392c6ce3b5a9dc85ebc860d50414529/lib/core/Axios.js#L49-L62
[11]ES6 系列之 Babel 將 Generator 編譯成了什么樣子: https://github.com/mqyqingfeng/Blog/issues/102
[12]Callback Promise Generator Async-Await 和異常處理的演進(jìn): https://juejin.im/post/589036f8570c3500621a3be2
[13]Koa 的洋蔥中間件，Redux 的中間件，Axios 的攔截器讓你迷惑嗎？實(shí)現(xiàn)一個(gè)精簡(jiǎn)版的就徹底搞懂了。: https://juejin.im/post/5e13ea6a6fb9a0482b297e8e
[14]clean-code-javascript: https://github.com/beginor/clean-code-javascript
[15]vue-promised: https://github.com/posva/vue-promised
[16]confirm 組件: https://github.com/sl1673495/vue-netease-music/blob/master/src/base/confirm.vue
[17]復(fù)雜的音樂表格需求: https://juejin.im/post/5d40fa605188255d2e32c929
[18]Vue 源碼詳解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！: https://segmentfault.com/a/1190000008589736
[19]探索 Vue 高階組件 | HcySunYang: https://segmentfault.com/p/1210000012743259/read
[20]Vue.js 源碼全方位深入解析 （含 Vue3.0 源碼分析）: https://coding.imooc.com/class/228.html
[21]Vue 逐行級(jí)別的源碼分析: https://github.com/HcySunYang/vue-design
[22]組件的本質(zhì): http://hcysun.me/vue-design/zh/essence-of-comp.html#%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BA%A7%E5%87%BA%E6%98%AF%E4%BB%80%E4%B9%88
[23]zeit/swr: https://github.com/zeit/swr
[24]zeit/swr: https://github.com/zeit/swr
[25]為何不要用 mixins 來實(shí)現(xiàn)組件復(fù)用: https://www.zhihu.com/question/67588479
[26]帶你徹底搞懂 Vue3 的 Proxy 響應(yīng)式原理！TypeScript 從零實(shí)現(xiàn)基于 Proxy 的響應(yīng)式庫。: https://juejin.im/post/5e21196fe51d454d523be084
[27]帶你徹底搞懂 Vue3 的 Proxy 響應(yīng)式原理！基于函數(shù)劫持實(shí)現(xiàn) Map 和 Set 的響應(yīng)式: https://juejin.im/post/5e23b20f51882510073eb571
[28]深度解析：Vue3 如何巧妙的實(shí)現(xiàn)強(qiáng)大的 computed: https://juejin.im/post/5e2fdf29e51d45026866107d
[29]40 行代碼把 Vue3 的響應(yīng)式集成進(jìn) React 做狀態(tài)管理: https://juejin.im/post/5e70970af265da576429aada
[30]React.js 小書: http://huziketang.mangojuice.top/books/react
[31]React 組合式開發(fā)實(shí)踐：打造企業(yè)管理系統(tǒng)五大核心模塊: https://juejin.im/book/5b1e15f76fb9a01e516d14a0
[32]React Hooks 與 Immutable 數(shù)據(jù)流實(shí)戰(zhàn): https://juejin.im/book/5da96626e51d4524ba0fd237
[33]understanding-reacts-key-prop: https://kentcdodds.com/blog/understanding-reacts-key-prop
[34]react 中為何推薦設(shè)置 key: https://zhuanlan.zhihu.com/p/112917118
[35]you-probably-dont-need-derived-state: https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
[36]useEffect 完整指南: https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/
[37]dan 的博客主頁: https://overreacted.io/zh-hans
[38]096.精讀《useEffect 完全指南》.md: https://github.com/dt-fe/weekly/blob/v2/096.%E7%B2%BE%E8%AF%BB%E3%80%8AuseEffect%20%E5%AE%8C%E5%85%A8%E6%8C%87%E5%8D%97%E3%80%8B.md
[39]函數(shù)式組件與類組件有何不同？: https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/
[40]精讀《Hooks 取數(shù) - swr 源碼》: https://segmentfault.com/a/1190000020964640
[41]Umi Hooks - 助力擁抱 React Hooks: https://zhuanlan.zhihu.com/p/103150605?utm_source=wechat_session
[42]React Hooks 的體系設(shè)計(jì)之一 - 分層: https://zhuanlan.zhihu.com/p/106665408
[43]optimize-react-re-renders: https://kentcdodds.com/blog/optimize-react-re-renders
[44]Introducing The React Testing Library: https://kentcdodds.com/blog/introducing-the-react-testing-library
[45]Testing Implementation Details: https://kentcdodds.com/blog/testing-implementation-details
[46]how-to-test-custom-react-hooks: https://kentcdodds.com/blog/how-to-test-custom-react-hooks
[47]react-typescript-cheatsheet: https://github.com/typescript-cheatsheets/react-typescript-cheatsheet
[48]React + Typescript 工程化治理實(shí)踐: https://juejin.im/post/5dccc9b8e51d4510840165e2
[49]Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript): https://blog.andrewbran.ch/polymorphic-react-components/
[50]10-typescript-pro-tips-patterns-with-or-without-react: https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680
[51]when-to-break-up-a-component-into-multiple-components: https://kentcdodds.com/blog/when-to-break-up-a-component-into-multiple-components
[52]state-colocation-will-make-your-react-app-faster: https://kentcdodds.com/blog/state-colocation-will-make-your-react-app-faster/
[53]dont-sync-state-derive-it: https://kentcdodds.com/blog/dont-sync-state-derive-it
[54]the-state-reducer-pattern-with-react-hooks: https://kentcdodds.com/blog/the-state-reducer-pattern-with-react-hooks
[55]TypeScript Handbook 入門教程 : https://zhongsp.gitbooks.io/typescript-handbook/content/
[56]TypeScript Deep Dive: https://basarat.gitbook.io/typescript/type-system
[57]TS 一些工具泛型的使用及其實(shí)現(xiàn): https://zhuanlan.zhihu.com/p/40311981
[58]基于 TypeScript 從零重構(gòu) axios: https://coding.imooc.com/class/330.html
[59]巧用 TypeScript 系列 一共五篇: https://juejin.im/post/5c8a518ee51d455e4d719e2e
[60]conditional-types-in-typescript: https://mariusschulz.com/blog/conditional-types-in-typescript
[61]TypeScript 參數(shù)簡(jiǎn)化實(shí)戰(zhàn): https://juejin.im/post/5e38dd65518825492b509dd6
[62]Advanced Type: https://www.typescriptlang.org/docs/handbook/advanced-types.html
[63]Generics: https://www.typescriptlang.org/docs/handbook/generics.html
[64]Vue3 源碼里 infer 的一個(gè)很重要的使用: https://github.com/vuejs/vue-next/blob/985f4c91d9d3f47e1314d230c249b3faf79c6b90/packages/reactivity/src/ref.ts#L89
[65]TS 實(shí)現(xiàn)智能類型推導(dǎo)的簡(jiǎn)化版 Vuex: https://juejin.im/post/5e38dd65518825492b509dd6
[66]TypeScript 的有趣代碼: https://github.com/sl1673495/typescript-codes
[67]力扣面試題: https://github.com/LeetCode-OpenSource/hire/blob/master/typescript_zh.md
[68]integrating-prettier-eslint-airbnb-style-guide-in-vscode: https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a
[69]在項(xiàng)目中集成 ESLint with Prettier, TypeScript: https://levelup.gitconnected.com/setting-up-eslint-with-prettier-typescript-and-visual-studio-code-d113bbec9857
[70]嵇智: https://github.com/theniceangel
[71]如何重構(gòu)一個(gè)過萬 Star 開源項(xiàng)目—BetterScroll: https://juejin.im/post/5e40f72df265da5732551bdf
[72][譯]如何撰寫 Git 提交信息: https://jiongks.name/blog/git-commit
[73]Git-Commit-Log 規(guī)范（Angular 規(guī)范）: https://www.jianshu.com/p/c7e40dab5b05
[74]commitizen: https://www.npmjs.com/package/commitizen
[75]深入淺出 webpack: http://www.xbhub.com/wiki/webpack/
[76]webpack 系列之一總覽: https://github.com/DDFE/DDFE-blog/issues/36
[77]user-centric-performance-metrics: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics
[78]詳談層合成（composite）: https://juejin.im/entry/59dc9aedf265da43200232f9
[79]讓你的網(wǎng)頁更絲滑: https://zhuanlan.zhihu.com/p/66398148
[80]Why remove time slicing from vue3?: https://github.com/vuejs/rfcs/issues/89
[81]Amendment proposal to Function-based Component API: https://github.com/vuejs/rfcs/issues/63
[82]vue-composition-api-rfc: https://vue-composition-api-rfc.netlify.com/#summary
[83]Vue3 Composition-Api + TypeScript + 新型狀態(tài)管理模式探索。: https://juejin.im/post/5e0da5606fb9a048483ecf64
[84]detailed-design: https://vue-composition-api-rfc.netlify.com/#detailed-design
[85]你的 Tree-Shaking 并沒什么卵用: https://zhuanlan.zhihu.com/p/32831172
[86]UglifyJS 的 Issue: https://github.com/mishoo/UglifyJS2/issues/1261
[87]英文技術(shù)文章閱讀: https://github.com/sl1673495/blogs/issues/15
[88]dev.to: https://dev.to/t/javascript
[89]medium: https://medium.com
推薦閱讀
我的公眾號(hào)能帶來什么價(jià)值？(文末有送書規(guī)則，一定要看)
每個(gè)前端工程師都應(yīng)該了解的圖片知識(shí)(長(zhǎng)文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？