没有合适的资源?快使用搜索试试~ 我知道了~
React基础.
资源推荐
资源详情
资源评论
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/release/download_crawler_static/89445398/bg1.jpg)
第 1 章
React 入门
React 是由 Facebook 创建的一个开源项目。它提供了一种在 JavaScript 中构建用户
界面的全新方式。自从它公开发布后,这个库迅速风靡全球,并且围绕着它培育了一个
生机勃勃的社区。
通过阅读本书,你将掌握在项目中使用 React 所需的方方面面。因为 React 只关注
UI 界面的渲染,而不会对应用程序的其他模块所使用的技术做任何假设,所以本书同时
也将介绍能匹配 React 模式的路由(Routing)和应用程序架构。
在本章中,我们将从一个较高的层面讲述一些主题,以便你能尽快开始创建应用程
序。这些主题包括:
● React 的完整定义,以及优点概览
● 如何使用 JSX,这是一个在 React 中用来渲染 UI 的 JavaScript 语法扩展
● 如何创建包含属性和状态的 React 组件
1.1 开始学习之前
React 针对的是现代风格的 JavaScript 开发生态系统。为能亲自尝试本书中的代码示
例,你需要安装 Node.js 和 npm。此外,还需要熟悉函数式 JavaScript 语法风格和这门语
言最新的特性,如箭头函数(arrow functions)和类。
1.1.1 Node.js 和 npm
JavaScript 自诞生之日起就运行在浏览器上,但是通过 Node.js 的开源命令行工具,
可以使 JavaScript 运行在你的本地计算机和服务器上。与 npm(Node Package Manager)一
道,Node.js 已经成为一项在本地计算机上进行 JavaScript 应用程序开发的极有用工具,
它使得开发人员可以创建脚本来运行任务(例如,复制和移动文件,或是启动一个本地开
发服务器),以及自动下载应用程序所依赖的组件。
如果你尚未安装 Node.js,现在就下载它的 Windows、Mac 或者 Linux 版本,将其安
装到你的计算机上。下载地址为 https://nodejs.org/。
![](https://csdnimg.cn/release/download_crawler_static/89445398/bg2.jpg)
React 开发实战
2
1.1.2 JavaScript ES6
JavaScript 是一门自诞生起多年一直在不断进化的语言。最近,JavaScript 技术社区
已经认同了一组新的语言特性。有一些最新的浏览器已经能够支持这些特性,React 社区
也广泛地使用了这些新的特性(例如,箭头函数、类、展开操作符)。React 同时鼓励在
JavaScript 代码中使用函数式编程模式,所以你也需要熟悉在 JavaScript 中函数和上下文
是如何工作的,这样你才能了解 map、reduce 和 assign 等方法。如果你对这些细节感觉
有些模糊,可参阅 Apress 网站(www.apress.com/)和本书的 GitHub 页面(http://pro-react.
github.io/)上有关这些主题的在线附录说明。
1.2 定义 React
为清楚地说明 React 究竟为何物,我将对它做如下定义:
React 是一个使用 JavaScript 和 XML 技术(可选)构建可组合用户界面的引擎。
下面对 React 定义的每个部分再详加说明:
React 是一个引擎:React 的网站将它定义为一个库,但是我觉得使用“引擎”这个
词更能体现出 React 的核心优势:用来实现响应式 UI 渲染的方式。React 的方式是将状
态(在一个给定的时间点,所有用来定义应用程序的内部数据)从展现给用户的 UI 中分离
出来。在 React 中,你可以声明如何将应用程序的状态表现为 DOM 的虚拟元素,然后
自动更新 DOM 以反映出状态的变化。
“引擎”这个术语首先被 Justin Deal 用来描述 React,因为他觉得 React 渲染 UI 界
面的方式和游戏引擎渲染的工作方式十分相似(https://zapier.com/engineering/react-js-
tutorial-guide-gotchas/)。
创建可组合用户界面:减少创建和维护用户界面的复杂性一直是 React 的核心目标。
React 拥抱了这样一种理念:将 UI“打散”成易于重用、扩展和维护的组件与自包含的、
关注特定用途的构件(building blocks)。
使用 JavaScript 和 XML 技术(可选):React 是一个可用于浏览器、服务器和移动设
备之上的纯 JavaScript 库。如你将在本章中所见,React 有一种可选的语法来让你可以使
用 XML 来描述 UI。一开始你可能会对这种语法感到有些陌生,但使用 XML 对于描述
用户界面其实有诸多优点,包括:XML 是声明性的,很容易通过 XML 观察元素之间的
关系,也很容易使
UI 的整体结构可视化。
1.3 React 的优点
市面上有许多的 JavaScript MVC 框架。Facebook 有什么理由还要创建 React?你
有什么理由要使用 React?下面的三节内容将探索 React 的一些优点,从而回答这两个
问题。
![](https://csdnimg.cn/release/download_crawler_static/89445398/bg3.jpg)
第 1 章 ■ React 入门
3
1.3.1 简单易学的响应式渲染
在 Web 开发的早期,那时还根本没有单页应用程序这个概念,用户每次在页面上进
行一次交互(比如单击了一个按钮),就算新的页面只和原有页面仅有一点不同,服务器
都会将一整页新的页面发送回客户端浏览器。从用户的角度看,体验会非常糟糕,不过
程序员倒是很容易规划出用户在某一时刻能看到哪些内容。
单页应用程序持续地从服务器获取新数据,并在用户进行交互时变换 DOM 上面的
部分内容。在用户界面逐渐变得复杂时,应用程序也要实现越来越复杂的逻辑来检验应
用程序的当前状态,并对 DOM 及时进行所需的修改。
许多 JavaScript 框架(特别是那些在 React 出现之前的框架)都使用了数据绑定技术,
来处理这种日益增加的复杂性并保持用户界面和应用程序状态的同步,但是数据绑定在
可维护性、可扩展性和性能上,都有一些缺陷。
响应式渲染比传统的数据绑定技术要更容易使用一些。它让我们用一种声明方式,
来定义组件的外观和行为。当数据发生变化时,React 在概念上会重新渲染整个用户界面。
当然,每次在状态数据发生变化时就真的重新渲染整个用户界面,在性能上是不可
接受的,React 使用了一种存在于内存中的轻量级 DOM 表示法,这被称为“虚拟 DOM”。
处理这种内存中的虚拟 DOM 要比处理真正的 DOM 更快、更有效。当因为用户的
交互或者数据的获取而导致应用程序的状态发生改变时,React 快速地将 UI 的当前状态
与期望的状态进行比较,然后计算出要对真实 DOM 所需进行的最小更改。这种工作方
式使得 React 非常快、非常高效。即使在一个移动设备上,React 应用程序也能轻松地达
到 60fps 的刷新率。
1.3.2 使用纯 JavaScript 进行面向组件开发
在一个 React 应用程序中,一切都由组件组成,组件就是应用程序中的自包含的、
关注特定用途的基础构件。基于组件来开发应用程序使用了一种“分而治之”的途径,
来避免在某个地方有太高的复杂性。由于组件可以组合起来,每个组件都可以尽量保持
小巧,通过将更小的组件组合在一起,创建复杂的包含更多功能的组件就变得简单了。
不同于使用特定的模板语言或是传统 Web 应用程序 UI 中用到的 HTML 标记,React
组件由普通的 JavaScript 写就。使用普通 JavaScript 代码编写组件有一个很好的理由:模
板限定了你可用来构造 UI 界面时能使用到的功能特性。React 则是使用一门功能完整的
编程语言来渲染界面,这相对于使用模板具备很大的优势。
另外,通过使组件成为自包含的、并在相关视图逻辑中使用一个统一的标记,React
组件实现了关注点的分离。在Web开发的早期岁月,关注点的分离是通过在不同部分使
用不同的语言来强制实现的:内容结构使用HTML,样式使用CSS,逻辑行为使用
JavaScript。这种方法在问世之初工作得很好,因为那个时候Web页面还是静态呈现的。
但是现在用户界面变得更有交互性、更复杂,显示逻辑和HTML标记不可避免地被绑定
在一起;标记、样式和JavaScript之间的分离变成了仅是技术上的分离,而非关注点的分离。
![](https://csdnimg.cn/release/download_crawler_static/89445398/bg4.jpg)
React 开发实战
4
React 假设显示逻辑和 HTML 标记是高度粘合的;它们同时用来实现 UI 的展现,并
通过为每个关注点创建离散的、良好封装的、可重用的组件,来鼓励实现关注点的分离。
1.3.3 灵活的文档模型抽象表现
React 内置了自己的一个 UI 轻量级表现模型,以抽象出 UI 底层的文档模型。这种
方式最值得一提的优点,就是不论在 Web 页面,还是在原生的 iOS 和 Android 界面上,
它都可以使用同样的原则来渲染 HTML。这种抽象表现同时带来了下面这些特性:
● 事件在所有浏览器和设备上都会以一种统一、标准的方式,自动地使用代理,来
达到行为的一致性。
● 为实现 SEO(搜索引擎优化)和更好的性能,React 组件可在服务器上被渲染。
1.4 创建你的第一个 React 应用程序
现在你已经知道了组件是 React UI 的基础构件,但是组件到底看起来是什么样子
的?怎么样才能创建一个组件呢?简单来说,一个 React 组件就是一个带有 render 方法,
并且返回组件 UI 描述的 JavaScript 类,如下所示:
class Hello extends React.Component {
render() {
return (
<h1>Hello World</h1>
)
}
}
你也许已经注意到了JavaScript代码中间的HTML标记。之前曾经提到过,React有一
种称为JSX的JavaScript语法扩展,可以让我们在代码中直接书写XML(以生成HTML)。
是否使用 JSX 是可选的,但是它已经成为一种被广泛接受的在 React 组件中定义 UI
的标准方案,由于 JSX 使用了具有丰富表达能力的声明式语法,以及这些内容最终会被
转换成普通的 JavaScript 函数调用,所以这意味着 JSX 并没有影响 JavaScript 语言原本的
语义。
我们会在下一章更详尽地介绍 JSX,但是现在要提醒你注意的是,React 需要一个额
外的“转换”步骤(或者说是翻译步骤),将 JSX 转换成 JavaScript 代码。
在现代的 JavaScript 开发生态系统中,有许多工具可处理这种需要额外转换步骤的
情况。下面花一点时间来讨论如何为 React 项目搭建出一套流畅的开发流程。
1.4.1 React 开发流程
想当年,我们都是将所有 JavaScript 代码都写到一个文件里面,手工下载一两个
JavaScript 库,然后将自己的代码和第三方的库统统塞到一个页面上。当然,现在你仍然
![](https://csdnimg.cn/release/download_crawler_static/89445398/bg5.jpg)
第 1 章 ■ React 入门
5
可将 React 库的压缩 JavaScript 文件通过下载或复制粘贴的方法获得,然后立即用它来运
行组件,并在运行时转换 JSX。只不过现在除了小的演示和原型之外,没人会在真正的
项目里面这样做。
即使是创建一个最简单的应用程序,我们也希望可以通过开发流程满足如下需求:
● 编写 JSX 并随时将它转换成标准的 JavaScript 代码
● 使用模块化模式编写代码
● 管理依赖性
● 打包多个 JavaScript 文件并使用 source maps 进行调试
为满足上述需求,一个 React 项目的基础结构包含如下内容:
(1) 一个 source 文件夹,里面包含了你所编写的所有 JavaScript 模块。
(2) 一个 index.html 文件。在 React 应用程序中,这个 HTML 页面通常差不多是一
个空页面。它仅用来加载应用程序的 JavaScript,并提供一个 div 元素(或者其他任何元素)
来让 React 在该元素中渲染出应用程序的组件。
(3) 一个 package.json 文件。这个 package.json 是一个独立的 npm 清单文件,它包含
了有关项目的诸多信息,例如名称、描述、作者的信息等。它让开发人员在其中指定依
赖关系(通过指定依赖关系可以实现模块的自动下载和安装)并定义脚本任务。
(4) 一个模块打包或 build 工具,用来实现 JSX 转换和模块/依赖项打包。模块的应
用使得 JavaScript 代码被组织到了多个文件中,每个模块都声明了它自己的依赖项。模
块打包工具在编写完代码之后,就可以根据依赖关系,以正确顺序将所有代码文件打包
在一起。有许多工具都可以实现这样的功能,包括 Grunt、Gulp 和 Brunch
等。在任何上
述工具的文档中,你都能找到如何配合 React 使用的内容,不过通常来说,React 社区将
webpack 用作完成这项工作的首选工具。本质上,webpack 是一个模块打包工具,但它
也可将源代码通过加载器进行转换和编译。
图 1-1 展现了上面所提到的文件和文件夹结构。
图 1-1 最简单 React 项目的文件和文件夹结构
提示:
在本书的在线资料中,你可以找到一个关于如何使用 webpack 设置一个 React 项目
的完整附录说明。附录中涵盖了 webpack 的详细信息,并展现了如何设置高级选项,例
如,热重载(Hot Reloading)React 组件。在线附录位于 Apress 网站(www.apress.com)和本
书的 GitHub 页面(pro-react.github.io)上。
剩余22页未读,继续阅读
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
zhusl6688
- 粉丝: 1456
- 资源: 318
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)