销毁期

componentWillUnmount

每当 React 使用完一个组件，这个组件必须从 DOM 中卸载后被销毁，此时 componentWillUnmout 会被执行，完成所有的清理和销毁工作，在 conponentDidMount 中添加的任务都需要再该方法中撤销，如创建的定时器或事件监听器。

当再次装载组件时，以下方法会被依次调用：

• getInitialState
• componentWillMount
• render
• componentDidMount

当组件要被挂载时这个函数被调用。这意味着我们可以在此运行组件功能必须的代码。为由于 render 在组件生命周期里被多次调用，我们一般会把只需要执行一次的代码放在这里，比如 XHR 请求。

var ExampleComponent = React.createClass({
componentWillMount: function () {
// xhr request here to get data
},
render: function () {
// this gets called many times in a components life
return (
<div> 
Hello World!
</div>
);
}
});

反模式

在 getInitialState 方法中，尝试通过 this.props 来创建 state 的做法是一种反模式。

//反模式getDefaultProps: function(){    
return {          
data: new Date()      
}  
},  
getInitialState: function(){    
return {          
day: this.props.date - new Date()      
}  
},  
render: function(){    
return <div>Day:{this.state.day}</div>}

经过计算后的值不应该赋给 state，正确的模式应该是在渲染时计算这些值。这样保证了计算后的值永远不会与派生出它的 props 值不同步。

//正确模式getDefaultProps: function(){    
return {          
data: new Date()      
}  
},  
render: function(){    
var day = this.props.date - new Date();    
return <div>Day:{day}</div>}

如果只是简单的初始化 state，那么应用反模式是没有问题的。