开始使用 React
0/5 (0投票)
本文将作为一系列关于如何使用 React 构建组件的博客文章的介绍。
引言
React 正在迅速成为构建 HTML/CSS/JS 应用程序用户界面 (UI) 组件最流行的 JavaScript 库。在众多框架和库中，它以一种简单高效的方式脱颖而出，能够构建复杂、可组合且能高效更新 DOM 的 UI。React 是 源于 Facebook 对为其 Web 应用程序（Facebook 和 Instagram）提供更好的 UI 组件的需求。本文将作为一系列关于如何使用 React 构建组件的博客文章的介绍。文章将探讨创建 React 组件所需的资产、核心功能的一些示例和解释，以及与其他 JavaScript UI 解决方案的比较。此外，JSX 结合 Babel 将演示 React 的扩展语法 JSX，从而简化声明式构建 HTML 和 React 组件所需的代码。React 还支持跨浏览器兼容，并且在 Microsoft Edge 中运行良好。
Hello World
要开始使用 React.js，让我们通过 CodePen 设置一个 "Hello World" 演示。要查看演示并编辑代码，请点击左上角的图形链接“在 CodePen 上编辑”。
要设置此 CodePen，请点击标题栏中的“设置”，然后点击“JavaScript”，您将看到两个已包含的外部 JavaScript 文件：React 和 React-DOM。这两个文件都来自 Facebook，它们的 URL 是：
React： https://fb.me/react-0.14.3.js
React-DOM： https://fb.me/react-dom-0.14.3.js
第一个 React JavaScript 文件包含 React 库，而第二个库 React-DOM 包含用于将 React 与 Web 浏览器 DOM 一起使用的代码。
要创建 React 组件，请使用 React 对象的 createClass 函数。createClass 函数需要一个配置组件的对象作为参数。createClass 函数是一个创建继承自 React.Component 的新组件的辅助函数。如果您直接在浏览器中使用 ES2015，或者通过像 Babel 这样的转译器使用，那么可以使用新的 class 和 extends 关键字直接继承自 React.Component。要在 CodePen 中使用 Babel，请点击“设置”，然后点击“JavaScript”，并在“JavaScript 预处理器”下拉列表中选择它。
React.js Hello World ES2015 演示
无论采用哪种方法来创建组件的类结构，结果都是相同的。
组件唯一必需的属性是 render 属性，它指向一个用于实际渲染组件 DOM 的函数对象。render 函数的实现引入了一个新的函数 createElement，该函数由 React 对象提供。createElement 函数用于使用 React 创建新的 DOM 元素。该函数最多接受三个参数。
第一个参数是要创建的 HTML 元素或 React 组件的名称。HTML 元素应为小写字符串，仅包含元素的名称，不含尖括号和任何属性。可接受的 HTML 元素参数示例如“h1”、“p”等。除了 HTML 元素名称外，还可以传递 React 组件对象。对于 React 组件，传递的是对象本身，而不是对象的字符串名称。
第二个参数是要传递的属性对象。对于 HTML 元素，这些属性对应于 HTML 元素的属性。对于 React 组件，这些属性对应于用于渲染组件的无状态（状态将在未来的博客文章中介绍）数据。
最后，第三个参数代表正在创建的元素的子元素。在“Hello World”示例中，h1 元素的内容是“Hello World！”。除了文本内容，还可以传递元素对象。
或者，也可以使用数组来传递多个子元素。
要在一个网页中使用 React 组件，可以使用 ReactDOM 对象的 render 函数。它需要一个元素对象和一个根元素，DOM 将被附加到该根元素上。在代码演示中，使用 createElement 函数创建一个 HelloWorld 组件的实例，同时使用 document.querySelector 选择 main 元素，然后将实例化并渲染的 HelloWorld 组件附加到该元素上。附加完成后，组件就会显示在网页上，React 演示就完成了。
JSX
与其他的 UI 解决方案相比，React 具有许多优点。其整体 API 相对较小，并且学习曲线很短。大约一个小时左右，许多开发人员就能上手使用这个新库来构建可重用、可扩展且可维护的 UI 组件。对于构建小型组件，纯 JavaScript 代码 API 非常好，但对于大型组件，使用 createElement 函数会很快变得繁琐。
React 的目标之一是避免使用 模板驱动的 UI 解决方案，例如 Angular.js 或 Handlebars。许多开发人员认为此类模板驱动的 UI 方法与良好的 UI 设计背道而驰，因为它们可能存在 XSS 漏洞，在数据发生变化时难以更新，并且难以扩展/重用。许多抱怨集中在模板本身使用逻辑。React 提供了一种替代方案，即采用可组合的（稍后讨论）、代码驱动的方法来构建 UI。createElement 函数用于在代码中创建新元素，包括设置元素属性和定义子内容。尽管如此，使用起来仍然很繁琐，尤其是在没有逻辑本身的情况下，并且有些 HTML 元素（包括属性）或 React 组件只需要轻松创建。React 的解决方案是为这些内容使用更熟悉的声明式语法，同时将该声明式内容包装在 JavaScript 中。
通过一种称为 JSX（JavaScript 语法扩展）的技术，实现了编码便捷性和不在模板中引入逻辑之间的折衷。
要查看演示并编辑代码，请点击左上角的图形链接“在 CodePen 上编辑”。
JSX 转译的结果是带有 createElement 调用的 JavaScript。要查看生成的 JavaScript，请点击 CodePen 中 JavaScript 框架右上角的“查看编译后的代码”链接。JSX 语法对开发人员来说更简单，而结果与 React 最初想要实现的“代码驱动 UI”解决方案相同。
Babel 用于将 JSX 转译为 JavaScript。最初，Babel 仅仅是一个 ES6 JavaScript 转译器。随着 ES6 (ES2015) 的完成，Babel 已扩展为一个用于创建 JavaScript 代码的平台，包括 JSX 等插件。在 CodePen 中，Babel 结合 JSX 插件会在每次执行 CodePen 时自动转译 JSX 代码。
React 网站推荐使用 JSX，并且许多开发人员也这样做。尽管如此，使用 JSX 并非强制要求，React.js 应用程序在使用 JSX 与否的情况下都可以正常运行。本文剩余的代码演示将包含 JSX（除非另有说明）。
属性
React 组件有两种数据：状态 (state) 和属性 (properties)。状态数据表示将由用户或服务器更新的数据。虽然状态很重要，但应将其限制在尽可能少的范围内，重点放在属性上，这些属性可以传递数据（包括来自管理状态的组件的状态数据）以在 DOM 中进行渲染。未来的文章将介绍状态数据，因为属性是配置和管理组件数据的首选方式。另外，目前作为题外话，React 默认不支持双向数据绑定。
在本文前面，我们在 createElement 函数的上下文中讨论了属性。在 React 组件中，传递给组件的属性可以通过组件的 props 属性进行访问。
要查看 props 属性的演示并编辑代码，请点击左上角的图形链接“在 CodePen 上编辑”。
在上面的 JSX CodePen 示例中，属性具有静态值，并通过 JSX 语法中的属性进行传递。除了传递静态值之外，还可以使用花括号模板变量语法传递 JavaScript 变量的值。
除了使用 JSX 语法，还可以使用纯 JavaScript 对象配合非 JSX 版本。
当组件属性（或状态）发生变化时，React 会执行一个称为协调 (Reconciliation) 的过程，以确定需要进行哪些 DOM 更新来渲染更新的属性和状态信息。React 的机制非常精巧，甚至涉及使用虚拟 DOM 来比较变化，从而对 DOM 进行选择性和快速的更新，而无需重新渲染所有内容。协调将在未来的文章中进行详细讨论。
可组合组件
React 组件被设计为可组合的，它们可以组合在一起构建更大、更复杂的组件。考虑一个 HTML 表格的例子。通常，表格包含表头和表体部分。表头行是静态的，而表体行数量不定，取决于任何给定时间的可用数据。这样的表格是一个可组合组件的完美示例。表格本身可以是一个组件，每行数据都是一个不同的组件，如下面的演示所示。要查看演示并编辑代码，请点击左上角的图形链接“在 CodePen 上编辑”。
其他的 JavaScript 解决方案，如 Angular.js 和 Handlebars，使用模板逻辑而不是可组合组件。
结论
正如到目前为止所演示的，React 是构建 UI 的绝佳解决方案。它易于上手，为 JavaScript UI 开发带来了简洁性和效率。最后，托管 React 应用程序的一个好地方是 Microsoft Azure。要查看上面在 Azure 上托管的可组合组件演示示例，请打开 Microsoft Edge 并访问 http://react-widgets.azurewebsites.net/。在未来的文章中，这个应用程序将得到扩展，以利用 React 和 Flux 架构的额外功能。
本文是 Microsoft 技术传教士和 DevelopIntelligence 的 Web 开发系列文章的一部分，内容涉及实际的 JavaScript 学习、开源项目以及互操作性最佳实践，包括 Microsoft Edge 浏览器。 DevelopIntelligence 提供讲师指导的 JavaScript 培训和 React 培训，面向技术团队和组织。
我们鼓励您在包括 Microsoft Edge（Windows 10 的默认浏览器）在内的各种浏览器和设备上进行测试，可以使用 dev.microsoftedge.com 上的免费工具，包括 互联网规模数据（一个强大的工具，用于了解哪些属性对真实 Web 很重要，以及哪些 API 在浏览器之间具有互操作性）。此外，请访问 Edge 博客，以随时了解 Microsoft 开发人员和专家的最新信息。