9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

从新 React 文档看未来 Web 的开发趋势

作者:Luke Twomey

  • 2023-04-27
    北京
  • 本文字数:3306 字

    阅读完需:约 11 分钟

新的 React 文档终于到来,目前已经通过全新 React.dev 域与广大开发者见面。

 

长久以来,官方文档是一直是新手们学习 React 的好起点。然而,新文档中表现出的一些倾向却在社区中引起了不小的轰动。

 

首先,新文档建议在首次启动项目时使用 Next.js 或 Remix 等 React 支持的框架,而无框架开发项目的老办法则像麻风病人般被“驱逐”到了页面下方的下拉部分。



不知道这样的变化将如何影响 Web 开发的未来。作为大受欢迎的学习资源,官方文档有着非常强烈的引导性,相信开发社区、特别是那些经验不足的开发人员,肯定会严格按照说明操作、最终让框架在新项目中的使用频率大幅增加。

 

新文档是什么时候发布的?

 

新的 React 文档发布于 2023 年 3 月 16 日。

 

其实文档内容早在 2021 年 10 月就已经作为 beta 形式亮相了,当时主要侧重于使用 Hooks 和一些函数组件。经过近两年的调整,如今正式版本终于推出,但社区反响却是褒贬不一。

 

另外,原始文档已降级为旧版,但仍然开放以供参考。



新文档跟原 React 文档有何区别?

 

跟整个前端开发领域一样,React 的开发思路也不可能停滞不前,一直随着时间推移而稳步发展。

 

Hook 与 useState

 

React 组件有两种不同的编写方式,类组件或函数组件。

 

以往,如果大家需要在组件中存储状态,那唯一的选择就是使用“有状态”类选项。更短、更简单的函数组件没办法满足这类需求。

 

随着 React 16.8 当中 Hook 和 useState 的出现,这一切发生了变化。它们改变了游戏规则,现在允许将状态存储在函数组件当中。于是乎,函数组件成的风头盖过了更长、更复杂的类组件,成为众多 Web 开发者的首选。函数组件得势之后,旧的类组件降级为遗留选项,这也推动了“现代 React”的流行并使其成为组件编写的标准方式。

 

原始文档仍然非常关注类组件,这是因为很多应用都需要存储状态信息。其中列出的大部分代码示例都基于类选项,代表着当时最流行的解决方案。

 


 尽管旧文档在讲解 React 用法和为新用户提供示例方面做得不错,但其中大量旧示例的存在还是跟现实世界中的组件编写方式有所冲突。更令人沮丧的是,刚刚开始学习 React 的人们甚至不宜立刻阅读官方文档,因为这里介绍的是一种已经过时的 React 编写方式。

 

而在阅读较新的 beta 文档时,开发者们又抱有怀疑态度,“这可是 beta 版,里面的内容可靠吗?”面对这样一个尴尬的问题,新文档明显是想要拨乱反正、定下新标杆。


Create React App 已无人问津

 

长久以来,Create React App 一直是创建 React 新项目时的首选工具。它提供一种便捷方法,能够快速创建应用程序所需要的一切——开发服务器、linting、热重载开发环境、生产环境的转译和捆绑等等。

 

最近,Create React App 的吸引力开始被 Vite 抢走,后者凭借着显著的速度优势而越来越受到欢迎。

 

新文档同样不再使用 Create React App,甚至提都不提。但这个版本也没有将 Vite 作为首选方案,而开始大肆赞扬使用框架构建新应用的种种优势。

 

Dan Abramov 只在文档中建议将 Create React App 作为推荐框架的启动器。所以看起来 Create React App 并没有彻底出局,只是不再受到重视、推广和维护。

 


useEffect 的必要性受到质疑

 

另外,社区还提出了另一个质疑,就是新版文档在 React 组件中对 useEffect 的使用似乎有点过度。

 

很明显,useEffect 确实在很多不必要的情况下得到了广泛使用,而它的存在其实只会令代码更难理解、执行更慢。

 

文档在相关章节中提供了使用 useEffect 的常见情况和综合示例,但这些例子其实可以用其他更高效的方式来编写。

 

框架已成至高真理

 

框架能够为大部分应用程序和网站提供实际需要的功能,包括路由、数据获取和 HTML 生成等。

 

文档中指出,尽管我们的 React 项目可能在起步阶段不一定需要框架所提供的一切,但很可能会在未来的某个时候有所需求。如果使用框架,即可在必要时轻松添加这些新功能。

 

