React框架简介

React是一套用于构建用户界面的JavaScript框架,它也是现今最流行的前端框架之一。React来自Facebook公司,最初用于开发Instagram,后被Facebook开源。React的同类产品有Angular,Vue等,这两个框架在其他章节中已经介绍过了。本系列笔记将详细介绍最新版本的React用法及其周边生态。

项目主页:https://react.dev/

注:React新版本相对于旧版本在组件定义、API等方面均有较大变动,本系列笔记以当前最新的React18版本进行介绍,并删除了过时的内容。

和同类框架比较

个人认为React框架最大的优点是学习起来比较简单,基本只要熟悉JavaScript(指ES6新标准)就可以上手了,像JSX等基本没什么学习曲线,Redux则需要稍微花点时间理解,但它有一定的适用场景,对大对数项目来说可能并不是必须的。React的缺点是写起来比较复杂,这是因为JavaScript是一种多范式混杂的语言,各种库的写法可能让代码绕来绕去,尤其是多人合作时,一旦开发人员水平参差不齐或者风格互不相同,就可能造成一场灾难(代码失控)。

至于Vue,如果很熟悉它,那么写起来是非常简单快速的,但这个熟悉需要较多的学习成本和开发经验。Vue封装的比较深,表面上一些写法虽然简单易用,但乍一看有些不明所以。一旦遇到问题,猜也猜不出,文档又语焉不详,那就是所谓的“掉坑里了”。

总而言之,我认为React比较适合大家前端水平都不错的团队,也适合后端人员临时凑两个人写前端的情况。

使用CRA创建React工程

手动搭建一个React工程涉及众多组件的选取和配置,这通常要参考大量细枝末节的技术文档,是一件很复杂的工作。在学习阶段创建React工程最简单的方式是使用CRA(Create React App)脚手架,它能够快速搭建基于WebPack构建的React工程。

CRA项目主页:https://create-react-app.dev/

我们可以执行以下命令,使用CRA脚手架一键创建React工程:

npx create-react-app demo-react

默认创建的工程代码结构如下。

demo-react
  |_README.md
  |_node_modules
  |_package.json
  |_public
    |_index.html
    |_favicon.ico
  |_src
    |_App.css
    |_App.js
    |_App.test.js
    |_index.css
    |_index.js
    |_logo.svg

其中public/index.html是浏览器打开的入口HTML文件,src/index.js是WebPack打包的入口源代码文件,这两个文件的文件名是固定的不可以更改,其它源码文件和资源文件都是被这两个入口文件间接引用的。工程中我们可以看到没有WebPack配置文件,这是因为CRA是个封装层次很深的框架,它默认隐藏了很多复杂配置,我们可以通过环境变量或是添加一个.env文件改变默认配置,这些高级用法具体可以参考CRA文档。

CRA底层使用WebPack进行打包,在命令行中运行npm start即可启动devServer,供我们在开发阶段进行预览和调试。

在学习阶段,我们可以使用CRA搭建一个这样的工程,并尝试修改工程中的代码来查看对应效果。不过在实际项目开发中CRA使用不多,这主要是因为CRA封装较深,很多配置默认没有暴露,实际项目中情况可能非常复杂,CRA脚手架使用起来不太灵活。实际开发中,我们一般都是手动搭建工程,或是使用UmiJS等功能比较全面的脚手架工具。有关如何手动搭建React工程我们将在后文进行介绍。

React相关框架

实际上除了使用CRA脚手架和我们纯手动搭建React工程,还有几种比较流行的使用React的方式。

UmiJS:UmiJS是国内阿里开源的一款基于React的前端框架,它是一个“全家桶”式的企业级框架,集成了我们实际后台项目开发中可能用到的方方面面的组件,比如组件库、预处理样式、路由、数据流、WebPack、SSR等,并提供了统一的接口给我们使用,简化了大型前端工程的搭建,主要应用于后台管理系统。

NextJS:NextJS是Vercel开源的一个全栈框架,它基于React构建界面并集成了许多组件的最佳实践,以SSR(服务端渲染)、SSG(静态页面生成)应用为主,主要用于对外的门户网站前台。

有关这些框架将在其他章节介绍。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap