学一个前端 UI 框架，要学些什么内容？

假如你现在要自学 React/Vue 框架，怎么学？

绝大部分同学可能是这样学的：

• 直接去看官方文档，或者是找一些视频看一遍，学会这个框架的一些基础语法，特性功能等等
• 参考一些例子上手编写 demo，简单感受一下
• 然后就是在工作中使用框架，碰到各种问题的时候，上网查找解决方案或者询问 AI
• 最后就是自己想要深入学习的时候，才会去钻研学习它的原理

这样学好像也没什么问题，因为大家都是这么做的，包括我当初也是这样自学的。

但是，这样学有点像无头苍蝇，对于框架的应用经验全靠摸爬滚打一路踩坑才得来的，成长速度非常慢。

作为过来人，我觉得应该让你提前了解到：我们要学一个前端 UI 框架，应该要关注哪些内容。

这样，可以提前有个概念，让你带着目标，查漏补缺地去学习，才能提升得更快。

如何操作 DOM 结构

首先要学的，是这个框架是如何操作 DOM 结构的。

现在流行的 UI 框架，主打的就是封装原生 DOM 操作，让我们可以不直接操作 DOM，只关注数据。

因此，我们更加需要了解，这个框架是怎样操作 DOM 的。核心是这些点：

• 怎样创建 DOM tree？如何把创建好的 DOM tree 挂载到 document 中？
• 怎样更新 DOM tree？怎样修改某个元素的内容？怎样插入元素？怎样移除元素？
• 怎样读取 DOM 元素？虽然 UI 框架给我们做了很好的封装，但是在某些特殊场景中，我们还是要直接操作 DOM tree，框架是怎样提供这个能力的？
• 怎样删除 DOM tree？如何把 DOM tree 从 document 中卸载？

如何操作样式

然后就要学习如何操作样式，CSS 是前端非常关键的一环。

框架把原生 DOM 封装起来了，我们就不能用常规的方法操作 CSS 了。

因此，我们需要关注这些点：

• 如何给 DOM 元素添加样式 class？如何读取 DOM 元素的样式 class？如何更新 DOM 元素的样式 class？
• 如何给 DOM 元素添加 inline style？
• 如何读取 DOM 元素的 CSS style？如何修改 DOM 元素的 CSS style？

如何处理事件

接下来要学习处理事件。主要是以下这些功能点:

• 如何给 DOM 元素绑定事件？
• 如何给 DOM 元素解绑事件？
• 是否遵循 DOM 事件标准？事件捕获和事件冒泡都有吗？
• 如何获取事件对象？如何获取原始的事件对象？
• 如何阻止冒泡？如何阻止默认行为？
• 是否支持自定义事件？

如何处理表单

接下来是处理表单。毕竟对于前端来说，处理表单是基础能力。而涉及到表单的页面，往往都是比较复杂的，因此更加需要学习 UI 框架是如何让我们处理表单的。

对于处理表单，我们主要关注这些点：

• 如何设置原生表单元素的属性？比如 value，disabled，placeholder 等等
• 如何设置/读取不同表单元素的值？
• 如何监听表单元素的值变化？
• 如何获取表单的原生 DOM 元素？

如何实现组件化

前面都是 JavaScript 和 DOM 的必备功能，接下来我们需要重点学习组件化相关的内容。

现在流行的 UI 框架，主打的是组件化开发框架，这有利于我们组织复杂项目的代码，让代码更好被维护和复用。

对于组件化，我们要了解这个框架是如何实现组件化的，主要关注这些点：

• 如何自定义组件？一个自定义组件的代码如何组织？
• 如何创建组件？如何引入组件？
• 组件的生命周期是怎样的？有哪些钩子，它们的作用分别是什么？

如何实现组件通信

当我们利用组件化的思想去组织我们的代码时，整个页面的结构就是一个组件树(component tree)，

这时，我们需要关注一个非常重要的话题 —— 组件通信。

组件化可以让我们的代码内聚在某个组件内部，但这些组件是不能完全独立的，它们需要通过某些通信方式来协作，从而完成复杂的功能。

因此，我们需要学习这个框架是如何实现组件通信的，主要是以下这些点：

• 父 -> 子 的通信方式有哪些？各自的优缺点是什么、适用于什么场景？
• 子 -> 父 的通信方式有哪些？各自的优缺点是什么、适用于什么场景？
• 祖 -> 孙 的通信方式有哪些？各自的优缺点是什么、适用于什么场景？
• 孙 -> 祖 的通信方式有哪些？各自的优缺点是什么、适用于什么场景？
• 任意组件的通信方式有哪些？各自的优缺点是什么、适用于什么场景？

如何复用代码

最后，我们还要探索一个话题，就是如何复用代码。

组件化也是复用代码的一种方式，它复用的是整个组件的代码，这个组件可以用在很多地方，不需要重新写一个新的组件。

除了这个之外，我们还需要学习更细粒度的复用代码，比如如何复用某些逻辑，可以在多个组件中使用？

如果按照可被复用的代码量级来划分层级的话，我们有如下层级：

• 函数：某个函数的代码可以在任何需要的地方被调用
• 功能逻辑：特定功能的逻辑代码，可以被复用到各个组件，一般是多个函数的关联集合，或者是一个基类
• 组件：某个组件可以在任何需要的地方被加载使用
• 模块：整个业务功能模块被复用到有需要的页面中，通常是由多个组件组合而成
• 页面：整个页面被复用到站点的业务流程之中

在学习 UI 框架时，我们不仅要学习组件层级的代码复用，还需要学习功能逻辑层级的代码复用。

功能逻辑层级的代码复用是在多个组件中复用代码，因此这一块是跟组件化的实现方案强关联的，因此我们在学习前端 UI 框架时，不能只学习组件化的使用方法，还需要进一步学习如何在多个组件之中复用代码的技巧，这样才能让我们写出更高质量的代码。

好了，现在你知道，在学习 React/Vue 的时候，我们应该学什么了吗？

只要你把上面我说到的这些点都学会了，你就真正学会 React/Vue 了。

----------------【END】----------------

如果你是真心喜欢前端，并相信成长，想要提升自己的话，欢迎加入之道前端学习圈子。

戳这里 免费获取 之道前端的学习资料和专属服务。