走进React——带你快速掌握组件化和搭建页面

• Z时代
• 2024-01-10
• 分类：综合

阿里前端工程师靖鑫为大家带来react入门的相关讲解，本文介绍了React的基础知识，包括React语法、API及其生态。讲解了React的发展历程及基本的开发准则，了解其常用API以及dawn工程化方案，介绍了如何对组件进行拆分，对数据的增删改查等等。方便我们更加迅速的学习React，快速掌握组件化和搭建页面。

数十款阿里云产品限时折扣中，赶紧点击这里，领劵开始云上实践吧！

直播视频精彩回顾
本文介绍了React的基础知识，包括React语法、API及其生态。讲解了React的发展历程及基本的开发准则，了解其常用API以及工程化方案，介绍了如何对组件进行拆分，对数据的增删改查等等。在开发个人项目和公司项目的时候，可以通过做一些工程化的方案，快速的构建应用，而不用过多的了解配置，从而可以让初学者学习React更加迅速，快速掌握组件化，快速搭建页面。

以下是精彩内容整理：

React发展历程及其周边生态

React的发展历史如下表所示：

不同于命令式编程的jQuery以及采用了数据双向绑定的Angular，React相对比较小巧，只专注与view层。React具有四个比较明显的特征：

• 高效：通过虚拟DOM和Diff算法，最大程度减少与DOM的交互和渲染。
• 组件化：页面开发拆分成一个个组件，提高可维护性和复用性
• 专注view：足够简单和清凉，不提供大而全的状态管理能力
• 单向数据流：自顶至下的数据流约定，降低了应用数据管理的复杂度
  。

从hello world示例程序中可以看出，该程序最终导出的是一个App类。这个类实际上继承了React框架的component类，并重写了render方法，返回了一段用jsx写的内容。jsx实际上是Facebook在设计React 的时候，采用的类似xml的语法，来完成组件的声明，并用Babel进行转义，得到JavaScript文件。通过jsx语法，可以帮助我们更加简便的去编写组件。

React是需要依赖周边的生态，来实现状态管理、UI组件库、路由、请求、工程化等，从而支持大型应用的开发。

React开发环境的最底层是node，node是前端如此丰富的基石。Webpack和Babel都是基于node实现的，其中Webpack负责打包，Babel负责转义。Babel主要是用于将开发阶段编写的ES6，jsx等语法编译成浏览器所识别的语言。Persets就是相当于套餐，它会将ES6的内容编译成ES5时依赖的内容打包。我们写的代码都是基于ES6，Webpack Loaders会在读取到它将要引用这个文件的时候，不会先引进文件，它会先基于这个Loaders进行转换，然后将转换后的文件，打包在一起。由于我们还需要less，jsx，css的能力，但是React并没有将这些依赖包打包在一起，而是拆成一个个的包，开发者可能需要自己处理这些依赖，缺少一个依赖的话，项目可能跑不起来。
想要搭建一个React环境的话，实际上并不简单，其解决办法就是通过命令行来打包安装。其命令如下：

Create-React-app开发React的时候，并不需要配置。当我们开发一个React项目的时候，会初始化一个my-app的文件夹，进入这个文件夹之后，执行npm start，就可以启动项目了。其中npx这个工具是包含在npm里面的。npm start之后，会监听3001端口。

React是单项数据流，数据是由父组件传递给子组件的。子组件是通过Props来获得父组件的数据。页面是由数据组成的，这些数据就叫做State，可以通过State来维护数据。单向数据流意味着，父组件给子组件的数据是只读的，即使做了修改，视图也不会发生改变。这是需要State是自己维护的，修改State之后，UI组件才会自行渲染。

Dawn库

Dawn为阿里巴巴内部的前端构建和工程化工具，目前已开源。

用Dawn来做工程化的基础，其特点就是：

• 采用中间件技术，封装常用功能，易于扩展，方便重用。
• 支持pipeline让多个task协同完成构建任务。
• 简单/一致的命令行接口，易于开发人员使用。
• 支持基于中心服务管理中间件和工程模板。
• 支持搭建私有中心服务，并同意下发构建规划，易于团队统一管理

使用方法：

1.安装

npm install dawn -g

2.创建并初始化

Dn init -t front

3.开发并实时编译

dn dev

4.语法检查和测试

Dn test

5.构建和打包

Dn build
项目完成后就可以发布到CDN和团队其他的一些平台上面。

实战-TodoMVC

TodoMVC是github上开源的一个明星项目，由众多语言分别进行实现

TodoMVC可以实现添加ToDo，删除Todo，双击编辑Todo内容，批量完成，批量清除和状态筛选。

编写View层，对组件进行合理地拆分

输入框称为TodoAdd。列表称之为TodoList。底下部分称之为TodoStatus。

其中列表有很多重复的行组成的，包括很多的TodoItem，有分成很多的TodoContent（内容），TodoEdit（编辑），TodoSelect（选择框）。TodoStatus包括TodoCount（还有多少元素剩下来）和TodoFilter（筛选组件）。我们是将应用分成了很多的组件。

逐个分析功能点，对业务进行建模

add：TodoList是一个数组，要增加一项内容，Push方法并不会修改原数组，因为当State对应的字段更新的时候，才会重新渲染。推荐使用concat方法，它可以给一个数组追加一个元素，其返回是一个新的内容。
delete：推荐用filter方法，filter会对每一个model进行遍历，如果id匹配成功，就返回false，这意味着，在返回的数组里剔除掉匹配的id。如果不匹配，会保留id，返回结果也是一个新的数组，从而实现渲染的目的。
Toggle：想要改变一个TodoModel的值，如果使用TodoModel的complete 等于它的返回值，实际上组件是不会生效的，必须要改变属性。使用map方法会返回全新的数据。
Clear：就是清除掉数据里面已完成的内容，只需要改变一下过滤的依据就可以了。依据就是id互相匹配，所以采用filter方法。

本文由云栖志愿小组王朝阳整理，百见编辑。

以上是 走进React——带你快速掌握组件化和搭建页面 的全部内容， 来源链接： utcz.com/z/383097.html