2018 年娱乐逗比总结：小烜有话说

2018 年对于我来说，分为上半场和下半场，上下半场对于我来说都有着不小的收获，上半场的我关注点在于如何做好基础设施，如何做框架，为公司的各位研发老哥提供最有力的支持；而下半场我的关注点在业务，理解业务为首要任务，以及如何以最合适的技术去实现功能。

全场概述

热点追踪

React 又爆新闻啦，今年可是看到不少的这样的文章，今年 React 也是出了不少的新的功能。

1. 新的生命周期

   在 React 进入到 16.3 之后，新增了两个生命周期，以及将原有生命周期中的 componentWillMount 、 componentWillReceiveProps 、 componentWillUpdate 的三个生命周期标记为 unsafe ，这三个生命周期在 16 版本还能继续使用，但是这三个生命周期将会在下一个大版本移除，值得注意的是你不能在一个组件里同时使用新的和旧的生命周期，至于为什么要这么做，可以去看一下 React 新的架构模式。

2. 新的 Context

   React 中的 Context API 相信大家都了解，在之前，React 不建议使用 Context，这是一个实验性的 API，但现在它又回来了，成为了一个非常棒的 API，至于为什么我们需要这个 API，以及如何使用，可以看看以前的文章，比如这个。

3. lazy、Suspense、memo

   React.memo 主要是用于函数式组件，作为 PureComponent 的替代解决方案。而 React.lazy 则是配合 Suspense 进行代码分割。

4. Hooks

   在最近几个月，关于 Hooks 的文章也挺多的，得到了很多的反馈，也有很多的开发者喜欢这个东西。它能够让你不需要使用类就能使用 React。那么为什么要引入 Hooks 呢？官方给出的答案是，Hooks 解决了 React 中各种看似不相关的问题，这些问题是我们在开发和维护数以万计的组件时遇到的。

Babel 7 以及 Webpack 4 的发布，最近又了解到 AMP，虽然没有做移动端，但是还是了解了一波。

这一年的热点一件一件的说其实还真不少，也就不赘述水文了，但是我们以什么姿势去了解这些东西，我觉得是比较重要的，从我个人来说，我将这些新的知识分成几块，用不同的标签去对应这些知识，其实看起来就是一个象限，当然了，这也是我个人的看法，也不一定适合大家。

1. 领域相关并且我十分有兴趣的，优先级拔高，优先学习，写 demo 钻研一下
2. 领域相关但是没什么兴趣的，当然还是要学，毕竟要恰饭
3. 领域不相关但是有兴趣的，利用周末的空闲时间看看
4. 领域不相关并且没有兴趣的，可能我就不怎么会关注了，可能让我学我也没兴趣去搞

贯穿全场的学习

干 程序员 这行，不管是兴趣也好，被迫也罢，学习二字贯穿整个职业生涯，也就是说我们要定期的为自己的知识资产进行投资。

那么今年我的学习目标是什么呢？基础、基础、基础，重要的事情说三遍，在繁荣的技术圈，基础才是立身之本，近来，我更是觉得这种观点是对的。

在真正的开发过程中，我相信很多人的体验是按照当前项目已有的代码架构与模式，把自己的代码加进去就可以了，就如同盖房子一样，设计师把图纸弄好，计量人员把哪一块用多少料都搞得清清楚楚，剩下的需要做什么呢？把砖什么的堆上去就 ok 了是么？当然了，也有可能在修的过程中遇到了一些难题，根据我们的思考、多年的经验解决了这个问题，但是谁不想去当那个设计师呢？

所以我觉得，今年我的思考方向，就是从怎么写好功能，转变为 如何运用我所学的知识去组织出受过培训的人就能够很容易编写和维护的代码 。

所以我的学习方向是什么呢？今年的学习在这些方面，设计模式、基础算法以及数据结构，以及如何写出易维护的代码。

React Fiber