相反,如果大家选择 Vite 来创建项目,那后续就得自行负责添加额外的库来解决各种功能需求。根据文档的观点,这会降低应用程序的运行速度,同时拉高各组件间和谐匹配的难度。



 文档中推荐的框架有 Next.js、Remix、Gatsby 和 Expo。就个人而言,我当然承认使用框架有其好处,连我本人的网站也是用 Next.js 创建的。我最初也是使用 Create React App 开发网站,但在考虑到页面 SEO 和为谷歌的信息抓取提供元描述和标题等内容之后,框架用实力证明了自己的价值。

 

React.dev 网站本身现在也是用 Next 和 Tailwind 编写的,所以官方团队明显也在走这个路子。

 

但有必要把框架当成排他式的优先选项吗?

 

文档以非常鲜明的态度指出了创建新 React 项目的最佳方式。只要读读“我可以在不用框架的情况下使用 React 吗?”这部分,就能感受到项目团队强烈建议大家使用框架。

 

你当然可以在不匹配框架的情况下使用 React。但如果希望使用 React 构建新的应用程序或网站,我们建议使用框架。但如果想自行创建定制化设置,我们也无权阻止。请便!


SSR (服务器端渲染)

 

既然如此大力推荐使用框架,这似乎意味着 SSR(服务器端渲染)也是新应用的开发首选。从我收集到的反馈意见来看,大多数开发者也确实支持这种倾向。

 

但我要唱唱反调,分享几个不同的观点。


对初学者更不友好

 

对于刚刚接触 React 世界的初学者来说,立即接触服务器端渲染很容易令人心生畏惧。

 

Create React App 的出色之处就在于它相对简单而且易于使用,任何人都可以快速用它构建起 React 应用程序。而强制要求使用框架和服务器端渲染不仅增加了早期学习的复杂性,也很可能成为大家接触 React 的障碍,让初学者们难以坚持下去。

 

老实说,就连我自己有时候都整不明白,更别说那些刚打算入行的新人了。在我看来,这东西真的挺劝退人的。

 


不必要的复杂性

 

不少网友评论说,“我只想要一个简单的客户端应用程序,不需要服务器端那些没完没了的复杂元素”。其实这话有理,因为在很多情况下,框架提供的那些额外内容和服务器元素其实完全没有任何必要。

 

有时候,一个简单的客户端应用程序就足够了,没必要非得把一切都交给服务器去做渲染!

 

客户端单页应用

 

咱就问一句,客户端单页应用是不是被丢进垃圾堆了?React 团队倒是矢口否认。

 

Dan Abramov 反驳说,虽然他们确实在推动框架作为创建新 React 应用的默认方式,但服务器端渲染并不是唯一的选项。

 

几乎所有这些框架都允许您生成纯客户端应用程序,几乎所有框架都可以不依赖于 Node.js 服务器。

 

但出于文档内所述的各种原因,他们仍然优先推荐框架,但不一定要匹配服务器端渲染。即使使用这些框架,也仍然可以创建纯客户端应用程序。

 

这就是 React 团队给出的结论:应该优先使用框架,并在使用框架的前提下选择不用服务器端渲染。

 

新文档昭示出怎样的 Web 开发图景?

 

官方文档中关于使用框架的建议,必将对未来新 React 应用的创建倾向产生深远影响。

 

与其花时间深入研究这些框架,相信会有更多人默认选择使用。这意味着未来的 Web 应用会越来越臃肿,并把服务器端处理机制全塞进去。

 

可以看到,虽然使用这些框架也能创建纯客户端应用程序,但这绝对不是什么常规操作,React 团队也因此受到了不少批评。

 


 网友们非常直言不讳地驳斥了这种观点,所以希望能看到官方做点回应来消除人们的负面评论,最好是能稍微更新一下文档内容来做澄清。

 

当然,我倒不觉得 React 这么搞就会失去人气,毕竟它仍然是首选库、将继续在多数开发者的心目中保持领先地位,也包括我自己。

 

文档中提到的这些框架的流行度也会进一步飙升,毕竟 React 自己也在使用(他们的 React.dev 网站用的就是 Next.js),并开始得到官方文档的推广。

 

当然,也会有越来越多的应用程序使用服务器端渲染来创建,并从起步阶段就内置了所有附加功能(路由之类)。

 

总结

 

React 官方文档是份很好的学习资料,目前的种种争议都改变不了这个基本事实。人们热切期待新的文档,现在正式版的发布终于满足了开发者群体的愿望。

 

新文档会帮助到很多人,特别是那些刚刚开始学习 React 的朋友。当然,经验丰富的开发者也可以将其作为重要的参考资料。

 

总之,新的文档确实引发了不少争议和讨论,我们也将持续关注事态的进一步发展。

 

相关阅读:

