【金秋打卡】第5天 Web前端架构师2022版

课程名称：Web前端架构师2022版

课程章节： 第七周 B端项目需求分析 和 架构设计

主讲老师：张轩

课程内容：

今天学习的内容包括：

3-4 技术选型 - typescript
3-5 技术选型 - vue 和 react

课程收获：

在技术文档中，我们都是在宏观层次使用伪代码的方式来描述技术问题的解决方案的，并没有涉及具体使用什么技术来完成这些任务，有了解决方案的指引，现在可以考虑做一点技术选型，使用什么技术完成整个项目。

对于一个现代的完整的复杂前端项目，应该大体都有这样的技术栈。这个技术栈应该是分层的，要先确定最上层使用什么，才能根据上层确定下面选用什么适配的技术

Typscript 的优势

• 程序更容易理解
• 效率更高
• 更少的错误
• 非常好的包容性

React

代码实现风格

我觉得 react 现在最大的概念是将组件抽象成函数，也叫函数性组件，特别是推出了 hooks 以后，在函数式组件中可以使用一系列钩子函数，使函数式编程更是大行其道。然后它全盘接纳了函数编程的一些概念，比如副作用，side effects 等等。大家记得，React 核心理念就是组件是什么，组件只是一个返回特定界面的函数。

数据更新方式

数据更新数据采用 immutable 更新的方式，需要调用特定的 useState hook 的来调用来更新界面。这点有利有弊，也是有争论的一个点。

代码重用性

也是 React hooks 最大的创新，它可以使用给定的 hooks 抽象成一系列的函数，在组件内部使用函数调用的方式来重用逻辑，非常符合正常的思维，也能了解重用逻辑代码的来源和返回。

Vue3

代码实现风格

它推崇的是单文件组件，将前端工程师最关心的 模版，数据和样式，三者放到一个自创的 vue 文件中，非常明晰，而且推出了一系列简单好用的指令，这吸取了一些 angluar 的特点，帮我们快速搭建一个工程。

数据更新

推出了响应式数据，直接修改数据，就可以更新界面，这种思考方式，更贴近一个程序员的思考模型，对象本来就应该可变，要更新界面，那更新数据就够了啊。

代码重用性

vue3 的推出最大的修改 composition api，就是为了解决这个问题，它推出了 React 类似的 hooks 系统，将它发扬光大并且做了一系列的优化工作，和 React 类似，逻辑抽象成函数，组件内部使用函数调用的方式来重用逻辑，能了解重用逻辑代码的来源和返回。