详解React Angular Vue三大前端技术

一、【React】

React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。

React可以作为开发单页或移动应用的基础。然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子。

基本用法

下面是一个简单的React在HTML中使用JSX和JavaScript的例子。

Greeter函数是一个React组件,它接受一个属性问候语。变量App是Greeter组件的一个实例,其中问候语属性被设置为 "Hello World!"。然后,ReactDOM.render方法将我们的Greeter组件渲染在DOM元素(id为 myReactApp)中。

在web浏览器中显示时,结果将是:

显著特点

组件化

React代码由称为组件的实体组成。组件可以使用React DOM库渲染到DOM中的一个特定元素。当渲染一个组件时,可以传入被称为 "props "的值。

React中声明组件的两种主要方式是通过功能函数组件和基于类的组件。

功能函数组件

功能组件是用一个函数声明,用来返回一些JSX。

类组件

基于类的组件是使用ES6类来声明的。它们也被称为 "有状态 "组件,因为它们的状态可以在整个组件中保持,并且可以通过props传递给子组件。

虚拟 DOM

另一个值得注意的特点是React使用了虚拟文档对象模型,也就是虚拟DOM。React创建了一个内存中的数据结构缓存,计算得出变化差异,只渲染实际变化的子组件, 从而高效地更新浏览器显示的DOM。

生命周期方法

生命周期方法是指在组件的生命周期内,允许在设定的点执行代码的hooks处理函数。

  • shouldComponentUpdate允许开发者在不需要渲染的情况下,通过返回false来防止不必要的重新渲染组件。
  • componentDidMount是在组件 "挂载 "后调用的(组件已经在用户界面中创建了,通常是通过将其与DOM节点关联起来)。这通常用于通过API从远程数据源触发数据加载。
  • componentWillUnmount是在组件被拆解或 "解挂 "之前立即调用的。这通常用于清除组件的资源依赖关系,这些依赖关系不会随着组件的卸载而简单地被移除(例如,移除任何与组件相关的setInterval()实例,或者因为组件的存在而在 "文档 "上设置的 "eventListener")。
  • render是最重要的生命周期方法,也是任何组件中唯一必须存在的方法。它通常在每次更新组件的状态时都会被调用。

JSX

JSX,即JavaScript XML,是对JavaScript语言语法的扩展。JSX在外观上类似于HTML,它提供了一种开发者熟悉的语法结构化组件渲染的方法。React组件通常是使用JSX编写的,尽管不一定非要使用JSX(组件也可以用纯JavaScript编写)。JSX类似于Facebook为PHP创建的另一种名为XHP的扩展语法。

JSX代码的一个例子:

嵌套元素

同一层次上的多个元素需要被包裹在一个容器元素中,如上图中的<div>元素。

属性

JSX提供了一系列的元素属性,旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件,所有的属性都会被组件作为props接收。

JavaScript表达式

JavaScript表达式(但不是语句)可以在JSX内部通过大括号{}使用。

上面代码的显示结果是:

条件语句

If-else语句不能在JSX中使用,但可以使用条件表达式来代替。下面的例子当i为1时将 { i === 1 ? 'true' : 'false' } 呈现为字符串 'true'。

结果会是:

函数和JSX可以用于条件表达式中:

结果会是:

用JSX编写的代码需要被Babel等工具进行转换以后才能被Web浏览器所理解,这种处理一般是在软件构建过程中进行的,然后再部署构建后的应用程序。

超越HTML的架构

React的基本架构不仅仅适用于在浏览器中渲染HTML。例如,Facebook有动态图表,可以渲染到<canvas>标签,而Netflix和PayPal使用通用加载,在服务器和客户端上渲染相同的HTML。

React Hooks

Hooks是让开发者从函数组件中 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作,它的终极目标是在React中消除类组件的存在。

React提供了一些内置的Hooks,如useState、useContext、useReducer和useEffect等。它们都在Hooks API参考书中做了说明。使用最多的是useState和useEffect,分别在React组件中控制状态和检测状态变化。

Hooks规则

Hooks也有一些规则,在使用Hooks之前必须遵循这些规则:

  • 钩子只能在顶层调用(不能在循环或if语句中调用)。
  • 钩子只能在React函数组件中调用,不能在普通函数或类组件中调用。定制Hooks

构建自己的Hooks,也就是所谓的自定义Hooks,可以让你把组件逻辑提取到可重用的函数中。自定义钩子是一个名称以 "use "开头的JavaScript函数,它可以调用其他的钩子。钩子的规则也适用于它们。

