[译] 哪些项目需要 React?都需要!

本文讲的是[译] 哪些项目需要 React?都需要!,

项目什么时候需要 React 框架呢?这是 Chris Coyier 在最近一篇博文中提出的问题。我是 Chris 博客的粉丝,所以我好奇他要说什么。

简而言之,Chris 提出了一系列使用 React(或其他类似的当代 JavaScript 库)的优势和劣势。虽然我并不反对他的观点,但我依然发现自己得出了不同的结论。

所以今天我想说的是,对于“项目什么时候需要 React 框架”的答案不是“要看情況”,而是“任何时候”。

React vs Vue vs Angular vs…

首先,说点题外话:在他的文章中,Chris 选择 React 作为一般意义上“前端库”的代表,那么我也一样。况且 React 是我维护的仓库 VulcanJS(一个 React 和 GraphQL 框架)中最熟悉的东西。

话虽如此,我的观点也适用于任何提供 React 相同特性的其他库。

锤子的力量

如果你手里只有一把锤子, 所有东西看上去都像钉子。

这则谚语长久以来都被用于谴责一刀切看问题的人。

但我们假设有一段时间,你的确生活在布满钉子的世界(听起来有点起鸡皮疙瘩),那么你信任的锤子能够解决你遇到的任何问题。

想想每次重复使用相同工具的好处:

  • 无需花时间决定使用哪一个工具。
  • 花更少的时间学习新工具。
  • 拥有更多的时间来更好地挥舞你选择的工具。

所以 React 会是这种工具吗?我觉得它可能是的!

复杂度谱

首先,我们来看看最常见的反对“一切皆 React”的观点。我直接引用 Chris 原话:

举个例子,一个博客也许没什么复杂的逻辑,一点也不符合应该使用 React 框架的情况。既然在这种情况下 React 框架不是很合适,那么在这用 React 框架就不是好的选择。因为这么做引入了复杂的技术,依赖了很多根本没用到的东西。

说的很在理。一个简单的博客不需要 React。毕竟即使你需要一点 Javascript 处理注册表单,你也可以仅仅使用 jQuery。

什么?你需要在不同页面的多个地方使用那个表单?还要只在某些条件下才显示?也要加上动画?等等,打住…

我用这个小情景想表达的主旨就是复杂性并不是一个或是或非的问题,现代网站生活在一个连续的频谱上,从静态页面一直到丰富的单页应用。

所以可能现在你的项目正舒服地生活在“简单”的这一头,但这一路下去六个月后呢?与其陷入鸽子洞式的糟糕实践,选择一种留有成长空间的技术岂不更好?

React 的优势

过早优化是万恶之源。

这是程序员中流行的另一则言语。毕竟,当胶带就能做的很好的时候,谁会需要锤子和钉子呢!

但这里做了一个假设就是“过早优化”是一个长期的少有成效的艰难过程。并且我觉得这个不适于 React。

虽然 React 需要一些时间来习惯,但一旦了解了其基本概念,您就能像使用传统的前端工具一样快速上手。

事实上,也许更多的是因为 React 使用了非常强大的组件概念。就像 CSS 鼓励你考虑可重用的类和样式一样,React 带来了一个灵活的模块化前端架构,从简单的静态主页到交互式后端仪表板,为每一个用例带来好处。

JavaScript, 随处都是 JavaScript

我们生存在 JavaScript 的世界。就像 Chris 所说:

你通过 Node.js 构建服务端,也有很多项目可以通过 JavaScript 处理 CSS。现在通过 React 框架,你还可以在 JavaScript 里写 HTML。

万物归于 JavaScript!JavaScript 万岁!

Chris 不是很相信,但我相信。JavaScript 本身并不一定完美,但能够访问整个现代 NPM 生态系统太棒了。

过去安装一个 jQuery 插件要找到它的官网,下载下来,拷贝到你的项目目录,加一个<script> 标签,然后期望记得每过几个月检查一下新版本。现在,安装和 React 包同样的插件只是 npm install 命令的问题。

使用像 styled-components 这样的新库,甚至 CSS 现在也被连带着尖叫着进入未来。

相信我,一旦你习惯了那种全世界都在说的语言,那就很难再回归到以前的方式了。

不会有人想到用户!

我知道你在想什么:目前为止我一直在推销 React 给开发者带来的好处,却小心翼翼的提及终端用户的体验。

并且这仍然是反对使用当代库的关键论点:缓慢臃肿的 JavaScript 站点却只是为了显示单个“奇迹淫巧”的广告。

此外还有一个小秘密:你可以完全不引用 JavaScript 而获得 React 的所有优势!

我想说的是在服务端渲染 React。事实上, 像 Gatsby(还有 Next.js 等等)这样的工具可以把你的 React 组建编译进静态 HTML 文件中,这样你可以托管在 GitHub pages 上面。

举个例子,我自己的个人站点 就是一个 Gatsby-generated React 应用,没有加载任何的 JavaScript(除了一个 Google Analytics 片段)。 我在开发中发挥了 React 的所有优势(全 JavaScript,拥抱 NPM 生态,styled-components 等),而最终得到了纯 HTML 和 CSS 的最终产品。

总结