前端工程化实战:React 的模块化开发、性能优化和组件化实践

我被 React 劫持了,很痛苦又离不开

手写一个 react,看透 react 运行机制

看透 react 源码之感受 react 的进化

活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2023-04-27 11:083933

评论 1 条评论

发布
用户头像
但是……react本身不就是个框架么……框架的文档推荐用框架的框架……
2023-05-12 16:53 · 江苏
回复
没有更多了
发现更多内容

5分钟在k8s上可视化搭建Kylin5

CloudEon开源

大数据 开源 云原生 kubernetes 运维 Apache Kylin

LED广告牌企业的突破点在哪?

Dylan

技术 分辨率 LED LED显示屏 led显示屏厂家

GitHub标星137k+,超全面Java知识点总结!从10K到40K全有了

做梦都在改BUG

Java

Spring Security安全框架在Spring Boot框架中的使用

做梦都在改BUG

Java Spring Boot spring security 权限管理

牛客网最新版Java面试题大全带答案 1400多题(限时分享)

架构师之道

Java 面试

踩坑:以为是Redis缓存没想到却是Spring事务!

做梦都在改BUG

Java redis spring 缓存 事务

GreatSQL 8.0.32-24 今日发布

GreatSQL

MySQL greatsql greatsql社区 MySQL生态

卡牌游戏系统开发web3链游技术

薇電13242772558

web3 链游

面渣逆袭必看!Java中高级面试指南,Github标星4.3k+!

做梦都在改BUG

Java java面试 Java八股文 Java面试题 Java面试八股文

【ChatGPT应用篇】助力Beauty代码的初体验 | 京东云技术团队

京东科技开发者

人工智能 ChatGPT 企业号 6 月 PK 榜

MySQL对derived table的优化处理与使用限制

GreatSQL

MySQL greatsql社区

GitHub 爆火的「算法刷题宝典」,电子版终于出来了

做梦都在改BUG

Java 数据结构 算法 LeetCode

入职阿里?最少啃完这本500页Java并发多线程源码笔记

程序知音

Java 并发编程 多线程 高并发 后端技术

二级等保堡垒机用哪个品牌好?理由是什么?

行云管家

网络安全 等保 堡垒机 等级保护

软件测试/测试开发丨接口自动化测试学习笔记分享

测试人

程序员 软件测试 自动化测试 接口测试 测试开发

🔥笔下生花,与时舒卷,InfoQ写作社区6月优质更文活动来啦!

InfoQ写作社区官方

热门活动 6 月 优质更文活动

Maven Could not find artifact com.ruoyi:ruoyi-framework:pom:3.8.5 in public

Andy

公司大规模裁员的时间轴

HoneyMoose

自动化回归测试平台 AREX 前端架构演变史 —— Tabs 动态组件设计

AREX 中文社区

Vue 前端 软件测试

轻量灵动: 革新轻量级服务开发 | 京东云技术团队

京东科技开发者

jdk8 GraalVM jdk17 企业号 6 月 PK 榜

SpringBoot升级所踩过的坑(一)

技术小生

6 月 优质更文活动

文盘Rust -- tokio绑定cpu实践 | 京东云技术团队

京东科技开发者

rust cpu tokio 企业号 6 月 PK 榜

二层交换机和三层交换机到底有啥区别?如何从二层切换到三层模式,结合思科、华为、瞻博三厂商!

wljslmz

6 月 优质更文活动

如何开发视频上传和播放功能时,既省钱又体验好?

北桥苏

php ffmpeg OSS HLS m3u8

从入门到精通,阿里内部手抄微服务架构笔记,看完感觉我又行了!

做梦都在改BUG

Java 架构 微服务 Spring Cloud spring cloud alibaba

云管理用哪家云管平台厂商好?从哪些方面来看?

行云管家

云计算 云资源 云管理 云成本

NFTScan | 05.29~06.04 NFT 市场热点汇总

NFT Research

阿里、字节大佬共创的Netty核心原理手册,必须是全网No.1

程序知音

Java Netty java架构 Java进阶 后端技术

大语言模型的创意能力到底几何?探索从GPT-2到GPT-4的演进

Baihai IDP

人工智能 自然语言处理 大模型 白海科技 企业号 6 月 PK 榜

记一次618军演压测TPS上不去排查及优化 | 京东云技术团队

京东科技开发者

JVM 压测 调优 压测分析 企业号 6 月 PK 榜

2023秋招Java 面试必刷的1200 道Java大厂面试真题(含答案解析)

采菊东篱下

java面试

  • 扫码添加小助手
    领取最新资料包
从新React文档看未来Web的开发趋势_大前端_InfoQ精选文章