常用术语

React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的,因此并不包括许多一些开发者认为构建应用程序所需的工具。这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。这种情况也就决定了React技术在创建网页应用时标准无法统一。

Flux架构的使用

为了支持React的单向数据流的概念(与AngularJS/Angular的双向数据流形成对比),Flux架构是流行的模型-视图-控制器(MVC)架构的具有代表性的替代方案。Flux的特点是,数据动作通过中央调度器发送到一个存储仓库,而对存储仓库数据的变化会被传送回视图。当与React一起使用时,这种传送是通过组件属性完成的。

Flux可以被认为是观察者模式的一个变种。

Flux架构下的React组件不应该直接修改传递给它的任何props,而是应该传递回调函数,这些回调函数可以创建由调度器发送的数据动作来修改存储仓库。数据动作是一个对象,其职责是描述已经发生的事情:例如,一个数据动作描述的是一个用户 "follow"另一个用户。它可能包含如下数据:

用户ID,

目标用户ID,

以及USER_FOLLOWED_ANOTHER_USER枚举类型。

存储仓库,是一个数据模型,可以根据从调度器接收到的数据动作来改变自己。

这种模式有时被表述为 "属性向下流动,数据动作向上流动"。自Flux诞生以来,Flux的许多实现被创造出来,其中最著名的是Redux,它的特点是单一的存储仓库,通常被称为单一的数据真相源。

历史

React是由Facebook的软件工程师Jordan Walke创建的,受PHP的HTML组件库XHP的启发,发布了React的早期原型,名为 "FaxJS",。它于2011年首次部署在Facebook的News Feed上,后来于2012年部署在Instagram上。2013年5月在美国JSConf大会上开源。

React Native是2015年2月在Facebook的React Conf上宣布的,2015年3月开源的React Native,实现了原生的Android、iOS和UWP开发。

2017年4月18日,Facebook宣布了React Fiber,这是React库的一个新的核心算法,用于构建用户界面,React Fiber将成为React库未来任何改进和功能开发的基础。

2017年9月26日,React 16.0正式对外发布。

2019年2月16日,React 16.8正式对外发布,该版本引入了React Hooks。

常用命令

创建工程:

npx create-react-app my-app

开发环境运行:

npm start

生产环境打包:

npm run build

【官方网站】

http://reactjs.org/

【最新版本】

16.13.1于2020年3月19日

【授权】

MIT License

二、【Angular】

Angular(通常被称为 "Angular 2+"或 "Angular v2及以上版本")是一个基于TypeScript的开源Web应用框架,由Google的Angular团队和由个人以及企业组成的社区领导。 Angular是由构建AngularJS的同一个团队从零开始重写的。

Angular和AngularJS的区别

  • Angular没有 "Scope"或控制器的概念,相反,它使用组件的层次结构作为其主要的架构特征。
  • Angular有不同的表达式语法,重点是"[]"用于属性绑定,"() "用于事件绑定
  • 模块化 - 许多核心功能已转移到模块上
  • Angular推荐使用微软的TypeScript语言,它引入了以下特性。

(1)静态键入,包括Generics

(2)注解

  • TypeScript是ECMAScript 6 (ES6)的超集,向后兼容ECMAScript 5(即:JavaScript)。
  • 动态加载
  • 异步模板编译
  • 由RxJS提供的迭代回调。RxJS限制了状态的可见性和调试,但这些问题可以通过像ngReact或ngrx这样的反应式附加组件来解决。
  • 支持Angular Universal,可以在服务器上运行Angular应用程序。

历史

命名

最初,AngularJS的重写被称为 "Angular 2",但这导致了开发人员的迷糊。为了澄清,团队宣布,每个框架使用不同的术语,其中 "AngularJS "指的是1.X版本, "Angular " 指的是2及以上版本。

版本2

Angular 2.0在2014年10月22-23日的ng-Europe大会上宣布。2.0版本的剧烈变化在开发者中引起了相当大的争议。

2015年4月30日,Angular开发者宣布Angular 2从Alpha转为开发者预览版,2015年12月Angular 2转为Beta版,2016年5月发布了第一个发布候选版本,2016年9月14日发布了最终版本。

版本4

2016年12月13日Angular 4发布,跳过了3,避免了因路由器包的版本错位导致的混乱,当时已经发布的版本为v3.3.0。最终版本于2017年3月23日发布,Angular 4向后兼容Angular 2。

