学习路线——框架篇

框架篇
- Vue
- React

框架篇

对于高级工程师来说，你必须要有一个你趁手的框架，它就像你手中的一把利剑，能够让你披荆斩棘，斩杀各种项目于马下。
下面我会分为Vue和React两个方面深入去讲。

Vue

Vue 方面的话，我主要是师从黄轶老师，跟着他认真走，基本上在 Vue 这方面你可以做到基本无敌。

熟练运用

对于 Vue 你必须非常熟练的运用，官网的 api 你基本上要全部过一遍。并且你要利用一些高级的 api 去实现巧妙的封装。举几个简单的例子。

你要知道怎么用slot-scope去做一些数据和 ui 分离的封装。
以vue-promised这个库为例。
Promised 组件并不关注你的视图展示成什么样，它只是帮你管理异步流程，并且通过你传入的slot-scope，在合适的时机把数据回抛给你，并且帮你去展示你传入的视图。

<template>
<Promised :promise="usersPromise">
 <!-- Use the "pending" slot to display a loading message -->
 <template v-slot:pending>
   <p>Loading...</p>
 </template>
 <!-- The default scoped slot will be used as the result -->
 <template v-slot="data">
   <ul>
     <li v-for="user in data">{{ user.name }}</li>
   </ul>
 </template>
 <!-- The "rejected" scoped slot will be used if there is an error -->
 <template v-slot:rejected="error">
   <p>Error: {{ error.message }}</p>
 </template>
</Promised>
</template>

你需要熟练的使用Vue.extends，配合项目做一些命令式api的封装。并且知道它为什么可以这样用。（需要具备源码知识）
confirm 组件

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
// 确保动画效果
Vue.nextTick(() => {
 instance.visible = true;
});
};

你要开始使用JSX来编写你项目中的复杂组件了，比如在我的网易云音乐项目中，我遇到了一个复杂的音乐表格需求，支持搜索文字高亮、动态隐藏列等等。
当然对于现在版本的 Vue，JSX 还是不太好用，有很多属性需要写嵌套对象，这会造成很多不必要的麻烦，比如没办法像 React 一样直接把外层组件传入的 props 透传下去，Vue3 的 rfc 中提到会把 vnode 节点的属性进一步扁平化，我们期待得到接近于 React 的完美 JSX 开发体验吧。
你要深入了解 Vue 中 nextTick 的原理，并且知道为什么要用微任务队列优于宏任务队列，结合你的 eventloop 知识深度思考。最后融入到你的异步合并优化的知识体系中去。
Vue 源码详解之 nextTick：MutationObserver 只是浮云，microtask 才是核心！
你要能理解 Vue 中的高阶组件。关于这篇文章中为什么 slot-scope 不生效的问题，你不能看他的文章讲解都一头雾水。（需要你具备源码知识）
探索 Vue 高阶组件 | HcySunYang
推荐一下我自己总结的 Vue 高阶组件文章，里面涉及到了一些进阶的用法。
Vue 进阶必学之高阶组件 HOC
对于 Vuex 的使用必须非常熟练，知道什么时候该用 Vuex，知道怎么根据需求去编写 Vuex 的 plugin，合理的去使用 Vuex 的 subscribe 功能完成一些全局维度的封装，比如我对于 Vuex 中 action 的错误处理懒得一个个去try catch，就封装了一个vuex-error-plugin。代码很简单，重要的是去理解为什么能这样做。这里用了 monkey patch 的做法，并不是很好的实践，仅以此作为引子。
对于 vue-router 的使用必须非常熟练，知道什么需求需要利用什么样的 router 钩子，这样才能 hold 住一个大型的项目，这个我觉得官方仓库里的进阶中文文档其实很好，不知道为什么好像没放在官网。
vue-router-advanced
理解虚拟 DOM 的本质，虚拟 DOM 一定比真实 DOM 更快吗？这篇是尤雨溪的回答，看完这个答案，相信你会对虚拟 DOM 有更进一步的认识和理解。
网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？

源码深入
你不光要熟练运用 Vue，由于 Vue 的源码写的非常精美，而且阅读难度不是非常大，很多人也选择去阅读 Vue 的源码。视频课这里推荐黄轶老师的 Vue 源码课程。这里也包括了 Vuex 和 vue-router 的源码。
Vue.js 源码全方位深入解析（含 Vue3.0 源码分析）
推荐 HcySunYang 大佬的 Vue 逐行分析，需要下载 git 仓库，切到 elegant 分支自己本地启动。
Vue 逐行级别的源码分析
当然，这个仓库的 master 分支也是宝藏，是这个作者的渲染器系列文章，脱离框架讲解了 vnode 和 diff 算法的本质
组件的本质

Vue3 展望

Vue3 已经发布了 Beta 版本，你可以提前学习Hook相关的开发模式了。这里推荐一下我写的这篇 Vue3 相关介绍：
Vue3 究竟好在哪里？（和 React Hook 的详细对比）

Vue3 源码
对于响应式部分，如果你已经非常熟悉 Vue2 的响应式原理了，那么 Vue3 的响应式原理对你来说应该没有太大的难度。甚至在学习之中你会相互比较，知道 Vue3 为什么这样做更好，Vue2 还有哪部分需要改进等等。
Vue3 其实就是把实现换成了更加强大的 Proxy，并且把响应式部分做的更加的抽象，甚至可以，不得不说，Vue3 的响应式模型更加接近响应式类库的核心了，甚至react-easy-state等 React 的响应式状态管理库，也是用这套类似的核心做出来的。
再次强调，非常非常推荐学习 Vue3 的@vue/reactivity这个分包。
推一波自己的文章吧，细致了讲解了 Vue3 响应式的核心流程。
带你彻底搞懂 Vue3 的 Proxy 响应式原理！TypeScript 从零实现基于 Proxy 的响应式库。
带你彻底搞懂 Vue3 的 Proxy 响应式原理！基于函数劫持实现 Map 和 Set 的响应式
深度解析：Vue3 如何巧妙的实现强大的 computed