概括一下,这是我认为 React 是任何项目的可行选择的四个原因:

  • 即使是最简单的网站,也很难保证你永远不会需要交互功能,如标签、表单等。
  • React 基于组件的方式即使相比于基于内容的静态站,也有巨大的优势。
  • 拥抱现代 JavaScript 生态系统是又一个巨大的优势。
  • 现代服务端渲染工具可以消除终端用户使用 React 的劣势。

所以 Chris,您觉得呢?我的观点否足够令人信服?还是您依然保持怀疑?

那么你呢,亲爱的读者?你觉得像 Chris 所说每一个工具都有它的用处,还是同意我的观点“锤子时间”就在眼前?评论起来让我知道你们的观点吧!






原文发布时间为:2017年5月10日


本文来自合作伙伴掘金,了解相关信息可以关注掘金网站。

时间: 2024-11-10 00:21:59

[译] 哪些项目需要 React?都需要!的相关文章

[译]开发者眼中 iOS 11 都更新了什么?

本文讲的是[译]开发者眼中 iOS 11 都更新了什么?, 原文地址:What's new in iOS 11 for developers 原文作者:Paul Hudson 译文出自:掘金翻译计划 译者: Swants 校对者: Danny1451 RichardLeeH 苹果在 2017 年全球开发者大会上公布了 iOS 11 , 其加入许多强大的功能,如 Core ML,ARKit,Vision,PDFKit,MusicKit 拖放等等. 我尝试着把主要变化在接下来的文章里总结了出来,并在

这些开源项目,你都知道吗?(持续更新中...)[原创]

原文 这些开源项目,你都知道吗?(持续更新中...)[原创] Json.NET  http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Linq To JSON可以快速的读写Json,通过JsonSerializer可以序列化你的.Net对象.让你轻松实现.Net中所有类型(对象,基本数据类型等)和Json的转换.   Math.NET http://www.mathdotn

Android原生项目集成React Native的方法

开发环境准备 首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件(比如npm). 在应用中添加JS代码 在项目的根目录中运行: $ npm init $ npm install --save react react-native $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig npm init创建了一个空的node模块

【OSGI】5.实战OSGI-翻译助手项目03

我们上次开发了包含本地服务和远程服务两个插件的pulg-in项目,并且学习了如何注册和获取Service,如何绑定Http服务,如何绑定Servlet服务. 接下来我们依旧使用osgi技术,将项目改为使用Spring注入技术的项目. 说到这里不得不介绍一下Spring-DM: Spring-DM指的是 Spring Dynamic Modules.Spring-DM 的主要目的是能够方便地将 Spring 框架和OSGi框架结合在一起,使得使用Spring的应用程序可以方便简单地部署在OSGi环

【OSGI】4.实战OSGI-翻译助手项目02

上次我们配置了运行Web项目所需要的Run Configuration环境,创建了客户端入口插件TranslateClient模块,下面我们来继续完成客户端模块的程序. 因为是Web项目,我们要让用户通过浏览器去访问我们的应用,所以我们要去写一些Servlet来处理Http请求. 因为我们的工程是plug-in工程,不是传统的Web project,所以不能直接创建一个Servlet(因为涉及到Web.xm的mapping映射和访问路径的设置),我们需要创建一个类,让它去继承HttpServle

【OSGI】3.实战OSGI-翻译助手项目01

我们通过写一个真实的Web项目来深入学习使用OSGI技术. 我们做一个Web版的翻译助手(类似电子英汉词典之类的) (1)服务接口模块 我们在Eclipse中创建一个pulg-in项目: 我们创建一个接口,并编写方法 package com.zyg.osgi.translateasslt.service; public interface TranslateService { //翻译方法 public String translate(String word); } 我们回想一下现在的翻译软件

用VS2008自带模板创建的WCF服务库项目,什么都没改过,编译没问题但启动时出错,请帮帮忙。

问题描述 用VS2008自带模板创建的WCF服务库项目,代码配置全都没改过,编译没问题但启动时出错,请帮帮忙.本人用的是win7+vs2008后台输出如下:"WcfSvcHost.exe"(托管):已加载"C:WindowsassemblyGAC_32mscorlib2.0.0.0__b77a5c561934e089mscorlib.dll""WcfSvcHost.exe"(托管):已加载"E:ProgramFilesMicrosoft

如何选择前端框架:ANGULAR VS EMBER VS REACT

最近一段时间是令前端工程师们非常兴奋的时期,因为三大Web框架陆续发布新版本,让我们见识到了更强大的Web框架.Ember2.0在2个月之前已经发布,从1.0升级到2.0非常简单.几周之前React发布了0.14版本.还有很多流行的前端框架,像Backbone .Knockout及Aurelia.如果你想开发一个Web app,建议采用Angular,Ember或React三种框架中的一个.这三个框架可以说是安全级别最高,技术非常成熟的框架,而且有很多技术社区支持.所以你又开始纠结了,开发Web

深入剖析产品经理,不是人人都是产品经理!产品经现和项目经理都要看一下

有本书<人人都是产品经理>很火,"产品经理"在国内是一个炙手可热的职位,有人也说"产品经理"已经烂大街了.可是产品经理真的那么好做吗?我想,众多产品经理们心中都有自己的答案.Evan(微博)写了一篇博客来谈谈自己对"产品经理"的认识(原标题:<大话产品经理>,TECH2IPO二次整理).他首先描述了国内产品经理的三种形式:新蛋的分而治之式.阿里巴巴的大包揽式和创业公司的"铁人汉堡"式,并分析了作为一个产