Angular 4.3版本是一个小版本,它是4.x.x版本的替换版本。

4.3版本的功能介绍了HttpClient,一个更小、更容易使用、更强大的HTTP请求库。为守护者和解析器提供了新的路由器生命周期事件。四个新事件。GuardsCheckStart、GuardsCheckEnd、ResolveStart、ResolveEnd加入了现有的NavigationStart等生命周期事件集。有条件地禁用动画。版本5

Angular 5于2017年11月1日发布,Angular 5的主要改进包括支持渐进式Web应用、构建优化器以及与Material Design相关的改进。

版本6

Angular 6于2018年5月4日发布。这个版本,关注的重点不在于底层框架,更多的是工具链,以及让Angular在未来的更新和升级更加容易,比如:ngupdate、ng add、Angular元素、Angular Material+CDK组件、Angular Material入门组件、CLI工作区、库支持、树形摇动提供者、动画性能提升、RxJS v6。

版本7

Angular 7已于2018年10月18日发布。更新内容涉及到应用性能、Angular Material & CDK、虚拟滚动、Selects的可访问性改进、现在支持自定义元素使用Web标准的内容投影,以及关于Typescript 3.1、RxJS 6.3、Node 10(仍支持Node 8)的依赖性更新。

版本8

Angular 8已于2019年5月28日发布。具有所有应用代码的差异化加载、惰性路由的动态导入、Web工作者、TypeScript 3.4支持、以及Angular Ivy作为预览版可配置使用。Angular

Ivy预览包括:

  • 生成的代码,在运行时更容易阅读和调试。
  • 更快的重建时间
  • 减少有效载荷
  • 改进了模板类型检查
  • 向后兼容

版本9

Angular 9已于2020年2月6日发布。第9版在默认情况下使用Ivy编译器。Angular可以与TypeScript 3.6和3.7兼容。除了数百个bug修复之外,Ivy编译器和运行时还提供了许多优势:

  • 更小的软件包
  • 更快的测试
  • 更好的调试
  • 改进的CSS类和样式绑定
  • 改进的类型检查
  • 改善了构建错误
  • 改善了构建时间,默认开启AOT功能
  • 提高国际化功能

组件化

一个组件例子

Html部分

Typescript部分

路由

数据管理

定义服务类

调用服务类

常用命令

从终端上,全局安装Angular CLI:

npm install -g @angular/cli

使用 ng new 命令创建一个新的 Angular CLI 工作区:

ng new my-project-name

开发环境运行:

ng serve

生产环境打包:

ng build --prod

【官方网站】

https://angular.io/

【最新版本】

9.1.2于2020年4月15日

【授权】

MIT License

三、【Vue】

Vue.js(通常被称为Vue;发音为/vjuː/,类似于 "view")是一个开源的Model-view-viewmodel JavaScript框架,用于构建用户界面和单页面应用程序。它由Evan You创建,由他和来自Netlify和Netguru等多家公司的核心成员维护。

概述

Vue.js的特点是,它采用了一个渐进式的架构,专注于声明式渲染和组件合成。复杂应用所需的高级功能,如路由、状态管理和构建工具等,都是通过官方维护的支持库和包提供的,其中Nuxt.js是最受欢迎的解决方案之一。

Vue.js可以让你用称为指令(directives)的HTML属性来扩展HTML。

历史

Vue是由Evan You创建的。在Google工作期间,他使用AngularJS技术参与了多个项目的开发的,之后创建了Vue。他后来总结了自己的思考过程。"我想,如果我可以把AngularJS真正优秀的部分提取出来,然后构建一些轻量级的东西,会怎么样呢?" 项目的第一个版本源码提交日期是2013年7月,Vue在2014年2月首次发布。

组件化

Vue 组件扩展了基本的 HTML 元素来封装可重用的代码。从高层次的角度看,组件是Vue编译器附加行为的自定义元素。在Vue中,组件本质上就是一个带有预设选项的Vue实例。下面的代码片段包含了一个Vue组件的例子。该组件显示了一个按钮,并打印出按钮被点击的次数。

模板

Vue使用基于HTML的模板语法,允许将渲染的DOM绑定到Vue实例的底层数据。所有 Vue 模板都是有效的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。Vue 将模板编译成虚拟 DOM 渲染函数。虚拟文档对象模型(或 "DOM")允许Vue在更新浏览器之前在其内存中渲染组件。结合反应式系统,Vue能够计算出需要重新渲染的组件的最小数量,并在App状态发生变化时,启动最小量的DOM操作。

