《mini-react 游戏副本》给我的收获

102 阅读3分钟

上周参加了阿崔组织的《mini-react 游戏副本》。先说下我为什么会参加这个课程?

  1. 因为我一直使用的是 Vue,对 Vue 源码也有些简单的了解,想通过这次机会多了解下 React
  2. 现在互联网越来越卷,想多学习一些内容来提升自己
  3. 课程设计比较新颖。以往的课程都是买了吃灰,这个课程内容不多,只有短短一周的时间,看完视频需要自己动手完成并打卡输出,而且还有结课奖励等推动我去学习。

现在课程已经完结,我来说说我的一些收获。

这个课程教会了我一些 React 的源码,但源码并不是重点,所以这里也不会列举源码。更重要的内容是编程思路,任务拆分等。我到现在也做了好几年的前端开发了,写的业务代码不至于太差,但最近一两年的编码水平一直停留在那,也没什么长进。

收获一:学习任务拆分

课程只有短短一周,但是任务可是不少。比如第一天的内容使用 jsx,课程内容循序渐进。先从大家都熟悉的 js 操作 dom 的硬编码开始,转成使用 vdom 生成真实 dom,再使用 vite 解析 jsx 生成 vdom。将一个大任务拆分成一个个小任务,并将每个小任务逐一击破。

收获二:学会画图分析

在将 dom 树转成 fiber 链表、新旧结点关系绑定时,这些结构如果只是在脑海中整理,有时会将自己绕晕。这时需要画图分析,分析出关键位置的处理逻辑,这样做比在脑海中演练要更精准高效。

收获三:学会重构

平时写代码都是会将很多逻辑放在一个函数内,造成这个函数很臃肿,不好阅读。这时要将独立的业务抽成独立函数,并起一个好的函数名,需要一眼就能看出这个函数的作用。重构后及时验证,防止出现问题需要花很多时间定位。

收获四:多种调试方法

代码报错是十分常见的问题,要学会灵活应用 console、断点等进行调试。

收获五:多动手

看视频时感觉都挺简单的,理解起来也没什么难度,每次看我都感觉自己已经会了,但自己动手实现的时候总是会写不出,或者遗落重点内容。这时才知道自己并没有真正掌握,需要再次学习才能明白其中的奥妙。

以上就是这次课程对我最大的收获。React 平时不怎么使用,但是这些技巧都是通用的,是实实在在改变我日常工作的编码习惯的。非常感谢阿崔的课程,让我收获满满。