组件的生命周期
React严格定义了组件的生命周期,生命周期可能会经历如下三个过程
- 装载过程(Mount),也就是把组件第一次在DOM树中渲染的过程
- 更新过程(Update),当组件被重新渲染的过程
- 卸载过程(Unmount),组件从DOM中删除的过程
装载过程
- constructor
- getInitialState
- getDefaultProps
- componentWillMount
- render
- componentDidMount
1.constructor
不是每个组件都需要定义自己的构造函数,无状态的React组件往往不需要定义构造函数,一个React组件需要构造函数,往往为了以下目的:
- 初始化state,因为组件生命周期中任何函数都可能访问state,那么整个生命周期中第一个被调用的构造函数自然是初始化state最理想的地方。
- 绑定成员函数的this环境。
eg:
this.onClickButton = this.onClickButton.bind(this)
2.getInitialState和getDefaultProps
getInitialState这个函数返回值用来初始化组件的this.state
getDefaultProps函数的返回值可以作为props的初始值,和getInitialState一样,在React.createClass方法创造的组件类中才会用到。eg:
class Sample = React.createClass({
getInitialState: function() {
return {foo: 'bar'};
},
getDefaultProps: function() {
return {sampleProp: 0};
}
})
现在用ES6,在构造函数中通过给this.state赋值完成状态的初始化,通过给类属性(注意是类属性,而不是类的实例对象属性)defaultProps赋值指定的props初始值,达到的效果完全一样
class Sample extends React.Component {
constructor(props) {
super(props);
this.state = {foo: 'bar'};
}
}
Sample.defaultProps = {
return {sampleProp: 0}
}
ps: React.createClass已经被Facebook官方逐渐废弃...
3.render
render函数无疑是React组件中最重要的函数,一个React组件可以忽略其他所有函数都不实现,但一定给要实现render函数,因为所有React组件的父类React.Component类对除render之外的生命周期函数都有默认实现。
render函数并不做实际的渲染动作,它只是返回一个JSX描述的结构,最终由React来操作渲染过程。
有时候特殊作用不是渲染,就让render函数返回一个null或false,从而表达这个函数不需要渲染任何DOM元素。
需注意,render函数应该是一个纯函数,完全更加this.state和this.props来决定返回的结果,而且不要产生任何副作用。
4.componentWillMount和componentDidMount
在装载过程中,componentWillMount会在调用render函数之前被调用,componentDidMount会在调用render函数之后被调用。
我们通常不定义componentWillMount函数,它做的事可以提前到constructor中间去做。
而相对比componentDidMount的作用大,render函数被调用完之后,componentDidMount函数并不是会被立即调用,componentDidMount被调用的时候,render函数返回的东西已经引发渲染,组件已被“装载”到DOM树上。只有React调用组件的render函数之后,才有可能完成装载,这时候才会依次调用各个组件的componentDidMount函数作为装载过程的收尾。
他们这对函数还有一个区别,componentWillMount可以在服务器端被调用,也可以在浏览器端被调用。而componentDidMount只能在浏览器端被调用,在服务器端使用React的时候不会被调用。