细说React(一)
React 是近期非常热门的一个前端开发框架。 这篇文章将介绍如何使用 React 来创建用户界面，希望能够起到抛砖引玉的效果。
"React, A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES"
正如官网的介绍，一个框架，Just the UI。React的API相对于庞大Angular来说比较简单，但是精简的 API 不是意味着没有一定的学习成本，我们还是需要对此框架进行一定的理解。 闲话不多说，让我们进入正题。首先，让我们来了解下 React 中使用到的一些术语。
React 术语
React Elements
代表 HTML 元素的 JavaScript 对象。 这些 JavaScript 对象最后被编译成对应的 HTML 元素。
Components
封装 React Elements， 包含一个或者多个 React Elements。 Components 用于创建可以复用的 UI 模块，例如 分页，侧栏导航等。
JSX
JSX 是 React 定义的一种 JavaScript 语法扩展，类似于 XML 。 JSX 是可选的， 我们完全可以使用 JavaScript 来编写 React 应用， 不过 JSX 提供了一套更为简便的方式来写 React 应用。
Virtual DOM
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象。 React 使用 Virtual DOM 来渲染 UI， 同时监听 Virtual DOM 上数据的变化并自动迁移这些变化到 UI 上。
DOM Diff
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。
DEMO 环境准备
首先，在 React Download 页面 下载 Starter Kit，解压到某个地方。
进入到解压后的 build 目录，新建一个 index.html 文件，并且引用 react.js , react-dom.js(0.14版本之前react和react-dom没有分家，0.14之后将两者分开，react－dom只提供了一个渲染的方法)和 JSXTransformer.js(官方现不建议使用JSXTransformer.js，建议使用babel，配合ES6,写起来非常爽) 后就可以开始编写 React 应用了。需要注意如果使用 JSX， 那么 script 标签的 type 应该更改为 text/jsx。
<html>
<head>
<meta charset="utf-8" >
<title>demo</title>
</head>
<body>
<script src="react.js"></script>
<script src="react-dom.js"></script>
<script src="JSXTransformer.js"></script>
<script type="text/jsx" src="app.js"></script>
</body>
</html>
第一个 React Element
创建一个 Element 只需调用 React.createElement 方法，并传入元素信息即可。例如：
var div = React.createElement('div', null, "Hello React");
// 使用 JSX
var div = <div>Hello React</div>
创建之后就可以调用 React.render 方法渲染到页面上：
ReactDOM.render(div, document.body);
第一个 React Component
React Component 抽象出相同 UI 组件的结构和逻辑。 通过调用 React.createClass 方法来创建一个 Component，并传入一个带有 render 方法的对象类型的参数。
var HelloMessage = React.createClass({
render: function () {
return <div>Hello {this.props.name}</div>;
}
});
ReactDOM.render(<HelloMessage name="iissnan" />, document.body);
我们看到 React.createClass 接收了一个对象，并将这个方法返回赋值给 HelloMessage， 最后调用 ReactDOM.render 方法将这个新建的 Component 渲染到页面上。从这个例子看来，一个 Component 与 Element 并无太大的差别。 事实上， Component 已经准备好了，我们可以增添一些结构和功能来扩展这个 Component 。
Props
在上一个例子中，可以看到有一个特殊的引用： this.props.name。 这个引用称之为 Props，可以将他想象成 Component 的设置选项。
在使用上， Props 类似于 HTML 中的属性：
ReactDom.render(<HelloMessage name="foo" />, document.body);
在 Component 内部，通过 this.props.name 来引用这个 Props：
var HelloMessage = React.createClass({
render: function () {
return <div>Hello {this.props.name}</div>;
}
});
需要注意的是， Props 仅用来定制 Component， 这些数据不应该被改动。 如果涉及到需要做改动的数据， 得考虑使用state。
Stateful Component
State 数据代表 Component 的状态， 用于维护 Component 内部的状态。 当 State 发生改变之后， React 将会重新渲染 UI 。调用 与 Props 类似， State 数据通过 this.state 访问：
var Greeting = React.createClass({
getInitialState: function () {
return { greeted: false };
},
greet: function () {
this.setState({
greeted: true
});
},
render: function () {
var response = this.state.greeted ? 'Hi' : '';
return (
<div>
<div>Hello {this.props.name}</div>
<span>{response}</span>
<button onClick={this.greet}>Hi</button>
</div>
);
}
});
ReactDOM.render(<Greeting name="foo" />, document.body);
这个例子中加了几个函数，我们一一来看下。 首先是 getInitialState ， 这个方法在 Component 初始化的时候被调用， 返回 Component 初始时的状态数据。例子中，我们设置了 Component 初始时的 greeted 为 false。
然后是 greet 方法，这个方法被调用之后将修改状态数据 greeted 为 true。
当 State 发生改变后， React 将 Component 渲染到 Virtual DOM，新的 Virtual DOM 与 旧版本的进行比对，检查出改变的部分并更新浏览器的 DOM。 在这个例子中，当按钮被点击后， greeted状态数据发生了变化，UI 跟随着更新。
组合
结合 Props 和 State，我们就可以使用 Component 来创建完整的应用。
var Greeting = React.createClass({
getInitialState: function () {
return { greeted: false };
},
greet: function () {
this.setState({
greeted: true
});
},
render: function () {
var response = this.state.greeted ? 'Hi' : '';
return (
<div>
<div>Hello {this.props.name}</div>
<span>{response}</span>
<button onClick={this.greet}>Hi</button>
</div>
);
}
});
var users = ["foo", "bar", "baz"];
var GreetingApp = React.createClass({
render: function () {
var greetings = this.props.users.map(function (user) {
return <Greeting name={user} />;
});
return <div>{greetings}</div>;
}
});
ReactDOM.render(<GreetingApp users={users} />, document.body);
最后
打个小广告，github上提供demo演示，项目地址--react学习，欢迎star！希望能对你有所帮助！
细说React(一)的更多相关文章
- 细说React(二)
上篇文章主要介绍了React的基本用法,这次将介绍一个React路由组件—react-router. 在 web 应用开发中,路由系统是不可或缺的一部分.在浏览器当前的 URL 发生变化时,路由系统会 ...
- 细说React生命周期
目录 新旧版本生命周期图对比 16.3之前的版本 16.3之后的版本 生命周期的几个阶段 挂载 constructor conpomentWillMount(v17将移除) getDerivedSta ...
- react native 入门实践
上周末开始接触react native,版本为0.37,边学边看写了个demo,语法使用es6/7和jsx.准备分享一下这个过程.之前没有native开发和react的使用经验,不对之处烦请指出.希望 ...
- react入门（4）
首先还是来回顾一下前三篇讲的内容 react入门(1): jsx,组件,css写法 react入门(2):事件,this.props.children,props,...other react入门(3 ...
- 浅谈 原生javaScript&&react 实现全局触摸按钮（附带对addeventlistener的了解）
1.采用原生javaACript 实现全局触摸按钮 首先在控制台输出,观察事件有哪些关于触摸的字段可以使用,然后拿这些字段的数据开始来写方法. 因为要做的是全局触摸按钮,我需要拿到的是按钮时时的坐标位 ...
- spring + spring mvc + mybatis + react + reflux + webpack Web工程例子
前言 最近写了个Java Web工程demo,使用maven构建: 后端使用spring + spring mvc + mybatis: 前端使用react + react-router+ webpa ...
- 【原创】ReFlux细说
ReFlux细说 Flux作为一种应用架构(application architecture)或是设计模式(pattern),阐述的是单向数据流(a unidirectional data flow) ...
- React学习笔记(一) 基础知识
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我. React的基 ...
- Cordova VS React Native 谁是未来? - b
对于原生native还是倍加推崇的,极佳的用户体验和性能让我学的如痴如醉,可是互联网这个世界可以用一句话可以总结:没有什么是不可能的.自从阿里淘宝天猫横空出世,它们教会了人们如何在网上购物,然后仿佛一 ...
随机推荐
- 【C++】数组-二分法查找
1.原理 对于给定值的查找,如果大于该数组的中间元素,下一步在元素值大的区域继续与其中间元素比较:否则下一步在元素值小的区域内继续查找,直到找到目标元素.如果到最后还没有找到,则输出"数组中 ...
- 基于消逝时间量的共识机制（POET）
来自于Intel project:Hyperledger Sawtooth,目前版本 PoET 1.0 PoET 其实是属于Nakamoto consenus的一种,利用“可信执行环境”来提高当前解决 ...
- C++模板(Templates)
模板(template)是泛型编程的基础,"泛型"的含义就是没有不依赖具体的数据类型.模板的引入是为了创建一般性的类(模板类)或者函数(模板函数).典型的容器比如迭代器/算法等是泛 ...
- activiti源码分析学习
activiti源码分析学习导语 目前项目中用activiti来做工作流的相关工作,最近遇到一些情况下,公司二次开发的流程图渲染出现了问题,会造成流程图出不来的情况.初步分析数据库中记录以及简单的代码 ...
- 数据库中INFORMATION_SCHEMA的说明及使用
第一个查询看看库里有多少个表,表名等select * from INFORMATION_SCHEMA.TABLES information_schema这张数据表保存了MySQL服务器所有数据库的信息 ...
- 20165333 2017-2018-2《Java程序设计》课程总结
一.每周作业链接汇总 1.预备作业一:我期望的师生关系 简要内容: 印象深刻的老师 我期望的师生关系 关于JAVA学习 2.预备作业二:学习基础和C语言学习基础 简要内容: 技能学习 C语言学习 关于 ...
- Java之反转排序
顾名思义,反转排序就是以相反的顺序把原来的数组内容重新进行排序.反转排序算法在我们的程序开发中也是经常用到的.而反转排序的基本思想也很简单,就是把数组最后一个元素与第一个元素进行交换,倒数第二个与第二 ...
- GUC-13 生产者消费者案例
import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...
- day6作业--游戏人生
本节作业: 熟练使用类和模块,写一个交互性强.有冲突的程序. 思路: 1.各个模块之间的调用关系,如何使用类,各种方法的使用上面: 2.学了类,以为能用来解决所有问题,东西都要写在类里面: 3.下面自 ...
- CodeIgniter2.0中sqlserver驱动返回受影响行数问题解决
最近使用CI写项目时遇到的问题,当使用sqlserve链接操作时 修改和删除返回的受影响行数不对 解决办法如下: 找到ci框架目录中include\database\drivers\sqlsrv\sq ...