文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏
参与翻译: ZenYu (15)

介绍

React是当前为HTML/CSS/JS应用构建UI组件最受欢迎的JavaScript库。它从众多框架和库中脱颖而出 ,能够以简单有效的方式构建复杂、可组合且能高效更新DOM的UI。Facebook公司希望为Facebook和Instagram网站打造更好的UI组件,React就此诞生。这篇文章是一系列博文的介绍,关于如何用React构建组件。文章将会探究创建React组件所需的条件,会提供核心功能的例子和解释,以及同其他JavaScript的UI解决方案的比较。此外,JSX与Babel组合会演示React的扩展语法, 以此简化构建HTML和React组件声明所需的代码。React也能够跨浏览器兼容,且能很好地运行在微软的Edgel浏览器上。

第 1 段(可获 1.89 积分)

Hello World

让我们在CodePen建立一个Hello World示例,开始React.js之旅。查看演示, 若想编辑代码,请点击左上角的图片链接(“Edit on CodePen”)。

React.js Hello World 示例

点击头部的“Settings”,然后点击“JavaScript”,你会发现为了建立这个CodePen示例引入了两个外部JavaScript文件: React 和 React-DOM,这两个文件都引自Facebook,地址分别如下:

React: https://fb.me/react-0.14.3.js

React-DOM: https://fb.me/react-dom-0.14.3.js

第一个JavaScript文件包含了React库,第二个React-DOM包含了在web浏览器端处理DOM的代码。

第 2 段(可获 1.56 积分)

截图来自 Visual Studio Code

创建React组件,需要使用React对象的createClass方法。createClass 方法需要传入一个对象,来配置传入的组件。 createClass是个辅助函数,通过它创建的组件会继承React.Component。如果你正在本机浏览器或通过Babel等转换器使用ES2015的话,就可以用新的class和extends关键字直接从React.Component继承。在CodePen使用Babel的方法是,点击 "Settings",然后点击"JavaScript",从 "JavaScript Preprocessor"的下拉列表中选择“Babel”。

第 3 段(可获 1.14 积分)

React.js Hello World ES2015 Demo

且不论创建组件类结构的方式,这两者结果是相同的。

render属性是组件唯一必备的属性,它实际上是一个用于渲染组件DOM的函数。render函数的实现引入了一个新的函数——createElement,这个函数由React对象提供,用于创建新的DOM元素。它需要传入三个参数。

第一个参数是HTML元素的名称或者要创建的React组件。HTML元素应该为仅包含元素名称的小写字母字符串,不要带有尖括号和属性。例如,能够接受的HTML元素参数包括“h1”,"p"等。除了HTML元素的名称,这个参数也可以是React组件对象。若传入的是React组件对象,则需要的是对象本身,而不是一个组件对象名称的字符串。

第 4 段(可获 1.96 积分)

第二个参数是个属性组成的对象。 对于HTML元素,这些属性对应HTML元素的属性。对于React组件,这些属性对应于渲染组件时用到的无状态数据(状态将会在文章后续讲到)。

最后,第三个参数代表这个被创建的元素的子元素。 在例子 "Hello World" 中,h1元素的子元素是文本内容“Hello World!”。除了文本内容,还可以是元素对象。

React.js Child Content Demo

第 5 段(可获 1.18 积分)

或者,也可以用数组传递多个子元素。

React.js Child Content List Demo

要在web页面上使用React组件,需要用到ReactDOM对象的render函数。这个函数接收一个元素对象和一个根元素,前者的DOM会添加到后者上。在示例中,createElement函数用于创建 HelloWorld组件的实例, 而document.querySelector用于选择 main元素,来添加实例化后渲染完成的HellowWorld组件。一旦添加完成后,组件就会出现在页面中了,这个React示例就此结束。

第 6 段(可获 1.25 积分)

JSX

React有许多超越其他UI解决方案的优点。它所有的API相对较小,学习曲线平缓。大概只需一小时左右,许多开发者就能上手运行代码,利用这个全新的JavaScript库开发可复用,可扩展且可维护的UI组件。 构建小型组件时,利用纯粹的JavaScript代码提供的接口足够了,但是用createElement函数开发大点儿的组件就会相当乏味了。

React的其中一个目标是避开模板驱动UI解决方案,例如: Angular.js或Handlebars。许多开发者认为模板驱动UI的方式并不是种合适的UI设计方式, 因为这种方式存在XSS漏洞,当数据改变的时候很难去更新它,而且很难扩展与重用。开发者对它的许多抱怨来自在模板中使用了逻辑。React提供了一种替代方式,用可重组的(后文会讨论这个话题),代码驱动的方式构建UI。函数createElement用于在代码中创建元素,包括元素属性的设置和内容的定义。然而,当代码本身不包含逻辑,而且HTML元素(包括属性)或React组件仅仅需要被简单地创建时,使用createElement就会很繁琐。 React针对这种情况的解决方案是用一种更为熟悉的声明语法,只要把声明内容包裹在JavaScript代码中。

