React的学习（下）
摘要
众所周知，前端三大框架Angular、React、Vue，所以为了跟上时代的步伐，最近开始着手学习React，这时候就发现个大问题，框架一直在更新，提倡的编写语法也在更新，网上有许多教程都是一两年前的了，因此，我决定直接从官方英文文档入手学习，学习的框架版本为最新的ReactV15.5.0，现将学习笔记整理如下，以供大家参考，本篇文章主要是react一些基础语法的讲解与总结，如需深入了解，可查阅官方文档，也敬请期待后续文章。
本文接着上篇文章继续讲解React的基础语法
5、表单
文本输入框的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况，更多介绍请参考官方文档。
如果你希望React指定初始值，但不再控制后续更新。要处理这种情况，可以指定一个defaultValue属性而不是value。
<input type="checkbox">和<input type="radio">支持defaultChecked，<select>与<textarea>支持defaultValue。
6、组件生命周期
组件的生命周期分成三个状态：
- 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)：组件判断是否重新渲染时调用
7、AJAX
React并没有像Angular一样一手包办，连http服务都帮我们封装好了，因为它提倡的是以React为核心，同时你可以使用其他的库，增加代码的灵活性，而不是一手包办，所以React是个轻量的库。
组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新渲染 UI 。
8、样式的设置
1）设置class
因为class是ES6语法里的关键字，所以在React里使用class时，应该改为className,例如
<div className="style1"></div>
2）使用行内样式
style的值是对象，所以如下：
let backAndTextColor = {
backgroundColor:'red',
color:'white',
fontSize:40
};
<div style={backAndTextColor}>看背景颜色和文字颜色</div>
//或者，注意是双括号哦，第一层是{}是JSX语法，第二层{}代表是对象，是不是一目了然了
<div style={{backgroundColor:'red',color:'white',fontSize:40}}>看背景颜色和文字颜色</div>
9、操作组件内节点
通过设置标签的ref属性，然后用this.refs['前面的ref名']访问
可以拿到原生的节点后，这时就可以使用其他方法比如jQuery操作原生的节点【题外话：通过$()[0],可以从jQuery对象中拿到原生对象】
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>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById('example')
);
上面代码中，组件 MyComponent 的子节点有一个文本输入框，用于获取用户的输入。这时就必须获取真实的 DOM 节点，虚拟 DOM 是拿不到用户输入的。为了做到这一点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
通过这个ref我们同样可以获取input的输入值。就是这么简单。
但是使用过程中我们切记：由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。上面代码中，通过为组件指定 Click 事件的回调函数，确保了只有等到真实 DOM 发生 Click 事件之后，才会读取 this.refs.[refName] 属性。
10、一个简单的demo
接下来展示一个简单的demo，实现网页时钟显示
class Timer extends React.Component{
constructor(props) {
super(props);
this.state = {h:0,m:0,s:0};
}
tick(){
var now_date=new Date();
this.setState({
h:now_date.getHours(),
m:now_date.getMinutes(),
s:now_date.getSeconds()
});
}
componentDidMount(){
var _this=this;
setInterval(function(){
_this.tick();
},1000);
this.tick(); //组件刚挂载时执行tick()，可以避免出现0:0:0
}
render(){
return (
<div>
<span>{this.state.h}:</span>
<span>{this.state.m}:</span>
<span>{this.state.s}</span>
</div>
);
}
}
ReactDOM.render(
<Timer />,
document.getElementById('root')
);
更多前端技术文章，欢迎访问我的个人技术博客：嵘么么的个人博客
