文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

都 2024 年了,该如何搭建新的 React 项目?

2024-11-30 01:05

关注

Create React App 有什么问题?

Create React App(CRA)于 2016 年 7 月首次发布,是一个方便快捷的 React 项目搭建工具。尽管在 React 社区中广受欢迎,但也有一些限制和缺点需要考虑。

Create React App 的最新版本是 2022 年 4 月 12 日的 v5.0.1,但在 2023 年 3 月 16 日,React 团队在文档网站上正式宣布停止将不再积极维护 Create React App。

Vite

Vite 无疑是 create-react-app(CRA)的绝佳替代品。与 CRA(使用 Webpack)相比,Vite 因其底层使用 esbuild 而具有显著的性能优势。

Vite 更倾向于创建采用客户端渲染的单页应用(SPA),而不是服务端渲染(SSR)。不过,随着服务端渲染(SSR)日益受到重视,Vite 也提供了这一功能作为可选特性。

从 create-react-app(CRA)迁移到Vite非常简单。通过 Vite 的 vite.config.js 文件,以及特定功能的文件(例如tsconfig),只需进行少量配置即可启用 TypeScript、SVG 和 SSR 等选择性功能。

Vite 与 React 的结合,让开发人员能够在无固定框架限制的情况下,自由地使用 React。开发者可以根据项目需求选择适合自己的 React 辅助库,如路由、数据获取、状态管理及测试工具。与其他 React 框架不同,Vite 不会在项目层面强制使用任何特定的 React 功能、库或配置,从而赋予了开发者更多的灵活性和自主权。

最后,但同样重要的是,Vite 使得初学者能够更专注于学习 React 的基础,而不会被框架的复杂性所干扰。相比之下,在某些框架中学习 React 时,React 可能会被置于次要地位,学习者需要遵循框架的特定规则和观点(例如基于文件的路由)。这种框架导向的方法可能会使 React 的核心概念变得模糊,而 Vite 提供的无框架环境则让学习者能够更深入地理解 React 的本质。

React + Vite 的优势:

React + Vite 的缺点:

  1. 优先考虑SPA:Vite 主要针对单页面应用/客户端渲染进行优化,这可能不适合所有类型的项目需求。
  2. 缺乏框架支持:与某些框架结合使用时,Vite可能不会提供与特定框架完全集成的所有优势和特性。
  3. 对集成框架特性的限制:由于 Vite 的设计理念,它可能无法充分利用某些与集成框架相关的特性,如 React Server Components (RSC)。

Next.js

作为成熟度很高的 React 框架,Next.js 无疑是 React 开发人员的首选。当开发者希望在一个具有明确观点的框架环境中使用 React 时,Next.js凭借其内置的众多功能,能够提供卓越的支持。然而,如果你对Next.js并不满意,不妨考虑一下Remix。Remix同样为React开发提供了强大的支持,并且在某些方面可能更适合你的项目需求。

Next.js 将服务端渲染(SSR)作为其主要的渲染技术,但同时也支持静态站点生成(SSG)和客户端渲染(CSR,类似于使用 Vite 的 React 项目)。此外,Next.js 还支持一些更先进的渲染技术,如增量静态再生(ISR)和React服务器组件(RSC)。

Next.js 还允许在单个应用中混合使用不同的渲染技术。例如,可以选择使用 SSG 为营销页面提供静态内容,同时在用户完成注册和登录后,使用 SSR 技术渲染实际的应用界面。

然而,这种强大的功能也带来了一定的挑战和成本。不同的渲染技术可能会增加工程的复杂性和负担。此外,随着框架不断发展,开发人员就需要不断更新自己的技能和理解,以跟上技术发展的步伐。

总而言之,Next.js凭借其丰富的内置功能(如基于文件的路由)为React开发提供了强大的支持。然而,与此同时,这些功能也伴随着一定的责任和复杂性。尽管React本身(如与Vite结合使用)相对稳定,但在Next.js生态系统中,你将不断看到技术的前沿进展和创新。Next.js 致力于将 React 引入服务端,推动 React 技术的发展并引领行业趋势。

Next.js 的优势:

Next.js 的缺点:

Remix

Remix 是一个全栈框架,重新定义了 UI,并极大地提升了网络性能、速度和用户体验。通过集成诸如 esbuild、React Router、服务器端渲染、生产服务器和后端优化等前沿工具和技术,Remix 满足了各种 Web 开发需求。

Remix 的优势体现在以下几个方面:

React 团队认为 Remix 是一个具有嵌套路由功能的领先全栈 React 框架,能够轻松打造出具有出色用户体验和卓越性能的动态网站。

Astro

Astro 允许开发人员创建以内容为重点的网站。由于其岛屿架构和选择性水合作用,它默认情况下使每个网站都具有快速性能。因此,对于需要SEO的网站来说,使用 Astro 是非常有益的。

从实现角度看,Astro 更加倾向于多页面应用(MPA)的概念,而不是单页面应用(SPA)。这一选择闭合了应用类型的历史循环,从多页面应用的主导地位(2010年以前),到单页面应用的崛起(2010年至2020年),再到现在的回归多页面应用。这一转变首次将多页面应用作为一个明确的术语。

Astro 是一个与框架无关的解决方案。这意味着既可以使用Astro自带的组件语法,也可以选择与熟悉的框架(如React)进行集成。尽管如此,Astro 仅用于服务器端渲染,并不会暴露给客户端。只有当你决定将交互式岛屿模块水合到客户端时,才会将所有必要的JavaScript代码传输到浏览器中。

Gatsby

Gatsby 是一个基于 React 的开源框架,具备卓越的性能、可扩展性和安全性。其最大的亮点在于与知名部署平台 Netlify 的无缝集成,这使得开发人员在整个项目周期内都能高效地工作。Gatsby 与 Netlify 的结合带来了惊人的构建和部署速度,比传统方法快达 1000 倍。

Gatsby 的另一大特点是其丰富的插件生态系统。通过这些插件,开发人员可以轻松集成各种内容源、API 和服务,实现单个网站的多元化内容展示。借助 Gatsby 的 GraphQL 数据层,数据管理变得集中且高效。此外,Gatsby 还支持服务端渲染,即预渲染页面时使用用户访问时获取的数据。

React 团队对 Gatsby 给予了高度评价,认为它是静态内容导向型网站的绝佳选择。这一认可进一步突显了 Gatsby 在提供动态和吸引人的静态内容方面的优势。通过使用 Gatsby,开发人员能够快速构建高性能的网站,实现服务的无缝集成、高效的数据管理以及更快的开发与部署流程。

其他

当然,除了上面说的方式,还有很多创建 React 项目的方式:

小结

要搭建一个 React 项目,首先需要确定项目需求和目标。根据不同的需求,可以选择适合的框架和解决方案。以下是一些建议:

来源:前端充电宝内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