为什么我会选择React+Next.js,而不是Vue或Angular?

拓朴露台
• 阅读 1155

本文的目的不是要对 React、Vue 和 Angular 三者进行比较,已经有许多人对这个话题进行了比较深入的探讨。每个人都有自己的偏好。与其他库和框架相比,我更喜欢使用 React 构建用户界面。在我解释了为什么之后,也许你也会切换到 React,如果你现在还没有用它的话。

几个月前,我正在寻找一个用于 React 的样板文件生成器或是初学者工具包。我向往简单可靠的东西。经过长时间的搜索,我找到了自己想要的东西。那就是名为 Next.js 的框架。它在 GitHub 上获得了大量的 star 数,这在我看来是一大优势。这意味着这个项目的未来可期,而且如果需要,你可以向社区寻求帮助。在 readme 文件的顶端,有一个指向 learnnextjs.com 的链接。一个大约 1 小时的短教程,教你如何使用 Next.js。我不是说简介,而是让你可以真正地开始构建应用。真的很棒!

为什么我会选择React+Next.js,而不是Vue或Angular?

Next.js

我发现,Next.js 比其他可选的方案要简单的多,也更有效率。

Create React App 在 GitHub 上的星数更多,而且承诺零构建配置。但是,它不像看上去那么简单。你需要学习客户端路由、页面布局等等,更不用说服务器端渲染了。

而对于 Next.js,你只要几个小时就可以用它进行开发了。越来越多的人喜欢 Vue,即使它在某些方面仍然比不上 React 和 Angular。因为它简单,你可以用最少的时间完成最多的事情。在我看来,Next.js 填补了 React 和 Vue 之间的空白,使 React 一飞冲天。

Vue 似乎是一个不错的选择,Angular 呢?
这两个都是排名很靠前的框架,提供了出色的支持、性能,而且未来可期。但是,在和 Next.js 搭配使用时,我只会选择 React,而不是它俩中的一个。

为什么我会选择React+Next.js,而不是Vue或Angular?

Vue

我一直将 Vue 视为入门级应用和网站的最佳选择。我以前甚至还写过几篇文章,但是,React 与 Next.js 的搭配是最省力的。有人可能会说这是孩子的游戏。

公平地讲,React 入门并没有那么难。它的学习曲线稍微有点陡峭,但你最终会得到回报。

考虑到这一点,React 就占了上风。它更成熟、更可靠,有更大的社区和 Facebook 的支持。

为什么我会选择React+Next.js,而不是Vue或Angular?

Angular

在我的印象中,Angular 一直是一个重要而成熟的框架,但是,我不会选择它。因为我不喜欢它。

虽然 TypeScript 也是一个选项,但你似乎是被迫在使用它。整个框架看上去过于复杂,而且没有明确的理由。最糟糕的是,我似乎找不到任何值得我经历这些麻烦去使用它的地方。

Next.js 的特性

下面是 learnnextjs 上列出的一些很棒的 Next.js 特性:

默认服务器端渲染;

为加速页面加载,自动进行代码分割;

简化客户端路由(基于页面);