Vue用户可以使用模板语法,也可以选择使用JSX直接编写渲染函数,渲染函数允许从软件组件中构建应用程序。

反应式系统

Vue的特点是采用了反应式系统,它使用纯JavaScript对象和优化的重渲染。每个组件在渲染过程中都会跟踪其反应式的依赖关系,因此系统可以精确地知道什么时候重新渲染,以及哪些组件需要重新渲染。

变换效果

当从DOM中插入、更新或删除项目时,Vue提供了多种方法来部署变换效果。这包括了以下工具:

  • 自动应用CSS变换和动画的类
  • 集成第三方CSS动画库,如Animate.css等。
  • 在变换hooks期间,使用JavaScript直接操作DOM。
  • 集成第三方JavaScript动画库,如Velocity.js等。

当在变换组件中的元素被插入或移除时,会出现这样的情况:

  • Vue会自动检测到目标元素是否应用了CSS变换或动画。如果有,CSS变换类将在适当的时间添加/删除。
  • 如果变换组件提供了JavaScript hooks,这些hooks将在适当的时间被调用。
  • 如果没有检测到CSS变换/动画,并且没有提供JavaScript hooks,那么插入和/或移除的DOM操作将在下一帧中立即执行。

路由

单页面应用程序(SPA)的一个传统缺点是无法分享到特定网页中的确切 "子 "页面的链接。由于SPA只向用户提供一个基于URL的服务器响应(它通常服务于index.html或index.vue),因此通常情况下,将某些屏幕作为书签或分享到特定部分的链接是很困难的,甚至是不可能的。为了解决这个问题,许多客户端路由器用 "hashbang"(#!)来划分动态URL,例如http://page.com/#!/。然而,在HTML5中,大多数现代浏览器都支持不使用hashbang的路由。

Vue提供了一个界面,可以根据当前的URL路径来改变页面上显示的内容 – 可以有多种方式(无论是通过电子邮件链接、刷新还是页面内链接)。此外,当某些浏览器事件(如点击)发生在按钮或链接上时,使用前端路由器可以有意识地转换浏览器路径。Vue本身并没有自带前端路由。但开源的 "vue-router "包提供了一个API来更新应用程序的URL,支持返回按钮(导航历史记录),并支持电子邮件密码重置或电子邮件验证链接的认证URL参数。它支持将嵌套路由映射到嵌套组件,并提供精细化的过渡控制。添加了vue-router后,组件只需映射到它们所属的路由,父/根路由必须指明子路由的渲染位置。

上面的代码:

  • 在http://websitename.com/user/<id>中设置一个前端路径。
  • 这将在(const User...)中定义的User组件中呈现。
  • 允许用户组件使用$route对象的params键输入用户的特定ID:$route.params.id。
  • 这个模板(根据传递到路由器中的参数变化)将被渲染到DOM的div#app里面的<router-view></router-view>。
  • 最后生成的HTML将是:http://websitename.com/user/1:

生态系统

核心库自带的工具和库都是由核心团队和贡献者开发的。

官方工具

  • Devtools - 用于调试Vue.js应用程序的浏览器devtools扩展。
  • Vue CLI - 用于快速开发Vue.js的标准工具书
  • Vue Loader - 一个webpack加载器,允许以单文件组件(SFCs)的格式编写Vue组件。

官方程序库

  • Vue Router - Vue.js的官方路由器
  • Vuex – 基于 Flux模式的 Vue.js 的集中式状态管理。
  • Vue Server Renderer - 用于 Vue.js 的服务器端渲染。

常用命令

安装工具

npm install -g @vue/cli

创建工程:

vue create my-project

开发环境运行:

npm run serve

生产环境打包:

npm run build

【官方网站】

https://vuejs.org/

【最新版本】

2.6.1于2019年12月13日

【授权】

MIT License

四、【小结】

本文对于当前顶级的前端技术做了较为详尽的探索,前端技术一个大的方向是单页应用 (SPA,Single Page Application),我们在选取针对本业务的前端技术时需要结合如下几个方面来考虑:

1. 成员当前技能,这是一个很现实的问题,大多数程序员会选择自己比较熟悉的技术。这里要思考一下,目前自己熟悉的技术是不是最优选项?

2. 可利用的学习时间,如果发现要使用的技术需要一些时间学习,这个时间的开销到底会不会与开发进度有冲突?

3. 能否保证项目的复杂度最低,这个是比较关键的因素。先进技术之所以先进就是因为可以让开发者把时间和精力放在真正的业务开发上面来,如果要使用的技术需要进行很多与业务不相关的配置,就需要问一个问题,有没有更好的办法?

以上就是详解React Angular Vue三大前端技术的详细内容,更多关于React Angular Vue三大前端技术的资料请关注我们其它相关文章!

(0)

相关推荐

  • Angular性能优化之第三方组件和懒加载技术

    概述 应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和使用Angular,本文将以在线表格编辑为例,演示如何借助懒加载技术,在基于 Angular的框架中实现在线导入导出Excel以及数据在线填报的功能. 环境准备 1.全局安装Angular CLI:npm install -g @angular/cli 2.使用Angular CLI创建一个新

  • 如何用DevUI搭建自己的Angular组件库

    前言 作为前端开发者,随着公司业务的不断发展和增长,业务对组件功能.交互的诉求会越来越多,不同产品或者团队之间公用的组件也会越来越多,这时候就需要有一套用于支撑内部使用的组件库,也可以是基于已有组件扩展或者封装一些原生三方库.本文会手把手教你搭建自己的Angular组件库. 创建组件库 我们首先创建一个Angular项目,用来管理组件的展示和发布,用以下命令生成一个新的项目 ng new <my-project> 项目初始化完成后,进入到项目下运行以下cli命令初始化lib目录和配置, 生成一

  • 浅谈angular4 ng-content 中隐藏的内容

    如果你尝试在 Angular 中编写可重复使用的组件,则可能会接触到内容投射的概念.然后你发现了 <ng-content> ,并找到了一些关于它的文章,进而实现了所需的功能. 接下来我们来通过一个简单的示例,一步步介绍 <ng-content> 所涉及的内容. Simple example 在本文中我们使用一个示例,来演示不同的方式实现内容投影.由于许多问题与Angular 中的组件生命周期相关,因此我们的主要组件将显示一个计数器,用于展示它已被实例化的次数: import { C

  • Angular框架详解之视图抽象定义

    前言 作为"为大型前端项目"而设计的前端框架,Angular 其实有许多值得参考和学习的设计,本系列主要用于研究这些设计和功能的实现原理.本文主要围绕 Angular 中与视图有关的一些定义进行介绍. Angular 中的视图抽象 Angular 版本可在不同的平台上运行:在浏览器中.在移动平台上或在 Web Worker 中.因此,需要特定级别的抽象来介于平台特定的 API 和框架接口之间. Angular 中通过抽象封装了不同平台的差异,并以下列引用类型的形式出现:ElementR

  • 详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • 浅谈Angular2 ng-content 指令在组件中嵌入内容

    ng-content指令可以在组件中嵌入模板代码,方便定制可复用的组件. 比如:页面的header是个通用组件,导航菜单样式已经设定好,只需在header标签内加上菜单内容. 用ng-content标签,将父组件模板中包含的menu标签内容加到指定位置.select属性支持css选择器,如:"#id",".class","[name=value]"等 header组件的模板: <p> {{title}} </p> <

  • AngularJS 中括号的作用详解

    1.括号的作用 1.1方括号 [ ] 属性名加上方括号后,右侧赋值为 表达式的值 如果属性没有方括号,右侧赋值为 字符串 <div class="red">red</div> //这里类名为red <div [class]="red">red</div> //这里类名为blue,就是说有方括号右侧为表达式 //组件中 red: string = "blue"; 1.2 圆括号( ) 圆括号用于事件绑

  • 详解Angular组件之投影

    概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>

  • 详解React Angular Vue三大前端技术

    一.[React] React(也被称为React.js或ReactJS)是一个用于构建用户界面的JavaScript库.它由Facebook和一个由个人开发者和公司组成的社区来维护. React可以作为开发单页或移动应用的基础.然而,React只关注向DOM渲染数据,因此创建React应用通常需要使用额外的库来进行状态管理和路由,Redux和React Router分别是这类库的例子. 基本用法 下面是一个简单的React在HTML中使用JSX和JavaScript的例子. Greeter函数

  • 详解react应用中的DOM DIFF算法

    前言 对我们搞前端的来说,目前最流行的两大前端框架毫无疑问当属React和Vue,对于这两大框架,想必大家也是再熟悉不过了.然而,这两大框架无一例外的全部放弃使用传统的DOM技术,却采用了以JS为基础的Virtual DOM技术,也可称作虚拟DOM.所以,到底什么是Virtual DOM?两大热门框架全部使用Virtual DOM的原因又是什么?接下来让我这个搞前端的人来好好地为您讲解一下DOM DIFF算法的牛逼之处. 什么是Virtual DOM? 如字面意思所说,Virtual DOM即

  • 详解React项目的服务端渲染改造(koa2+webpack3.11)

    因为对网页SEO的需要,要把之前的React项目改造为服务端渲染,经过一番调查和研究,查阅了大量互联网资料.成功踩坑. 选型思路:实现服务端渲染,想用React最新的版本,并且不对现有的写法做大的改动,如果一开始就打算服务端渲染,建议直接用NEXT框架来写 项目地址:https://github.com/wlx200510/react_koa_ssr 脚手架选型:webpack3.11.0 + react Router4 + Redux + koa2 + React16 + Node8.x 主要

  • 一文详解React Redux使用方法

    目录 一.理解JavaScript纯函数 1.1 纯函数的概念 1.2 副作用概念的理解 1.3 纯函数在函数式编程的重要性 二.Redux的核心思想 2.1 为什么需要 Redux 2.2 Redux的核心概念 2.2.1 store 2.2.2 action 2.2.3 reducer 2.3 Redux的三大原则 2.3.1 单一数据源 2.3.2 State是只读的 2.3.3 使用纯函数来执行修改 2.4 Redux 工作流程 三.Redux基本使用 3.1 创建Store的过程 3.

  • 详解Web使用webpack构建前端项目

    好久没写技术博客了, 原因在于最近在学习前端方面的技术, 熟悉我的同学都知道, 之前我有使用Vue搭建了一个个人简历, 体验了一把最新的前端技术, 但之前我们使用的是vue-cli脚手架工具, 对于如何自己实现前端构建工具, 当下最为流行的就是webpack和gulp了, 之前一篇我们讲了gulp, 这一篇我们来好好讨论webpack. 说起webpack, 想必做前端的同学肯定不会陌生, 其实之前我们使用gulp构建的时候, 也使用了webpack的打包技术, 其实gulp和webpack并不

  • webpack安装配置与常见使用过程详解(结合vue)

    webpack介绍和安装 webpack:前端模块化打包工具 安装webpack需要安装Node.js,Node.js自带软件包管理工具npm 查看自己的node版本: node -v 全局安装webpack cnpm install webpack -g 查看webpack版本 webpack --version 局部安装webpack cnpm install webpack --save-dev 为什么全局安装之后还需要局部安装? 在终端直接执行webpack,使用的是全局webpack

  • 详解如何在vue+element-ui的项目中封装dialog组件

    1.问题起源 由于 Vue 基于组件化的设计,得益于这个思想,我们在 Vue 的项目中可以通过封装组件提高代码的复用性.根据我目前的使用心得,知道 Vue 拆分组件至少有两个优点: 1.代码复用. 2.代码拆分 在基于 element-ui 开发的项目中,可能我们要写出一个类似的调度弹窗功能,很容易编写出以下代码: <template> <div> <el-dialog :visible.sync="cnMapVisible">我是中国地图的弹窗&l

  • 详解React中共享组件逻辑的三种方式

    废话少说,这三种方式分别是:render props.高阶组件和自定义Hook.下面依次演示 假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样: const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return

  • 详解React setState数据更新机制

    为什么使用setState 在React 的开发过程中,难免会与组件的state打交道.使用过React 的都知道,想要修改state中的值,必须使用内部提供的setState 方法.为什么不能直接使用赋值的方式修改state的值呢?我们就分析一下,先看一个demo. class Index extends React.Component { this.state = { count: 0 } onClick = () => { this.setState({ count: 10 }) } re

  • 详解React中的this指向

    打算记流水账一般细数一下 React 中的 this 指向问题,具体流程按事件三要素:起因,经过,结果.哈哈哈哈哈! 起因: 众所周知,React 的设计是响应式的,使用者无需操纵 DOM,操纵数据,页面就会渲染更新. 数据一变就更新,是更新所有的 DOM 吗?当然不是,哪些变了就重新渲染哪些.那就要对数据变化前后的 DOM 进行比较.直接对比真实 DOM 吗?这样性能会很低,React 比较的是虚拟 DOM,虚拟 DOM 也是对象,只不过相较真实 DOM而言,少了很多属性,更"轻".

随机推荐