企划动力
首页> 建站学堂>专业网站制作- React 框架与Angular框架的比较(二)

经典案例

专业网站制作- React 框架与Angular框架的比较(二)

佛山网站制作当中需要学习的提升学习效率的框架

发布时间:2019-09-09

对于想提升网站建设的效率的方法,前面已经列举的2个大的框架,接下来我们继续了解和探讨关于react和angular的内容,因为只有了解这些内容,对于网站建设才会有比较深的认识。


Angular提供以下“开箱即用”:

模板,基于HTML的扩展版本

XSS保护

依赖注入

@ angular / HTTP的Ajax请求

路由,由@ angular / router提供


佛山网站制作

组件CSS封装

用于单元测试组件的实用程序。

@ angular /用于构建表单的表单

另一方面,React为您提供更多自由。它只提供MVC中的“视图” - 你需要自己解决M和C. 因此,您可以根据需要选择任何自己的库。您将最终使用许多独立,快速移动的库。因此,您需要自己处理相应的更新和迁移。此外,每个React项目都是不同的,需要一个需要其文件夹层次结构和体系结构的决策。由于这个原因,事情可能会更容易出错。

React提供以下“开箱即用”:

它不是经典模板,而是JSX,一种基于JavaScript构建的类似XML的语言

相关阅读:

佛山网站建设 web前端人员需要掌握什么技能列表

佛山网站制作干货- 2019如果成为更加有效的学习网站制作? (一)

XSS保护

没有依赖注入

获取Ajax请求

用于单元测试组件的实用程序

一些流行的库添加功能是:

用于路由的React-router

Redux或MobX用于状态管理

用于其他测试工具的酶

常规DOM与Virtual Dom

React使用  虚拟DOM 是其功能之一,使其速度极快。你可能听说过它。这是React首次发布时的“杀手级功能”。让我举个例子:

假设您要在HTML标记块中更新用户的年龄。一个虚拟DOM只着眼于过去和当前的HTML之间的差异,并改变了需要更新的一部分。 Git采用了一种类似的方法,可以区分文件中的变化。

相反,Angular选择使用常规DOM。这将更新HTML标记的整个树结构,直到达到用户的年龄。

那为什么这很重要?上面的例子是微不足道的,可能在真正的应用程序中没有任何区别。但是,如果我们在同一页面上处理数百个数据请求(并且每个页面请求都替换了HTML块),除了用户的体验之外,它还会极大地影响性能。

q-and-a-app.png

模板 - JSX或HTML

React决定将UI模板和内联JavaScript逻辑结合起来,这是以前没有公司做过的。结果称为“ JSX”。虽然听起来可能不是一个坏主意,但Facebook的赌博却带来了巨大的回报。反应使用一种叫做组件,它包含两个标记和在同一个文件的逻辑。它还使用类似XML的语言,允许您直接在JavaScript代码中编写标记。JSX是开发的一大优势,因为您可以在一个地方拥有所有内容,并且代码完成和编译时检查可以更好地工作。

防爆。在这个例子中,我们声明一个变量名,并通过将其包装在花括号中来在JSX中使用它:

const name = 'Josh Perez';const element =

Hello, {name}

;

Angular使用带有Angular指令的增强型HTML模板(“ ng-if”或“ ng-for”)。React只需要JavaScript的知识,但是使用Angular,你必须学习它的特定语法。

反应纤维

我不会详细介绍,但React Fiber将把React从“快速”变为“超快”。Fiber是React核心的向后兼容,完全重写。它被引入React v16并且升级非常顺利,你很可能甚至没有注意到它发生了。使用光纤,反应可以暂停并恢复工作,因为它认为适合在屏幕上尽快显示重要信息。我鼓励你对React Fiber做更多的研究 - 它是一个杀手级的功能。

组件

你听说过组件,不是吗?除非你一直生活在岩石下,否则我确信你有。双方阵营和角度都是组件为主。组件接收输入,并在一些内部逻辑返回呈现的UI模板(例如登录表单或表)作为输出。组件应 易于在其他组件中或甚至在其他项目中重用。例如,您可以拥有一个包含两个文本输入(用户和密码)和一个“登录”按钮的登录组件。此组件可能具有各种属性和基础逻辑,但应该进行通用化,以便您可以在另一个页面或另一个应用程序中重用具有不同数据的组件。

组件应该是您的应用程序的自包含“块”,您可以在不同的情况下重用它们。它们旨在封装逻辑。网络正逐渐变成基于组件的,因此我建议您立即开始习惯它们。