基于 Webpack 的开发环境,支持热模块更换
(https://webpack.js.org/concep...(HMR);

可以通过 Express 或任何其他 Node.js HTTP 服务器实现;

可以通过你自己的 Babel 和 Webpack 配置进行定制;

让我稍微解释下这些特性。

应用被分成块在服务器端渲染,加载时间非常短。甚至,对于不支持客户端渲染的搜索引擎,SEO 都没有意义。

路由解决方案和 Webpack 都有了很好的支持。然后是热模块更换(HMR)可以为你节省宝贵的开发时间,因为只需上传变化的代码就可以。最后,它提升了开发者体验(DX)。

它是如何使我的工作变得更轻松的?
每当我开始创建一个新项目时,我必须建立一堆依赖关系和脚本,使一切正常运行。我不得不做一些事情,如安装 node-sas、设置监控、编写 npm 脚本等。

甚至在我真正地开始应用开发的前夕,我还得管理几十个依赖项。Next.js 使我可以跳过这些我每次都会遇到的繁琐工作。它使我可以在几分钟内开始任意一个项目。

样式

Next.js 提供了内置的 CSS 支持,称为 styled-jsx。我必须承认,我直到最近才使用它,因为它还无法与其他类似的解决方案相比,如 styled-components 或 JSS。但是,最近他们发布了版本 2,比第一个版本有了很大的改进,并且有很大的潜力。

以下是他们列出的一些特性:

完全支持 CSS,没有电量方面的权衡;

运行时大小仅有 3KB(从 12KB 经 gzip 压缩);

选择器、动画、关键帧完全隔离;

内置 CSS“浏览器引擎前缀(vendor prefixing)” ;

最低限度的转译快速而高效;

非服务器端渲染时的高性能运行时 CSS 注入;

未来可期:与服务器端可渲染的“Shadow CSS”相当;

“源映射(Source maps)” 支持;

支持动态样式和主题;

基于插件的 CSS 预处理。

你需要知道的是,它非常快、非常灵活,最重要的是,它与 JSX 以及 React 的思想一致。你不需要设置任何东西,什么都为你准备好了。

不过,如果你仍然希望使用以前的 CSS 预处理器,你也可以使用。关于 LESS、SASS、PostCSS 和 CSS-Modules,我都有点忘了,但如果你还喜欢它们,当然就可以使用它们。

作为 styled-jsx 的替代方案,我推荐 Material-UI-Next。这是一个不怎么有名的 React 组件,实现了谷歌的 Material Design。它使用了前面提到的 JSS,适应性强且未来可期。

我现在正在一个新项目中使用它,目前为止,我很喜欢他。

Webpack

你声明的每一个导入都是针对每个页面自动打包并提供。也就是说,页面永远不会加载不必要的代码。

你甚至可以分析打包好的文件,借助延迟加载模块进一步优化加载时间。

路由

路由简单而直观,你可以选择预取页面来获得最好的性能。你不需要为了让路由器发挥作用而安装任何依赖。

开始的时候,习惯使用 React Router 或其他类似路由器的人们可能会遇到一点困难,但它确实很简单,只是方法不同。但在我看来,这种方法非常容易掌握。

你不需要指定路由和所有与路由相关的内容,而只要将一个页面添加到 pages 目录,从而使页面 URL 可用。这非常简单,但是如果你想要更复杂的东西呢?

安装一个服务器,最好是 Express,在服务器配置中指定自定义路由。通过这种方式,你可以得到你想要的各种路由和简洁的 URL。

部署

只要不需要在运行时生成动态页面,Next.js 就允许你将应用导出成静态 HTML。相当不错,不是吗?

应用程序部署非常令人愉快;这不仅是因为你最终会达到目标,还因为你的实现方式。你可以使用一个命令构建整个应用程序,并使用另一个命令将其部署到全球的主机。

如果你的主机上有 ZEIT now,你就多了一个选项。如果你计划使用 Next.js,我建议你使用这个部署工具,因为它会使部署变得极其简单。
为什么我会选择React+Next.js,而不是Vue或Angular?

总 结

有许多细节我没有提及。我只是大致介绍了在我看来最重要的内容。 在我发现 Next.js 之前,我从来没有像现在这样喜欢 React。把 React 和 Next 一起使用,看起来很自然。

一开始就应该是这样的。 对我来说,这是构建用户界面唯一正确的方法,它让我爱上了 React。

这里推荐一下我的学习交流q-u-n-:731771211,里面都是学习前端的,希望能帮助你更了解前端,学习前端

点击:加入

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
VBox 启动虚拟机失败
在Vbox(5.0.8版本)启动Ubuntu的虚拟机时,遇到错误信息:NtCreateFile(\\Device\\VBoxDrvStub)failed:0xc000000034STATUS\_OBJECT\_NAME\_NOT\_FOUND(0retries) (rc101)Makesurethekern
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这