NO.7获取真实的DOM
组件其实只是存在内存中的一种数据结构，叫做虚拟DOM（virtual DOM），只有插入文档以后，才变成真实的DOM，据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。
假设有一个名为Name的组件，组件代码如下：
class Name extends React.Component {
render () {
return (
<div>
<input type="text"/>
<input type="button" value="Focus the text input" />
</div>
);
}
}
这个组件渲染出来的视图为一个输入框和一个按钮。如果想要拿到用户输入的数据，就必须获取真实DOM的节点，所以，需要给输入框加入ref属性。然后this.refs.[refName]就能获取到真实的DOM节点。
另外值得注意的是，想要获取真实DOM，必须等虚拟DOM插入到文档之后，才能成功获取，所以this.refs.[refName]方法必须确保真实DOM存在后再使用，所以为组件指定click回调函数。代码改为如下：
class Name extends React.Component {
render (){
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
handleClick(){
let va = this.refs.myTextInput.value;
console.log(va);
}
}
根据ES6语法，变量命名需要加上let,否则会报错。
运行代码，点击按钮获取输入框的值，仍然报错
Uncaught TypeError: Cannot read property 'refs'。
原因是onClick={this.handleClick}需要加入bind(this),改为onClick={this.handleClick.bind(this)}
,现在就能成功获取输入框里的值了。
NO.8 状态（this.state）
组件的状态，用来和用户互动，组件一开始有一个状态，然后用户操作导致状态改变，从而改变状态，根据状态重新渲染页面。
class Name extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
}
render () {
let text = this.state.liked? "喜欢" : "不喜欢";
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value={text} onClick={this.handleClick.bind(this)} />
</div>
);
}
handleClick(){
let va = this.refs.myTextInput.value;
this.setState({liked: !this.state.liked});
console.log(va);
}
}
以上就是根据用户的操作改变当前组件的状态，根据用户点击按钮，交替显示喜欢还是不喜欢。相当于一个点赞按钮。
ES6写法，初始化组件的状态
constructor(props) {
super(props);
this.state = {liked: false};
}
将组件状态设置为当前状态相反状态
this.setState({liked: !this.state.liked});
NO9.表单
文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况。
'use strict';
import React from "react";
class Input extends React.Component {
constructor(props) {
super(props);
this.state = {value : "hello"};
}
render () {
let value = this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange.bind(this)} />
</div>
)
}
handleChange(event){
this.setState({value: event.target.value});
let a = this.state.value
console.log(a);
}
}
export { Input as default };
如上代码，input里面的value只能用过onChange={this.handleChange.bind(this)}这个方法来获得，将value和状态绑定在一起，当输入框改变时，改变组件状态，将value存入状态中，读取输入框的数据时，只能读取状态里的value。
NO.10 组件的生命周期
组件的生命周期有三个状态：
- Mounting：已插入真实 DOM
- Updating：正在被重新渲染
- Unmounting：已移出真实 DOM
React为每个状态提供了两种处理函数，will在进入状态之前用，did在进入状态之后调用。
- componentWillMount()
- componentDidMount()
- componentWillUpdate(object nextProps, object nextState)
- componentDidUpdate(object prevProps, object prevState)
- componentWillUnmount()
下面一段实例代码来说明生命周期：
'use strict';
import React from "react";
class Input extends React.Component {
constructor(props) {
super(props);
this.state = {opacity : 1.0};
}
componentDidMount() {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
}
render () {
let value = this.state.value;
return (
<div>
<input type="text" style={{opacity: this.state.opacity}} />
</div>
)
}
}
export { Input as default };
componentDidMount方法在已经插入真实DOM后之后，每100ms修改input框的透明度，当透明度被修改的时候，状态对应修改，又需要重新
渲染DOM，会产生输入框一直输入的效果。
注意的是：style={% raw %}{{opacity: this.state.opacity}}{% endraw %}应该写成这样，这是因为 React 组件样式是一个对象。
NO.11 Ajax
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI
var UserGist = React.createClass({
getInitialState: function() {
return {
username: '',
lastGistUrl: ''
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var lastGist = result[0];
if (this.isMounted()) {
this.setState({
username: lastGist.owner.login,
lastGistUrl: lastGist.html_url
});
}
}.bind(this));
},
render: function() {
return (
<div>
{this.state.username}'s last gist is
<a href={this.state.lastGistUrl}>here</a>.
</div>
);
}
});
ReactDOM.render(
<UserGist source="https://api.github.com/users/octocat/gists" />,
document.body
);
（完）
参考资料：React 入门实例教程（阮一峰）
