React入门
2017-01-17
花了两天事件把阮一峰老师的react入门教程撸了一遍，感觉就是上手挺容易的。按着github上的demo给敲了一遍，趁着自己还记得，先做个总结。
react主要是JSX语法，要引入JSX转JavaScript的插件让浏览器去解析，但是速度是伤；或是安装离线转换工具；我用的是gulp里的babel
JSX语法HTML”<”开始；JavaScript”{}“开始解析。
ReactDOM.render()React最基本方法，用于将模板转为HTML语言，并插入指定dom节点
if is array 会展开array全部
React.createClass()用于生成一个组件类（组件第一个字母必须大写；只有一个顶层标签）
this.props属性与组件的属性一一对应，但this.props.children表示所有子节点
propTypes验证组件实例的属性是否符合要求;getDefaultProps 方法可以用来设置组件属性的默认值。
propTypes:{
title:React.PropTypes.string.isRequired,
},
getDefaultProps : function () {
return {
title : 'Hello World'
};
},
借助refs来获取虚拟dom的真实dom；this.refs.[name]会返回这个真实的dom
var MyComponent = React.createClass({
handleClick : function(){
this.refs.Input.focus();
console.log(this.refs.Input.value)
},
render : function(){
return (
<div>
<input type="text" ref="Input"/>
<input type="button" value="Focus the text input" onClick={this.handleClick}/>
</div>
);
}
});
ReactDOM.render(
<MyComponent />,
document.getElementById("demo_07")
);
//demo_08 important 用户UI互动
var LikeButton = 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>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById("demo_08")
);
react组件生命周期：
Mounting：已插入真实 DOM ；
Updating：正在被重新渲染；
Unmounting：已移出真实 DOM
will会在进入状态调用；did函数在进入状态之后调用
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
把后台数据当做对象传入组件
阮一峰详细版：
自己敲的列子：