正如你能从标题猜到的,这篇文章的目标是给那些有很少编程经验的读者的。比如,像我这样的人:因为迄今为止,我才探索了编程世界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 新手教程的更多相关文章

  1. 【JS新手教程】LODOP打印复选框选中的任务或页数

    之前的博文:[JS新手教程]LODOP打印复选框选中的内容关于任务:Lodop打印语句最基本结构介绍(什么是一个任务)关于本文用到的JS的eval方法:JS-JAVASCRIPT的eval()方法该文 ...

  2. 【JS新手教程】弹出两层div,及在LODOP内嵌上层

    前面的博文有个简单的弹出div层[JS新手教程]浏览器弹出div层1,有一层,不过为了提示,一般会不让用户可以点击该提示之外的地方的.如果让用户弹出层后,把其他的按钮和链接都设置不可用应该比较麻烦,如 ...

  3. 前端框架React Js入门教程【精】

    现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...

  4. 【JS新手教程】JS获取当前星期几的几种方法

    该文通过获取星期几的几种方法,介绍JS里的数组,判断,和字符串截取,可以当作新手教程看,小白也看的懂.获取星期几,可通过Date()对象的getDay()获取,获取的是一个数字,对应的是0,1,2,3 ...

  5. Node.js新手教程——怎样实现文件上传功能

    作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...

  6. 【JS新手教程】浏览器弹出div层1

    JS中,可以弹出一个层来进行提示等作用,方法是利用css样式display样式,当display等于none时,该元素就不会在页面显示出来,而且元素也不会占空间.就是用户触发某些事件时,动态修改该样式 ...

  7. 【JS新手教程】JS中的split()方法,拆分字符串

    该方法具体如代码和图中的注释,直接在语句后面加注释了.格式:要拆分的字符串.split(拆分依据的字符)例如该文中的例子,拆分人名,电话,地址.该文中用了个文本框,文本框中需要输入的格式是:人名,电话 ...

  8. 【JS新手教程】LODOP打印复选框选中的内容

    在html中,复选框是常见的使用之一,本文介绍如何获取选中的复选框的值,并用LODOP打印.给需要为一组的复选框,复选框的checkbox设置相同的name属性,设置不同的id,然后设置需要的valu ...

  9. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

随机推荐

  1. OpenStack-Ocata版+CentOS7.6 云平台环境搭建 — 3.安装配置OpenStack认证服务(keystone)

    节点配置信息说明: 控制节点:controller: IP:192.168.164.128 hostname&hosts:likeadmin 计算加点:Nova: IP:192.168.164 ...

  2. 花了一晚上时间,终于把Python的基本用法归纳好了!

    一.内置函数 1. complex([real[,imag]]) 返回一个复数,实部 + 虚部*1j,或者把字符串或者数字转成复数形式. 参数可以是复数表达式,也可以是字符串.当参数是字符串的时候,数 ...

  3. Origin的使用问题集锦

    在空间上看见同学转的一篇关于学术研究的文章,由于不常常上空间,更别说在上面看一些好的文章,所以特意将那篇文章整理到自己的博客中,方便以后做科研的时候能够用到,原文出处:http://user.qzon ...

  4. 关于c++11中的thread库

    c++11中新支持了thread这个库,常见的创建线程.join.detach都能支持. join是在main函数中等待线程执行完才继续执行main函数,detach则是把该线程分离出来,不管这个线程 ...

  5. Hybrid App 原理解析

    目录 一.现有混合方案 二.Hybrid技术原理 三.Native 通知 H5 (Native 调用 JS) 3.1 Android 调 H5 3.2 iOS 调 H5 四.H5 通知 Native( ...

  6. 关于小窗滑动,父级body也跟随滑动的解决方案(2)

    当第一次写这个问题的时候,并不知道竟然还会写2,而且(1)也并没有解决问题. 也发现,这个问题,真实也困住了很多人,找到了张鑫旭(http://www.zhangxinxu.com/wordpress ...

  7. java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for com.bjsxt.mapper.PeopleMapper

    报错信息: Type Exception Report Description The server encountered an unexpected condition that prevente ...

  8. RocketMQ 集群监控以及Hello World

    RocketMQ 目前有两个版本  alibaba版本和apache版本 一.alibaba版本 tomcat部署: apache-tomcat-7.0.90.tar.gz jdk7 虚拟机redha ...

  9. mysql 开发进阶篇系列 40 mysql日志之二进制日志下以及查询日志

    一.binlog 二进制其它选项 在二进制日志记录了数据的变化过程,对于数据的完整性和安全性起着非常重要作用.在mysql中还提供了一些其它参数选项,来进行更小粒度的管理. 1.1 binlog-do ...

  10. Kotlin 最佳实践

    为什么写此文 Kotlin很烦,Gralde很烦,还都是升级狂,加一块更烦.几个月不接触Kotlin,再次上手时便一片迷茫.所以记录此文,以便再次上手时查阅. 使用Gradle创建Kotlin项目 m ...