React组件生命周期

组件的属性和方法

render

React.createClass用于生成组件类，每一个组件都要有render函数

props

组件的属性可以在组件类this.props对象上获取，如：this.props.属性名。添加组件属性，需要注意：class属性需要写成className，for属性需要写成htmlFor，因为class和for是JavaScript的保留字

<script type="text/babel">
//组件类的第一个字母需要大写，否则会报错
var HelloMessage = React.createClass({
render : function(){//所有组件必须有自己的render方法，用于输入组件
return <div><h1>Hello, {this.props.name}</h1><h2>woca,age is:{this.props.age}</h2></div>;
}
});
ReactDOM.render(
<HelloMessage name="sqliang" age="23"/>,
document.getElementById('example')
);
</script>

this.props.children

this.props.children表示组件的所有子节点：

<script type="text/babel">
var NotesList = React.createClass({
render : function(){
return (
<ol>
{
React.Children.map(this.props.children,function(child){
return <li>{child}</li>;
})
}
</ol>
);
}
});

ReactDOM.render(
<NotesList>
<span>Hello</span>
<span>hehe</span>
<span>heihei</span>
</NotesList>,
document.body
);
</script>

getDefaultProps方法设置组件属性默认值

<div id="example"></div>
<script type="text/babel">
var MyTitle = React.createClass({
getDefaultProps : function(){
return {
title : 'Hello,World',
name : 'sqliang'
};
},
render : function(){
return <h1>{this.props.title},{this.props.name}</h1>;
}
});
ReactDOM.render(
<MyTitle />,
document.getElementById("example")
);
</script>

组件生命周期

React组件是一个状态机，接受两个输入参数：this.props和this.state，返回一个虚拟DOM

创建类

通过 React.createClass 创建的是类,React组件是有类和实例区别的。组件不允许修改自己的 props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中。

var InputState = React.createClass({
/**
* 组件初始化的时候执行，必须返回一个null或者对象
* @returns {{enable: boolean, width: string, height: string, margin: string, display: string}}
* 通过this.state.属性名来访问属性值
*/
getInitialState : function(){
return {
enable : false,
width : '200px',
height : '100px',
margin : '5px auto',
display : 'inline-block'
};
},
handleClick : function(event){//点击事件每次修改属性值后，会自动调用this.render(),再次渲染组件
this.setState({//修改初始属性值得时候要调用this.setState()来修改
enable: !this.state.enable
});
},
render : function(){
return (
<p style={{width:this.state.width,height:this.state.height,margin:this.state.margin}}>
<input placeholder="输入用户名" style={{display:this.state.display}} disabled={this.state.enable} className="form-control" type="text" />
<button onClick={this.handleClick} className="btn btn-default">Change State</button>
<h3>{this.props.name}</h3>
</p>
);
}
});

实例化

类创建后就可以进行实例化主要过程有以下几种组成：

getInitialSrate：获取this.state的默认值

componentWillMount：在render之前调用此方法，在render之前需要做的事情就在这里处理

render：渲染并返回一个虚拟DOM

componentDidMount：在render之后，react会使用render返回的虚拟DOM来创建真实DOM，完成之后调用此方法

注意：

1. this.state只存储原始数据，不要存储计算后的数据

2. componentWillMount用来处理render之前的逻辑，不要在render中处理业务逻辑。render就是一个模板的作用，值处理和展示相关的逻辑，比如格式化时间等，如果有业务逻辑，那么放在componentWillMount中执行，所以render中一定不会出现改变state之类的操作

3. render返回的是虚拟DOM，所谓虚拟DOM，其实就是React.DOM.div之类的实例，就是一个js对象，render方法完成之后，真实的DOM并不存在。

4. componentDidMount中处理和真实DOM相关的逻辑。这时候真实的DOM已经渲染出来，可以通过this.getDOMNode()方法来使用了。典型的场景就是可以在这里调用jQuery插件

更新

组件实例化完成后进入了存在期，可以响应用户操作和父组件的更新来更新视图，主要有以下过程组成：

componentWillReceiveProps:父组件或者通过组件的实例调用setProps改变当前组件的props时调用

shouldComponentUpdate:是否需要更新组件（慎用）

componentWillUpdate:调用render方法之前

render：同上

componentDidUpdate：真实DOM已经完成更新

销毁

销毁的过程调用：componentWillUnmount

组件生命周期示例代码：

var HelloComponent = React.createClass({
getDefaultProps: function(){
return {};
},
getInitialState : function () {
return {};
},
componentWillMount : function () {
console.log("render之前，业务逻辑代码")
},
render : function () {
return (<div>Hello,{this.props.name}</div>);
},
componentDidMount : function () {
console.log("真实DOM已好,你想调用jQuery插件吗？？");
},
componentWillReceiveProps : function () {
console.log("改变当前组件的props时调用");
},
componentWillUpdate : function () {
console.log("调用在render之前，可以添加逻辑代码");
},
componentDidUpdate : function () {
console.log("真实DOM已经完成更新");
}
});

var helloCom1 = ReactDOM.render(
<HelloComponent name="sqliang"/>,
document.getElementById('div1')
);
var helloCom2 = ReactDOM.render(
<HelloComponent name='zcy'/>,
document.getElementById('div2')
);