React 可以灵活的应用在各种各样的项目中。你可以用它来创建新的应用程序,你也可以逐步引用而不改变现有的代码库。

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

你可以直接访问 官方文档,从怎么安装React开始学习,也可以看看 React 入门实例教程 这篇文章,笔者就是通过这篇文章入门的。

言归正传,你可以直接下载源码直接使用,不用另外安装,只需把这个库拷贝到你的硬盘就行了。也可以去官网下载,官方文档已经写得很清楚了。

1. HTML模板

使用 React 的网页源码,结构大致如下:

<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// ** 代码放这 **
</script>
</body>
</html>

上面代码有两个地方需要注意。首先,最后一个 <script> 标签的 type 属性为 text/babel 。这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。凡是使用 JSX 的地方,都要加上 type="text/babel"

其次,上面代码一共用了三个库: react.jsreact-dom.jsBrowser.js ,它们必须首先加载。其中,react.js 是 React 的核心库,react-dom.js 是提供与 DOM 相关的功能,Browser.js 的作用是将 JSX 语法转为 JavaScript 语法,这一步很消耗时间,实际上线的时候,应该将它放到服务器完成。

$ babel src --out-dir build

上面命令可以将 src 子目录的 js 文件进行语法转换,转码后的文件全部放在 build 子目录。

2. ReactDOM.render()

ReactDOM.render 是 React 的最基本方法,用于将模板转为 HTML 语言,并插入指定的 DOM 节点。

    ReactDOM.render(
<h1>Hello,React!</h1>,
document.getElementById('root')
);

上面代码将一个 h1 标题,插入 root 节点(查看 Demo),运行结果如下:

3. JSX 语法

