React.js 新手教程
正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的。比如,像我这样的人:因为迄今为止,我才探索了编程世界6个月。所以,这将是一篇新手村教程! 你只需要拥有对 HTML 和 CSS 的理解,以及基本的 JavaScript(JS)知识就能看懂本文。
注意:在接下来的例子中,我们将会利用 ES6 提供的新能力,来简化写 JS 代码的过程。然而,你也能完全使用 ES5 来写 React。
预计阅读时间9分钟
什么是 React ?
React 是一个 JS 库,由 Facebook 和 Instagram 创建(https://facebook.github.io/react/)。它通过将应用分为一些动态的、可复用的 组件,来使我们可以创建单页应用(Single Page Applications (SPA))。
一个 React 组件是一个继承了由 React 提供的 Component 的 JS 类。一个组件代表并定义了一块 HTML 代码,以及任何与这块代码相关的行为,比如点击事件。组件就像是乐高积木,可以用来组建成所需的复杂应用。完全由 JS 代码构成的组件,可以被隔离和复用。基本方法是 render(),它简单地返回一片HTML代码。
这种用来定义 React 组件的语法被称为 JSX。该语法由 React 的创建者们所开发,被用来简化 JS-HTML 代码的组件内交互。使用该语法写的代码在变成实际 JS 代码前必须被编译。
创建一个组件(component)
为了创建我们的组件并将它渲染为一页 HTML,我们首先在我们的 HTML 文件里需要定义一个有唯一 id 的 div。接着,我们将要在 JSX 文件里写代码,以连接 React 组件到使用其 id 的 div,如下面的例子所示。这样做将会指导浏览器在相关 DOM 标签所在的页面渲染组件。
See the Pen Start by Makhenzi (@makhenzi) on CodePen.
JSX 内的 HTML 标签属性和普通 HTML 内的是几乎一样的;唯一不同的是“class”,在 JSX 里面变成了“className”。类 HTML 语法使用圆括号闭合,而包含 JS 的块则使用尖括号闭合。正如你将看到的。render() 总 会返回一个 div,而在其中开发者可以自由引入他们认为合适的任意多的标签和元素。
例子:海盗的灭绝
如果我们选择使用 React 来创建这张图,我们可以对屏幕上各个日期进行可视化,并在那些日期被点击的时候,才显示对应的温度和海盗数量。
为此我们需要2个组件:第一个用来渲染日期,并将每个日期链接到给定的海盗数量和温度;第二个则需要用来接收日期上的点击事件对应的信息,如海盗的数量和当时的温度,接着基于这些数据渲染选择的元素。
前者相当于是“父亲”的角色,并包含多个后面的“子”组件的链接,而后者则紧密依赖于它们的“父亲”。
React 结构,被称为虚拟 DOM,可以使我们在组件的内容发生改变的时候,不需要刷新整个页面,而可以只更新对应组件。为此,组件需要一个内部方法,来保存变量 data 和 赋值给该元素的会被改变的 HTML 属性。这些属性会自行链接到那些我们在组件内定义的,会负责响应变化的方法。
状态(State)和属性(props)
在我们的例子里,那个独立的变量 data 是由日期组成的。这些会根据点击事件所集合的 DOM 内连锁反应进而根据对应海盗、温度信息而进行改变。所以我们将会根据每个 “DATA” 对象内的对应日期去保存信息。我们还将利用 React 在父组件内的 this.state={}
属性来以键值对拷贝形式保存变量数据的。
以这种形式组织程序使得我们可以利用 React 提供的方法,来以“状态(state)”的形式和数据交互,并对其进行任意更改。
考虑到我们想要使用 DATA 对象的 key 来渲染 HTML 内的日期,最好可以找到一种方法来在 key 上使用 JS 的 map()
方法(Array.prototype.map()),以便能直接显示返回到 render()
的 HTML。事实上确实有方法可以做到!我们只需要把 JS 代码包裹在双花括号里,并放置在想要代码输出显示的管理该组件的 DOM 块内,然后就好了。
在这个特殊例子中,我们将在组件内的方法里定义 map()
回调,其将在同一组件的render()
内返回一片 HTML 代码。
See the Pen State1 by Makhenzi (@makhenzi) on CodePen.
为了分配点击事件到每个日期,我们将会分配 onClick
属性给它们。
在该属性中,我们会调用组件的方法,该方法则会定义我们希望在 onClick 事件后触发的状态修改和其他变更。
在我们的例子里,我们定义该函数为 handleClick()
。在 handleClick() 中,我们会调用 React 方法 setState()
,其允许我们在在每个点击事件中去更改状态数据。我们只需要插入一个包含我们想要修改的状态 key 的对象,并在后者括号内分配给它们新的相关联值。
总的来说,每次一个日期被点击,被选中的div的onClick属性会调用 HandClick()
方法,该方法会调用 setState() 方法来修改组件的状态。
每次状态改变,一旦发生 React 就会自动检查组件的 render()
函数的返回,以寻找基于新状态需要更新的内容。一旦有那样的数据, React 就会自动触发一次新的 render()
来更新那些有变更的 HTML 片段。
(我很抱歉,在接着的例子里,我插入了三行利用了 Classnames 的代码,一个用来基于状态变更来做 CSS 管理的小工具,我这么做只是为了给预览一点颜色。我还会使用它在最终的例子里给预览填充一些海盗变量。你可以找到 GitHub 上 Classnames 仓库的链接,还有一个简要使用向导)
See the Pen State2 by Makhenzi (@makhenzi) on CodePen.
如此,我们的父组件状态已经被设定好根据选中数据去创建子组件(其将会描述海盗数量和对应温度)。
我们将会在 JSX 文件中创建子组件的实例,正如我们之前对父组件所做的。为了链接子组件到其父亲上,我们只需要在后者的 render()
函数使用同一种语法和一个 HTML 标签去定义关系。如果我们称它为 “Child” ,它将会在我们插入 <Child />
处所在的 HTML 块内出现。
我们的子组件还必须根据现在选中数据所关联的海盗和温度,传递数据到其父亲。为此,我们将利用赋给 Child 标签的属性,其名字可以随便取,其信息只对父组件可见。
如此一来,子组件将可以通过显式访问归属于其父组件的数据,即利用这些 “attribute-bridges”,或者 属性(props),来获取到它自己内部信息的访问权。
所以,每次父组件的状态发生改变,其子组件的属性内容就会自动进行更新。但是,正如子组件的render()
方法会显示属性内容,它也会基于单向的数据线性流,根据任何收到的新信息去进行更新。
搞定了!组件们会互相交互,并根据我们的点击在 DOM 里渲染不同数据,而不需要单页去进行刷新。以这个为基础,交互的复杂性和组件的数量可以按需增加,使我们能创建复杂高效的应用。
如果你被这个库的潜力启发了,不妨看看 react.js example 网站,在那里你会找到很多有趣的点子来帮助你开始。(:
React.js 新手教程的更多相关文章
- 【JS新手教程】LODOP打印复选框选中的任务或页数
之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...
- 【JS新手教程】弹出两层div,及在LODOP内嵌上层
前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...
- 前端框架React Js入门教程【精】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- 【JS新手教程】JS获取当前星期几的几种方法
该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- 【JS新手教程】浏览器弹出div层1
JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...
- 【JS新手教程】JS中的split()方法,拆分字符串
该方法具体如代码和图中的注释,直接在语句后面加注释了.格式:要拆分的字符串.split(拆分依据的字符)例如该文中的例子,拆分人名,电话,地址.该文中用了个文本框,文本框中需要输入的格式是:人名,电话 ...
- 【JS新手教程】LODOP打印复选框选中的内容
在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印.给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的valu ...
- 【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
随机推荐
- 《机器学习实战(基于scikit-learn和TensorFlow)》中英文资源+源码 下载
https://pan.baidu.com/s/1iTIoa4RXdK-lo_QEgLEOFw 提取码:76hf
- Android 开发工具推荐
简评: 自己过去在 Android 开发中发现的好工具,在这里分享给大家.: ) Library methods count 每一个 Android App 的开发中都会用到很多的库,这个工具能够让你 ...
- vue 项目记录.路飞学城(一)
前情提要: 通过vue 搭建路飞学城记录 一:项目分析 二:项目搭建 1:创建项目 vue init webpack luffy 2:初始化项目 清除默认的HelloWorld.vue组件和APP. ...
- Spring Boot 1.5.10 发布:修复重要安全漏洞!!!
2018/01/31,Spring Boot团队发布了Spring Boot 1.5.10. Maven: <parent> <groupId>org.springframew ...
- sql 指定时间 所在的周、月、季、年
DECLARE @TodayDateTime DATETIMEDECLARE @strToday NVARCHAR(19) DECLARE @TodayBeginDateTime DATETIMEDE ...
- 写好Java代码的30条经验总结
成为一个优秀的Java程序员,有着良好的代码编写习惯是必不可少的.下面就让我们来看看代码编写的30条建议吧. (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中 ...
- [Golang] GoConvey测试框架使用指南
GoConvey 是一款针对Golang的测试框架,可以管理和运行测试用例,同时提供了丰富的断言函数,并支持很多 Web 界面特性. GoConvey 网站 : http://smartystreet ...
- 实现text-detection-ctpn一路的坎坎坷坷
小编在学习文字检测,因为作者提供的caffe实现没有训练代码(不过训练代码可以参考faster-rcnn的训练代码),所以我打算先使用tensorflow实现,主要是复现前辈的代码,主要是对文字检测模 ...
- SSM框架、Druid连接池实现多数据源配置(已上线使用)
总体大概流程: 1.配置数据源.账密(账密一致,文章不多阐述) driverClassName = com.mysql.jdbc.Driver validationQuery = SELECT 1 ...
- U3D GameObject 解读
GameObject本身没有功能,是Unity场景里所有组件的基类,但很多时候我们需要在脚本中操作GameObject.先讲一下GameObject类包含哪些内容,其中常用的用红色标出了 Variab ...