实例化

当组件在客户端被实例化，第一次被创建时，以下方法依次被调用：

• getDefaultProps 
• getInitialState
• componentWillMount 
• render
• componentDidMount

当组件在服务端被实例化，首次被创建时，以下方法依次被调用：

• getDefaultProps 
• getInitialState 
• componentWillMount 
• render

componentDidMount 不会在服务端被渲染的过程中调用。

getDefaultProps

对于每个组件实例来讲，此方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的 props 值。

var Hello = React.creatClass({      
getDefaultProps: function(){        
return {              
name: 'pomy',              
git: 'dwqs'          
}      
},        
render: function(){        
return (            
<div>Hello,{this.props.name},git username is {this.props.dwqs}</div>          
)      
}  
});    
ReactDOM.render(<Hello />, document.body);

也可在挂载组件的时候设置 props：

var data = [{title: 'Hello'}];<Hello data={data} />

或调用 setProps （一般不需要调用）来设置其 props：

var data = [{title: 'Hello'}];var Hello = React.render(<Demo />, document.body);  Hello.setProps({data:data});

注意：但只能在子组件或组件树上调用 setProps。别调用 this.setProps 或者 直接修改 this.props。

React 通过 propTypes 提供了一种炎症 props 的方式，propTypes 是一个配置对象，用于定义属性类型：

var survey = React.createClass({      
propTypes: {          
survey: React.PropTypes.shape({              
id: React.PropTypes.number.isRequired          
}).isRequired,          
onClick: React.PropTypes.func,          
name: React.PropTypes.string,          
score: React.PropTypes.array          
...      
},    
//...})

getInitialState

对于组件的每个实例来说，这个方法的调用有且只有一次用来初始化每个实例的 state，在这个方法里，可以访问组件的 props。每一个 React 组件都有自己的 state，其与 props 的区别在于 state只存在组件的内部，props 在所有实例中共享。

getInitialState 和 getDefaultPops 的调用是有区别的，getDefaultPops 是对于组件类来说只调用一次，后续该类的应用都不会被调用，而 getInitialState 是对于每个组件实例来讲都会调用，并且只调一次。

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('example')  
);

每次修改 state，都会重新渲染组件，实例化后通过 state 更新组件，会依次调用下列方法：

• shouldComponentUpdate
• conponentWillUpdate
• render
• conponentDidUpdate

注意：不要直接修改 this.state，要通过 this.setState 方法来修改。

render

该方法会创建一个虚拟 DOM，用来表示组件的输出。对于一个组件来讲，render 方法是唯一一个必需的方法。render 方法需要满足下面几点：

• 只能通过 this.props 和 this.state 访问数据（不能修改）
• 可以返回 null,false 或者任何 React 组件
• 只能出现一个顶级组件，不能返回一组元素
• 不能改变组件的状态
• 不能修改 DOM 的输出

render 方法返回的结果并不是真正的 DOM 元素，而是一个虚拟的表现，类似于一个 DOM tree 的结构的对象。react 之所以效率高，就是这个原因。

componentDidMount

该方法不会在服务端被渲染的过程中调用。该方法被调用时，已经渲染出真实的 DOM，可以再该方法中通过 this.getDOMNode() 访问到真实的 DOM(推荐使用 ReactDOM.findDOMNode())。

var data = [..];var comp = React.createClass({      
render: function(){        
return <imput .. />      
},      
conponentDidMount: function(){          
$(this.getDOMNode()).autoComplete({              
src: data          
})      
}  
})

由于组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。有时需要从组件获取真实 DOM 的节点，这时就要用到 ref 属性：

var Area = React.createClass({      
render: function(){        
this.getDOMNode(); //render调用时，组件未挂载，这里将报错            
return <canvas ref='mainCanvas'>      
},      
componentDidMount: function(){          
var canvas = this.refs.mainCanvas.getDOMNode();          
//这是有效的，可以访问到 Canvas 节点      
}  
})

注意：由于 this.refs.[refName] 属性获取的是真实 DOM ，所以必须等到虚拟 DOM 插入文档以后，才能使用这个属性，否则会报错。