上一节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写(查看 Demo):

    function tick() {
const element = (
<div>
<h1>Hello,React!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(
element,
document.getElementById('root')
);
}
tick();
setInterval(tick,1000);

最终效果会显示相关文字,并每秒更新本地时间:

再看一个 Demo :

    var names = ['Alice','Emily','Kate','Luka'];
const element = (
<div>
{
names.map(function (name) {
return <h2>Hello,{name}!</h2>
})
}
</div>
);
const root = document.getElementById('root');
ReactDOM.render(
element,
root
);

上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。上面代码的运行结果如下:

JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员(查看 Demo ):

    var arr = [
<h1>Hello React!</h1>,
<h2>React is awesome!</h2>
];
var root = document.getElementById('root');
ReactDOM.render(
<div>{arr}</div>,
root
);

上面代码的 arr变量是一个数组,结果 JSX 会把它的所有成员,添加到模板,运行结果如下。

4. 组件

React 允许将代码封装成组件(component),然后像插入普通 HTML 标签一样,在网页中插入这个组件。React.createClass 方法就用于生成一个组件类(查看 Demo

    var HelloMessage = React.createClass({
render:function () {
return <h1>Hello,{this.props.name}! {this.props.msg}</h1>;
}
});
var root = document.getElementById('root');
ReactDOM.render(
<HelloMessage name="Luka" msg="Nice to meet you!"/>,
root
);

上面代码中,变量 HelloMessage 就是一个组件类。模板插入 <HelloMessage /> 时,会自动生成 HelloMessage 的一个实例(下文的"组件"都指组件类的实例)。所有组件类都必须有自己的 render 方法,用于输出组件。

注意,组件类的第一个字母必须大写,否则会报错,比如HelloMessage不能写成helloMessage。另外,组件类只能包含一个顶层标签,否则也会报错。

    var HelloMessage = React.createClass({
render: function() {
return <h1>
Hello {this.props.name}
</h1><p>
some text
</p>;
}
});

上面代码会报错,因为HelloMessage组件包含了两个顶层标签:h1p

组件的用法与原生的 HTML 标签完全一致,可以任意加入属性,比如 <HelloMessage name="Luka"> ,就是 HelloMessage 组件加入一个 name 属性,值为 Luka。组件的属性可以在组件类的 this.props 对象上获取,比如 name 属性就可以通过 this.props.name 读取。上面代码的运行结果如下:

添加组件属性,有一个地方需要注意,就是 class 属性需要写成 classNamefor 属性需要写成 htmlFor ,这是因为 classfor 是 JavaScript 的保留字。

5. this.props.children

this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点(查看 Demo

    var NotesList = React.createClass({
render:function () {
return (
<ol>
{
React.Children.map(this.props.children,function (child) {
return <li>{child}</li>
})
}
</ol>
);
}
});
var root = document.getElementById('root');
ReactDOM.render(
<NotesList>
<h1>Alice</h1>
<h2>Kate</h2>
<h3>Tom</h3>
<h4>Luka</h4>
</NotesList>,
root
);

上面代码的 NoteList 组件有四个子节点,它们都可以通过 this.props.children 读取,运行结果如下:

这里需要注意, this.props.children 的值有三种可能:如果当前组件没有子节点,它就是 undefined ;如果有一个子节点,数据类型是 object ;如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。

React 提供一个工具方法 React.Children 来处理 this.props.children 。我们可以用 React.Children.map 来遍历子节点,而不用担心 this.props.children 的数据类型是 undefined 还是 object。更多的 React.Children 的方法,请参考官方文档

6. PropTypes

组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

组件类的PropTypes属性,就是用来验证组件实例的属性是否符合要求(查看 Demo

    var MyTitle = React.createClass({
propTypes: {
title: React.PropTypes.string.isRequired,
}, render: function() {
return <h1> {this.props.title} </h1>;
}
});

上面的Mytitle组件有一个title属性。PropTypes 告诉 React,这个 title 属性是必须的,而且它的值必须是字符串。现在,我们设置 title 属性的值是一个数值。

    var data = 123;

    ReactDOM.render(
<MyTitle title={data} />,
document.body
);

这样一来,title属性就通不过验证了。控制台会显示一行错误信息。

更多的PropTypes设置,可以查看官方文档

此外,getDefaultProps 方法可以用来设置组件属性的默认值。

    var MyTitle = React.createClass({
getDefaultProps : function () {
return {
title : 'Hello World'
};
}, render: function() {
return <h1> {this.props.title} </h1>;
}
}); ReactDOM.render(
<MyTitle />,
document.getElementById('root')
);

7. 获取真实的DOM节点

组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM)。只有当它插入文档以后,才会变成真实的 DOM 。根据 React 的设计,所有的 DOM 变动,都先在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它可以极大提高网页的性能表现。

但是,有时需要从组件获取真实 DOM 的节点,这时就要用到 ref 属性(查看 Demo )

    var MyComponent = React.createClass({
handleClick:function () {
this.refs.myTextInput.focus();
},
render:function () {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
}); var root = document.getElementById('root');
ReactDOM.render(
<MyComponent />,
root
);

上面代码中,组件 MyComponent 的子节点有一个文本输入框,用于获取用户的输入。这时就必须获取真实的 DOM 节点,虚拟 DOM 是拿不到用户输入的。为了做到这一点,文本输入框必须有一个 ref 属性,然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。

需要注意的是,由于 this.refs.[refName] 属性获取的是真实 DOM ,所以必须等到虚拟 DOM 插入文档以后,才能使用这个属性,否则会报错。上面代码中,通过为组件指定 Click 事件的回调函数,确保了只有等到真实 DOM 发生 Click 事件之后,才会读取 this.refs.[refName] 属性。

React 组件支持很多事件,除了 Click 事件以外,还有 KeyDownCopyScroll 等,完整的事件清单请查看官方文档

8. this.state

组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI (查看 Demo )

    var LinkButton = React.createClass({
getInitialState:function () {
return {liked:false};
},
handleClick:function (event) {
this.setState({liked:!this.state.liked});
},
render:function () {
var text = this.state.liked?'like':'haven\'t liked';
return (
<p onClick={this.handleClick}>
You {text} this. Click to toggle.
</p>
);
}
}); var root = document.getElementById('root');
ReactDOM.render(
<LinkButton />,
root
);

上面代码是一个 LikeButton 组件,它的 getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。当用户点击组件,导致状态变化,this.setState 方法就修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

由于 this.propsthis.state 都用于描述组件的特性,可能会产生混淆。一个简单的区分方法是,this.props 表示那些一旦定义,就不再改变的特性,而 this.state 是会随着用户互动而产生变化的特性。

9.表单

用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props 读取(查看 Demo )

    var Input = React.createClass({
getInitialState:function () {
return {value:'Hello!'}
},
handleChange:function (event) {
this.setState({value:event.target.value});
},
render:function () {
var value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange} />
<p>{value}</p>
</div>
)
}
});
var root = document.getElementById('root');
ReactDOM.render(
<Input/>,
root
);

上面代码中,文本输入框的值,不能用 this.props.value 读取,而要定义一个 onChange 事件的回调函数,通过 event.target.value 读取用户输入的值。

textarea 元素、select元素、radio元素都属于这种情况,更多介绍请参考官方文档

10. 组件的生命周期

组件的生命周期分成三个状态:

Mounting:已插入真实 DOM
Updating:正在被重新渲染
Unmounting:已移出真实 DOM

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。

componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

这些方法的详细说明,可以参考官方文档。下面是一个例子(查看 Demo )

    var Hello = React.createClass({
getInitialState:function () {
return {
opacity:1.0,
color:'#FF0000'
}
},
//已插入真实DOM后调用
//通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
componentDidMount:function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= 0.05;
if(opacity < 0.1){
opacity = 1.0;
}
this.setState({
opacity:opacity
});
}.bind(this),100)
},
render:function () {
return (
<div style={{opacity:this.state.opacity,color:this.state.color}}>
<h1>Hello,{this.props.name}!</h1>
</div>
);
}
});
var root = document.getElementById('root');
ReactDOM.render(
<Hello name="Luka"/>,
root
);