在学习之后，我把@vue/reactivity包轻松的集成到了 React 中，做了一个状态管理的库，这也另一方面佐证了这个包的抽象程度：
40 行代码把 Vue3 的响应式集成进 React 做状态管理

React

React 已经进入了 Hook 为主的阶段，社区的各个库也都在积极拥抱 Hook，虽然它还有很多陷阱和不足，但是这基本上是未来的方向没跑了。这篇文章里我会减少 class 组件的开发技巧的提及，毕竟好多不错的公司也已经全面拥抱 Hook 了。

熟练应用

你必须掌握官网中提到的所有技巧，就算没有使用过，你也要大概知道该在什么场景使用。
推荐 React 小书，虽然书中的很多 api 已经更新了，但是核心的设计思想还是没有变
React.js 小书
关于熟练应用，其实掘金的小册里有几个宝藏
1. 诚身大佬（悄悄告诉你，他的职级非常高）的企业级管理系统小册，这个项目里的代码非常深入，而且在抽象和优化方面也做的无可挑剔，自己抽象了acl权限管理系统和router路由管理，并且引入了reselect做性能优化，一年前我初次读的时候，很多地方懵懵懂懂，这一年下来我也从无到有经手了一套带acl和权限路由的管理系统后，才知道他的抽象能力有多强。真的是
  
  初闻不知曲中意，再闻已是曲中人。
2. React 组合式开发实践：打造企业管理系统五大核心模块
3. 三元大佬的 React Hooks 与 Immutable 数据流实战，深入浅出的带你实现一个音乐播放器。三元大家都认识吧？那是神，神带你们写应用项目，不学能说得过去吗？
  React Hooks 与 Immutable 数据流实战
深入理解 React 中的key
understanding-reacts-key-prop
react 中为何推荐设置 key
React 官方团队成员对于派生状态的思考：
you-probably-dont-need-derived-state

React Hook
你必须熟练掌握 Hook 的技巧，除了官网文档熟读以外：
推荐 Dan 的博客，他就是 Hook 的代码实际编写者之一，看他怎么说够权威了吧？这里贴心的送上汉化版。
useEffect 完整指南
看完这篇以后，进入dan 的博客主页，找出所有和 Hook 有关的，全部精读！
推荐黄子毅大佬的精读周刊系列
096.精读《useEffect 完全指南》.md
注意！不是只看这一篇，而是这个仓库里所有有关于 React Hook 的文章都去看一遍，结合自己的思想分析。
Hook 陷阱系列
还是 Dan 老哥的文章，详细的讲清楚了所谓闭包陷阱产生的原因和设计中的权衡。
函数式组件与类组件有何不同？
去找一些社区的精品自定义 hook，看看他们的开发和设计思路，有没有能融入自己的日常开发中去的。
精读《Hooks 取数 - swr 源码》
Umi Hooks - 助力拥抱 React Hooks
React Hooks 的体系设计之一 - 分层


React 性能优化
React 中优化组件重渲染，这里有几个隐含的知识点。
optimize-react-re-renders
如何对 React 函数式组件进行性能优化？这篇文章讲的很详细，值得仔细阅读一遍。
如何对 React 函数式组件进行优化

React 单元测试
使用@testing-library/react测试组件，这个库相比起 enzyme 更好的原因在于，它更注重于站在用户的角度去测试一个组件，而不是测试这个组件的实现细节。
Introducing The React Testing Library
Testing Implementation Details
使用@testing-library/react-hooks测试自定义 Hook
how-to-test-custom-react-hooks

React 和 TypeScript 结合使用
这个仓库非常详细的介绍了如何把 React 和 TypeScript 结合，并且给出了一些进阶用法的示例，非常值得过一遍！
react-typescript-cheatsheet
这篇文章是蚂蚁金服数据体验技术部的同学带来的，其实除了这里面的技术文章以外，蚂蚁金服的同学也由非常生动给我们讲解了一个高级前端同学是如何去社区寻找方案，如何思考和落地到项目中的，由衷的佩服。
React + Typescript 工程化治理实践
微软的大佬带你写一个类型安全的组件，非常深入，非常过瘾…
Writing Type-Safe Polymorphic React Components (Without Crashing TypeScript)
React + TypeScript 10 个需要避免的错误模式。
10-typescript-pro-tips-patterns-with-or-without-react

React 代码抽象思考
何时应该把代码拆分为组件？
when-to-break-up-a-component-into-multiple-components
仔细思考你的 React 应用中，状态应该放在什么位置，是组件自身，提升到父组件，亦或是局部 context 和 redux，这会有益于提升应用的性能和可维护性。
state-colocation-will-make-your-react-app-faster
仔细思考 React 组件中的状态应该如何管理，优先使用派生状态，并且在适当的时候利用 useMemo、reselect 等库去优化他们。
dont-sync-state-derive-it
React Hooks 的自定义 hook 中，如何利用 reducer 的模式提供更加灵活的数据管理，让用户拥有数据的控制权。
the-state-reducer-pattern-with-react-hooks

框架篇

Vue

熟练运用

源码深入

Vue3 展望

Vue3 源码

React

熟练应用

React Hook

React 性能优化

React 单元测试

React 和 TypeScript 结合使用

React 代码抽象思考