哪些项目需要 React? 全部!

Avatar of Sacha Greif
Sacha Greif

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

什么项目需要 React? 这是 Chris Coyier 在 最近的一篇博文中 谈到的问题。 我非常喜欢 Chris 的文章,所以我很想知道他对这个问题的看法。

简而言之,Chris 列举了一系列使用 React(或其他类似的现代 JavaScript 库)进行项目开发的优缺点。 虽然我并不反对他的论点,但我还是得出了不同的结论。

所以今天,我来谈谈“什么项目需要 React?” 这个问题的答案不是“视情况而定”。 而是“每次都需要”。

React 与 Vue 与 Angular 与…

首先,我们先澄清一下:在 Chris 的文章中,他将 React 作为“前端库”的代表,我在这里也这么做。 另外,React 是我在 VulcanJS (一个 React 和 GraphQL 框架)的持续工作中最熟悉的库。

也就是说,我的论点应该同样适用于任何提供与 React 相同功能的其他库。

锤子的力量

当你只有锤子时,所有东西看起来都像是钉子。

这句谚语长期以来一直用来谴责任何试图对每个问题采用系统性的“一刀切”方法的人。

但让我们假设一下,你确实生活在一个充满钉子的世界里(尽管这听起来可能不舒服),并且你那把可靠的锤子能够解决你遇到的任何问题。

只要考虑一下能够每次都重复使用相同的工具 的好处。

  • 不用花时间决定使用哪个工具。
  • 少花时间学习新的工具。
  • 更多时间练习你选择的工具。

那么 React 是那个工具吗? 我认为有可能!

复杂度谱

首先,让我们解决反对“React 全方位覆盖!” 观点的最常见论点。 我将直接引用 Chris 的话。

例如,一个博客可能没有出现会使 React 成为合适选择的任何问题,也符合任何场景。 由于它不适合,因此它可能不适合,因为它为不需要它的东西引入了复杂的技术和依赖项。

说得有道理。 一个简单的博客不需要 React。 毕竟,即使你确实需要一点 JavaScript 来连接新闻稿订阅表单,你也可以直接使用 jQuery。

什么? 你需要在不同页面上的多个地方使用该表单? 并且只在特定条件下显示? 还要进行动画处理? 等等,等等…

我试图用这个小场景说明的是,复杂度不是一个非此即彼的二元选择。 相反,现代网站存在于一个从静态页面一直到丰富的单页应用程序的连续谱线上。

所以,也许你的项目现在舒适地嵌套在“简单”的频谱一端,但六个月后会怎么样? 选择一个让你有成长空间的技术难道不是比选择一个将你局限于不良实践的技术更好吗?

React 的优势

过早优化是万恶之源。

程序员之间流传的另一句名言。 毕竟,当胶带可以很好地完成工作时,谁需要锤子和钉子!

但这假定“过早优化”是一个漫长而艰苦的过程,几乎没有好处。 我认为这并不适用于 React。

虽然 React 可能需要一段时间才能适应,但一旦你学会了 它的基本概念,你就会像使用经典前端工具一样高效。

实际上可能更高效,因为 React 利用了极其强大的组件概念。 就像 CSS 鼓励你以可重用的类和样式进行思考一样,React 推动你转向一种灵活的、模块化的前端架构,它对每个用例都有好处,从简单的静态主页到交互式后端仪表板。

JavaScript,无处不在

我们生活在一个 JavaScript 世界里。 或者,正如 Chris 所说

你在服务器端有 Node.js。 有很多项目将 CSS 从混合中剔除,并通过 JavaScript 处理样式。 并且使用 React,你的 HTML 也在 JavaScript 中。

所有 JavaScript! 万岁 JavaScript!

Chris 并不完全信服,但我信服。 JavaScript 本身并不一定是完美的,但能够访问整个现代 NPM 生态系统非常棒。

安装 jQuery 插件过去需要找到其主页、下载它、将其复制到你的项目目录中、添加一个 <script> 标签,然后希望记得每隔几个月检查一下是否有新版本。 现在,将同一个插件作为 React 包安装只需一个简单的 npm install 命令即可。

有了像 styled-components 这样的新库,甚至 CSS 也正在被拖入未来。

相信我,一旦你习惯了这个所有东西都使用相同语言的世界,你很难再回到过去的方式。

有人会为用户着想吗!

我知道你在想什么:到目前为止,我一直试图向你推销 React 对开发人员的好处,但我一直谨慎地避开任何关于最终用户体验的提及。

这仍然是反对现代库的关键论点:缓慢的、臃肿的 JavaScript 网站,即使是显示单个“一个奇怪的技巧”广告也要花费很长时间。

但这里有一个小秘密:你可以在完全没有 JavaScript 的情况下获得 React 的所有好处!

我在这里说的是在服务器端渲染 React。 实际上,像 Gatsby (以及即将发布的 Next.js)这样的工具甚至允许你将 React 组件编译成静态 HTML 文件,你可以将这些文件托管在例如 GitHub 页面上。

例如,我自己的个人网站 是一个 Gatsby 生成的 React 应用程序,它完全不加载任何 JavaScript(除了 Google Analytics 代码片段)。 我得到了使用 React 进行开发的所有好处(全 JavaScript、访问 NPM 生态系统、styled-components 等等),但最终得到一个 100% 的 HTML 和 CSS 最终产品。

总结

概括地说,以下是我认为 React 是任何项目都可行的选择的四个原因。

  • 真的很难保证你永远不会需要像选项卡、表单等交互式功能,即使是最简单的网站也是如此。
  • React 的基于组件的方法即使对于静态内容网站也有很大的好处。
  • 访问现代 JavaScript 生态系统是一个巨大的优势。
  • 现代服务器端渲染工具消除了使用 React 对最终用户造成的不利影响。

那么,Chris,你怎么看? 我说服你了吗? 或者你心中仍然存在疑问?

亲爱的读者,你怎么看? 无论你像 Chris 一样认为每个工具都有其用途,还是你像我一样同意锤子的时代已经到来,请在评论中告诉我们!