上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。

另外,组件的style属性的设置方式也值得注意,不能写成

style="opacity:{this.state.opacity};"

而要写成

style={{opacity: this.state.opacity}}

这是因为 React 组件样式是一个对象,所以第一重大括号表示这是 JavaScript 语法,第二重大括号表示样式对象。

11. Ajax

组件的数据来源,通常是通过 Ajax 请求从服务器获取,可以使用 componentDidMount 方法设置 Ajax 请求,等到请求成功,再用 this.setState 方法重新渲染 UI (查看 Demo )

    var UserGist = React.createClass({
getInitialState:function () {
return {
name:'',
website_url:'' };
},
componentDidMount:function () {
$.get(this.props.source,function (data) {
if(this.isMounted()){
this.setState({
name:$(data).find('name').text(),
website_url:$(data).find('website_url').text()
});
}
}.bind(this));
},
render:function () {
return(
<div>
{this.state.name}'s website url is <a href={this.state.website_url}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="http://www.ycdoit.com/api/Web4Luka.asmx/HelloWorld"/>,
document.getElementById('root')
);

上面代码使用 jQuery 完成 Ajax 请求,这是为了便于说明。显示效果如下,点击链接可以打开对应的网址:

React 本身没有任何依赖,完全可以不用jQuery,而使用其他库。

我们甚至可以把一个Promise对象传入组件,请看Demo

    ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
document.getElementById('root')
);

上面代码从Github的API抓取数据,然后将Promise对象作为属性,传给RepoList组件。

如果Promise对象正在抓取数据(pending状态),组件显示"正在加载";如果Promise对象报错(rejected状态),组件显示报错信息;如果Promise对象抓取数据成功(fulfilled状态),组件显示获取的数据。

    var RepoList = React.createClass({
getInitialState:function () {
return {
loading:true,
error:null,
data:null
};
},
componentDidMount(){
this.props.promise.then(
value => this.setState({loading:false,data:value}),
error => this.setState({loading:false,data:error})
)
},
render:function () {
if(this.state.loading){
return <span>Loading...</span>;
}else if(this.state.error!==null){
return <span>Error:{this.state.error.message}</span>;
}else{
var repos = this.state.data.items;
var repoList = repos.map(function (repo, index) {
return (
<li key={index}><a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars)
<br />{repo.description}</li>
);
});
return (
<main>
<h1>Most Popular Javascript Projects in Github</h1>
<ol>
{repoList}
</ol>
</main>
);
}
}
});
ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}/>,
document.getElementById('root')
);

源码地址:https://github.com/YeXiaoChao/PluginsFromJS/tree/master/React

