学一个前端 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 了。

相关推荐
洋茄子炒鸡蛋34 分钟前
有没有一刻,突然平静地想离职(VUE中使用XLSX插件导入Excel文件,日期解析存在误差)
vue.js·excel
outsider_友人A37 分钟前
手摸手带你封装Vue组件库(16)Carousel走马灯组件
前端·javascript·vue.js
程序员小刚38 分钟前
基于SpringBoot + Vue 的汽车租赁管理系统
vue.js·spring boot·汽车
bigyoung39 分钟前
过滤tree数据中某些数据
前端·javascript·vue.js
计算机-秋大田1 小时前
基于Spring Boot的消防物资存储系统的设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·课程设计
池鱼ipou2 小时前
春招面试拷打实录(三):面试血泪史,面经干货分享!!!
前端·vue.js·面试
阿丽塔~2 小时前
react中 useEffect和useLayoutEffect的区别
前端·react.js·前端框架
巴巴博一2 小时前
Vue-admin-template安装教程
前端·javascript·vue.js
OpenTiny社区3 小时前
直播分享|TinyPro:一行命令,搭建包含前后端的后台管理系统
前端·vue.js·github