除了上面说到的这些，在查阅各种资料的时候，对 Fiber 十分有兴趣的我也学习了一波 Fiber，感谢司徒正美等大神对 Fiber 的剖析，结合他们的剖析以及对源码的研究也算是对其有所理解。

这是一些资料：

• React16.2的fiber架构
• React16.2的fiber架构(2)
• React16.2的fiber架构详解(3)
• React Fiber架构

源码阅读

说到这里，不得不说，在阅读源码的体验上，我个人觉得在 React 上的体验不如 Vue 的好，也可能是我不太习惯 React 的源码组织方式，读起来有点难受。

对于 Vue 源码的学习，学到了不少的东西，包括数据驱动、响应式原理、组件化、编译等等，Vue 源代码的可读性还是不错的，大家阅读的话可以结合思维导图，以及断点调试来学习，个人觉得不错。

当然了，关于 React 相关的阅读都没有关注在 React 本身，而是聚焦于 React 周边的各类常用库。

比如，redux 的学习，在其中你可以看到 redux 的中间件机制，如何创建 store 等等。配合 redux-thunk 食用更佳，你可以了解到，为什么 thunk 支持异步，这能够帮助你更好的学习 redux。

以及结合 react-redux 、 react-router 等库的源码你能够学到高阶组件、Context API 等等的学习，可以去看一波，还是有所收获。

好了，下面就来说说上半场吧。

上半场

对于基础设施来说，我觉得比较重要的几个点，大家可以注意一下。

第一，就是要做一个非常有原则的人，尤其是在代码上，我个人觉得斤斤计较也不是个什么坏事，做基础设施一定要注意原则。

第二，要建立自己的知识库，不仅仅是如何使用这个基础框架的文档，更重要的是自己内部要有一套关于这个框架的知识库，避免因为人员流失等原因造成知识丢失，后面维护这一块的代码就相当困难。

第三，一定要有测试，这个东西，相当重要，能够充分的保证我们的代码质量。

构建高效的开发流程

谈到基础设施搭建，我们就不得不说说构建开发流程了，我们要做到代码规范、持续集成、测试等等，我们一个一个来说。

1. 代码规范，说到代码规范我们能想到什么？ESlint、stylelint、Prettier、commitlint 等等，关于代码规范的部分我会在下面谈到。
2. 测试，好的测试能够在我们后期对代码进行维护修改的时候，将伤害降到最低。这一块我其实也没有做到位，检讨一分钟，我使用了 Jest 来进行测试，但是在测试方面，我们可用的东西其实非常多，比如说 Mocha、Jest、Jasmine、AVA 等等，当然了我们还拥有像 puppeteer、nightwatch 来做 e2e 的测试。
3. 持续集成，在版本管理方面使用了 lerna，这是一个非常强大的工具，它能够帮助我们进行版本管理、changelog 生成的工作，当然在后面还有持续部署的问题，这个地方涉及到 docker 、Jenkins 等等知识了，这里就不展开了。
4. 文档，Docusaurus 是一个非常优秀的文档管理 工具 了，当然了，现在也出现了非常多优秀的文档工具了，工具不是关键，关键是你的知识的留存。

优雅的提交 commit

上面说到关于这个开发流程，那么我们如何在提交时避免这些问题的发生呢？我们不能只在 CI 流程做 lint 等操作，这样的话，我们的反馈链太长了，所以我们将着一系列操作放到了本地。

我们需要的基本操作是哪些呢？对 commit-msg 的校验、lint、prettier 等等操作。

关于这一部分，我就不多 BB 了，下面有一些资料：

• 用 husky 和 lint-staged 构建超溜的代码检查工作流
• 使用 ESlint、lint-staged 半自动提升项目代码质量
• git commit 提交规范 & 规范校验

下半场

下半场更多的感悟其实不是纯技术上的，虽然也有技术相关的东西，但是我觉得对于我来说这几点非常重要。

工作中的思考