来源:React 入门实例教程

其他链接:

极客学院整理的文档: http://wiki.jikexueyuan.com/project/react/

React Native中文网:http://reactnative.cn/

【React】入门实例的更多相关文章

  1. React 入门实例教程(转载)

    本人转载自: React 入门实例教程

  2. React 入门实例

    React 入门实例教程 一.安装 React 的安装包,可以到官网下载. $ git clone git@github.com:ruanyf/react-demos.git 如果你没安装 git, ...

  3. let import export React入门实例教程 connect provider combineReducers 箭头函数 30分钟掌握ES6/ES2015核心内容 Rest babel

    let与var的区别 http://www.cnblogs.com/snandy/archive/2015/05/10/4485832.html es6 导入导出 http://www.csdn.ne ...

  4. React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  5. 2015年最热门前端框架React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  6. React入门实例教程

    文章转自:阮一峰 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React ...

  7. React 入门实例教程(转载)

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  8. 【转】react入门实例教程

    作者: 阮一峰 日期: 2015年3月31日 写在前面:原文链接http://www.ruanyifeng.com/blog/2015/03/react.html    github地址https:/ ...

  9. React 入门实例教程【转】

    Any day will do. 哪一天都行 Are you kidding? 你在开玩笑吧! Congratulations! 祝贺你! I don’t mean it. 我不是故意的. 原文作者: ...

  10. 不会几个框架,都不好意思说搞过前端: React 入门实例教程

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

随机推荐

  1. 使用super调用父类的构造方法

    package com.bjpowernode.t02inheritance.c09; /* * 使用super调用父类的构造方法 */public class TestSuper02 { publi ...

  2. 《LINQ技术详解C#》-5.非延迟操作符

    1.转换操作符 1.ToArray 从一个类型为T的输入序列创建一个类型为T的数组. 2.ToList 从一个类型为T的序列创建一个类型为T的列表. 3.ToDictionary 从类型为T的序列创建 ...

  3. php手动搭建wamp环境(一)--之 Windows系统下PHP环境搭建

    1.PHP环境搭建的前提是 Apache HTTP Server (Apache 服务器)已经安装部署成功,并可以正常访问到服务器的主页面.Apache HTTP Server 的安装部署已经在上一篇 ...

  4. [转] 为什么javascript是单线程的却能让AJAX异步调用?

    为什么JavaScript是单线程的却能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的? function foo() { console.log( 'first' ); ...

  5. BZOJ2303 [Apio2011]方格染色 并查集

    欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ2303 题意概括 现在有一个N*M矩阵,矩阵上只能填数字0或1 现在矩阵里已经有一些格子被填写了数字 ...

  6. POJ1962:Corporative Network【带权并查集】

    <题目链接> 题目大意: n个节点,若干次询问,I x y表示从x连一条边到y,权值为|x-y|%1000:E x表示询问x到x所指向的终点的距离.   解题分析: 与普通的带权并查集类似 ...

  7. 洛谷 P2440 木材加工【基础二分】

    题目链接:https://www.luogu.org/problemnew/show/P2440 题目描述 木材厂有一些原木,现在想把这些木头切割成一些长度相同的小段木头(木头有可能有 剩余),需要得 ...

  8. C++雾中风景11:厘清C++类型转换(static_cast,dynamic_cast,reinterpret_cast,const_cast)

    C++是一门弱类型的语言,提供了许多复杂和灵巧类型转换的方式.笔者之前写的Python与Go都是强类型的语言,对这种弱类型的设计实在是接受无力啊~~ ( 生活所迫,工作还得写C++啊~~)C++语言提 ...

  9. 多线程学习笔记九之ThreadLocal

    目录 多线程学习笔记九之ThreadLocal 简介 类结构 源码分析 ThreadLocalMap set(T value) get() remove() 为什么ThreadLocalMap的键是W ...

  10. 说出ArrayList,Vector, LinkedList的存储性能和特性

     ArrayList和Vector都是使用数组方式存储数据,此数组元素数大于实际存储的数据以便增加和插入元素,它们都允许直接按序号索引元素,但是插入元素要涉及数组元素移动等内存操作,所以索引数据快而插 ...