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

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

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

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

以下是精彩内容整理:

React发展历程及其周边生态

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

年份 事件
2010 Facebook 开源了PHP 语言 的一种扩展叫—— XHP
2011 FaxJS ,它就是 React.js 早期的原型
2013 React正式宣布开源
2014 React Developer Tools
2015 Redux React Native单端->多端
2016 Mobx React Storybook
2017 React Fiber

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

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

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


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


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

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

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

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

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

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

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

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

Dawn库

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

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

用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上开源的一个明星项目,由众多语言分别进行实现

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

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

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

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

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

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

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

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

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

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

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

上一篇:AI时代的制造业数字化变革


下一篇:阿里设计师:“三种方式”教你做好体验设计