React入门&实战

下面内容是前几天在公司内部做ReactJS分享的提纲,DEMO和PDF,可以看这里

零、介绍

2014年最火热的三个前端技术之一

其他备选还有AngularJS和另外一个

作者:Facebook

相关:Bigpipe、模块开发、模块间的组合、相关

一、最简例子

  1. React.render() 输出 hello world. 1hello.html
1
2
3
4
React.render(
<div>Hello!</div>,
document.body
);
  1. React.render() 第二个参数,选择需要父节点1append.html
1
2
3
4
React.render(
<div>Hello World!</div>,
document.getElementById('result')
);

二、JSX

JSX是一个XML语法的预处理器。使用React时可以不必使用JSX,但JSX已经基本上成为标配了。由于是XML,所以是大小写敏感的!3jsx.html

1
2
3
4
5
6
7
8
9
10
11
<div className="red">Children Text</div>
<MyCounter count={3 + 5} />

var gameScores = {
player1: 2,
player2: 5
};
<DashboardUnit data-index="2">
<h1>Scores</h1>
<Scoreboard className="results" scores={gameScores} />
</DashboardUnit>

就像XML一样,JSX的标签包括一个标签名,若干属性,还有子节点。
双引号包起来的是字符串,花括号包起来的是JS表达式。

JSX官方文档
JSX在线编译器

三、组件 Components

组件是React最最核心的概念!

1
2
3
4
5
6
7
8
9
10
11
12
13
// 这里定义了组件
var MessageComponent = React.createClass({
render: function() {
return (
<div>{this.props.message}</div>
);
}
});
// 这里使用了组件(渲染到)
React.render(
<MessageComponent message="Hello!" />,
document.body
);

使用React.createClass来创建一个组件,创建组件只有一个要求,暨需要实现render方法。该方法定义组件将被怎样渲染(指的是HTML结构)。

组件的属性 Props

组件中一个重要的概念就是属性。4props.html

实际上,前面的例子中已经出现了属性。比如XML例子中的classNamescores,都是组件的属性。这些属性,在组件被render后,可以使用this.props.来直接访问到。

四、事件 Event

首先,创建个组件,后我们要使用行内事件处理器(inline event handlers)进行事件处理。众所周知,onclick是个很差的事件处理方案,但是在React中并不是这样。很快我将告诉你为什么,在此之前,先看来学习下React怎么使用事件。5event.html

1
2
3
4
5
6
7
8
9
var BannerAd = React.createClass({
onBannerClick: function(evt) {
// codez to make the moneys
},

render: function() {
return <div onClick={this.onBannerClick}>Click Me!</div>;
}
});

就是这样,你在节点中添加了onXXX方法,同时属性值说明了执行函数。

虽然在创建组件过程中,看上去貌似使用的onClick={this.handler}的方式来绑定事件函数,但实际上,最终的事件绑定默认是在document上,默认使用事件代理的方式,通过dom节点上的data-reactid属性代理到触发事件的元素。最终完成整个事件处理。

所以React的事件写法,看上去很古老低效率,但实际上他会帮你优化到极致。如此设计当然是还是模块化,事件跟组件一体而不必去访问组件外的元素。

注意1:组件中onClick是大小写敏感的。XML

注意2:React中有更高级的事件使用方法,支持冒泡和事件代理,本节课不讲。

五、状态 State

到现在为止,这里展示了React的静态渲染引擎,现在我们要介绍状态(state),好让React变得更加的动态。

状态(state)与属性(props)最大的区别在于:状态是组件内部且被组件自行修改的,而属性是可以通过外部注入或者修改的。让我们看个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var StateDemo = React.createClass({
// 这个方法用来初始化状态
getInitialState: function() {
return {
clicks: 0
}
},

// 这里是事件
onBtnClick: function() {
this.setState({
clicks: this.state.clicks + 1
})
},

render: function() {
return (
<div>
<div>点击数:<strong>{this.state.clicks}</strong></div>
<button onClick={this.onBtnClick}>点我增加点击数</button>
</div>

)
}
});

React.render(
<StateDemo />,
document.body
);

API

getInitialState

该接口返回组件状态的初始化值,键-值对象类型。

1
2
3
4
5
getInitialState: function() {
return {
clicks: 0
};
}
this.state

访问一个组件的状态,使用this.state,就像使用this.props一样。

this.setState

更新一个组件的状态,传入一个键值组合。

1
2
3
4
this.setState({
// Notice how we access the current state here
clicks: this.state.clicks + 1
})

当组件的一个状态变化时,渲染器将使用新的状态值与UI重新渲染组件。
这是React实现的核心。我们将在下一个章节中着重讲述。

至此,组件、属性和状态,三个React核心介绍完毕,你可以自己动手使用React了!

六、综合例子

  • 组件的组合
  • 列表(循环)