下半场在项目里进行了几个月的开发，在开发的过程中，我也有不少的心得体会，虽然不知对不对，分享给大家，共勉。

第一、交流，交流真的非常重要，我记得我组长看过的一本书 《非暴力沟通》，书非常好，推荐给大家，我们在沟通中少了不少争执，沟通的效率就不一样了。

第二、不要一路狂奔，停下来思考思考。我不知道大家有没有和我一样的感受，项目比较紧张的时候可能就全身心的投入到功能开发、bug 修复上去了，都没有时间来想想自己的工作，进行复盘、评估，造成的结果是，等一段时间过去后，再回首已然一片狼藉，再想要把项目拉回正轨要耗费非常多的时间，所以我的想法是，就算再忙也要停下来想一想，避免给自己以后挖坑。

其实还有不少的想法，但是篇幅有限，我就列了两个我觉得非常重要的点。

破窗户

这是《程序员修炼之道–从小工到专家》中的一段，这是一本非常经典的书，推荐。

说的是，这个理论是认为一个环境中的不良现象如果被放任存在，那么就会诱导人效仿，甚至变本加厉。在代码中，这一点尤为常见，当第一段不好的代码出现在你仓库里，就可能打开了潘多拉魔盒，这也就是为什么我说做基础设施的一定要谨慎，要较真，如果你的代码规范执行的很彻底，那么相信谁也不会想去当提交第一段烂代码的人。

知识丢失

知识丢失对于一个项目来说非常的致命，会造成我们的项目失控。什么情况下会造成知识丢失呢？

只是提交了代码，忘记了保留知识，包括注释、文档等等，又或者是做这个模块的同学离职了，又或者是掉到其他岗位去了，一旦没有把知识传递到位，造成的结果就是知识丢失，新接手的同学看不懂、不敢删、不敢改，就像一个泥潭一样，让人越陷越深，最后变成让人感到绝望的祖传代码。

对于这个问题，我想优秀的代码规范、有迹可循的注释与文档可能可以解决一部分，但是到底该如何解决这样的问题，我也没有找到什么方案，不知道各位有什么有效的方法。

厉害了我的 2019

好了，大概说完了 2018，就要说说这个厉害的 2019 了。

整理一下我自己的单子：

• linux 命令：只了解 ls、cd、lsof 等基本常用命令，其他命令还得现查现用，比如我讨厌的 tar，我一定要征服它
• webAssembly：准备学习一波，但是优先级可能不是那么高
• Node：会用，会写，但是不深入，用大神的话来说，你很不错，仍需努力
• 算法：好像在很多人眼里，前端和算法好像关系不大，但是在我的认知里，算法、数据结构等等就是一个程序员的内功，决定了你的武功能练到哪种层次，所以要扎实，明年重点
• GraphQL：今年的遗憾可能就是没有用 GraphQL 去试试水，在我看来它非常合适某些项目
• TypeScript：明年准备上到项目，所以是个重点，优先级极高
• Electron：听过，玩过 Hello World，挺有兴趣，明年可能会玩一玩的玩具

我想到的大概就这么多，毕竟明年啥样我现在也没法预测，前端圈瞬息万变，我就静观其变，打好基础，迎接时代的冲击吧！

立个 Flag

喜闻乐见的 flag 环节，当然了，这是在给明年的总结留打脸证据的。

• 读 20 本书，并且以文字的形式输出
• DIY 一个玩具，React 组件库（多方参考，只为学习）
• 算法和数据结构的 flag 一定要立，希望边学习边输出
• 能有一个自己的公众号，坚持输出

其他的 flag 也就不立了，感觉说的有点杂，有点多，就当我跟大家唠唠嗑吧，祝大家新年快乐，新年新气象，升职加薪，走上人生巅峰。

偷偷在下面立个小 flag，女朋友说我瘦到 140，她才和我结婚，这个 flag 悄悄的立，你们就当没看见好了。