第 7 段(可获 2.75 积分)

React通过JSX(JavaScript syntax extension),实现了易于编码和不在模板中引入逻辑的特性。

查看演示, 若想编辑代码,请点击左上角的图片链接(“Edit on CodePen”)。

React.js JSX Demo

JSX代码转译后是包含createElement函数调用的JavaScript代码 需要看转译后的JavaScript代码的话,就点击CodePen页面中JavaScript面板的右上角“View Compiled”。JSX语法更易于开发者使用,而且结果也同React希望实现的代码驱动的UI解决方案相同。

第 8 段(可获 1.29 积分)

Babel用于把JSX代码转译为JavaScript代码。 起初,Babel只是ES6的转译器。随着 ES6(ES2015)的完成, Babel已经拓展为一个服务平台, 用于创建JavaScript代码还包括插件,JSX的转译器就是其中之一。在CodePen中,每当其中代码执行时,Babel的JSX插件就会自动转译JSX代码。

React官方网站推荐使用JSX,而且许多开发者正在使用它。然而,JSX并非必须的,React.js运行时同样会忽视它的用法。本文接下去的示例主要会用到JSX(除非另有说明)。

第 9 段(可获 1.34 积分)

属性

React有两种数据:状态(state)和属性(property)。状态表示由用户或服务器更新的数据。尽管状态非常重要,但它应该仅在需要时用到,应着重使用属性,它可以用来传递数据(包括管理状态的组件中的状态数据),会被渲染到DOM中。 我会在以后的文章中讲下状态数据,属性是配置和管理组件数据的首选方法。同时,做个边注,React默认不支持数据的双向绑定。

第 10 段(可获 1.28 积分)

在文章的前面部分中,属性和createElement函数被放在一起讨论。在React组件中,传递给组件的属性可以通过组件的props属性访问。

查看props属性的示例,若想编辑代码,请点击左上角的图片链接(“Edit on CodePen”)。

React.js JSX Properties Demo

在上面的CodePen例子中,使用了JSX语法,属性有个静态值,它通过使用JSX语法的属性传入组件。另外,可以用模板变量的语法传入JavaScript变量值。

第 11 段(可获 1.33 积分)

React.js JSX Variable Property Demo

除了使用JSX语法,在非JSX方式中可以传入一个普通的JavaScript对象(@ZenYu注:React.render(React.createElement(ReactElement,PlainObject), targetElement)。

React.js JS Properties Demo

当组件的属性或状态改变的时候, React会执行一个叫做 Reconciliation(调节的过程来决定使用哪种DOM更新方式,去渲染更新后的属性和状态信息。React的这种机制非常复杂,甚至使用虚拟DOM比较更改前后的差别,来有选择地且快速地更新DOM,而不需要重新渲染所有DOM。 Reconciliation(调节会在以后的文章中讨论。

第 12 段(可获 1.23 积分)

可组合组件

React组件是可组合的,它们可以组合在一起构建更大更复杂的组件。考虑下HTML表格的例子。典型的表格具有表格头和表格体。标题行是静态的,然而表格行的数量是可变的,取决于给定时刻的数据。这样一个表格是可组合组件很好的例子。表格本身是个组件,它包含的每一行数据是不同的组件,如下面的演示所示。查看演示, 若想编辑代码,请点击左上角的图片链接(“Edit on CodePen”)。

React.js Composable Components Demo

其它JavaScript解决方案例如Angular.js和Handlebars使用模板逻辑而不是可组合的组件。

第 13 段(可获 1.68 积分)

结论

就如到目前为止演示的,React是构建UI的一种很好的解决方案。它很容易上手运行,还带来了简单、高效的JavaScript UI开发体验。最后说一下,Microsoft Azure是托管React应用很好的平台。要查看托管在Azure上的可组合组件的示例,只要打开Edge浏览器访问http://react-widgets.azurewebsites.net/。以后的文章中,会利用React和Flux架构的特性扩展这个应用。

第 14 段(可获 1.03 积分)

本文是web开发系列文章的一部分,来自微软技术布道者,是DevelopIntelligence上的JavaScript学习实践内容。它是个开源项目,可交互性上遵循最佳实践,包括在微软的Edge浏览器上。 DevelopIntelligence为技术团队和组织提供JavaScript 和 React培训。

我们鼓励你跨浏览器和设备测试,包括Win10系统默认的Edge浏览器。可以用dev.microsoftedge.com上的免费工具,包括Internet-scale data,一款强大的工具,知道什么属性是对于web应用是重要的,什么API是跨浏览器的。同时,还可以访问Edge的博客,获取微软开发者和专家发布的最新消息。

第 15 段(可获 1.31 积分)

文章评论