React生命周期

生命周期

初始化

+ Initial

+ GetDefaultProps

+ GetInitialState

+ ComponentWillMount

+ Render

+ ComponentDidMount

组件最初渲染时,最先调用的两个方法是getDefaultPropsgetInitialState ,这两个方法在渲染组件前只调用一次。

getInitialState 方法设置了state的初始值,在组件内可以通过this.state获取。

getInitialState: function(){
    return { /* something here */};
}

getDefaultProps用来设置默认的props,这个方法在类创建时调用一次,会和父组件传递的props合并成一个对象,然后被缓存起来。可以通过this.props获取。

getDefaultProps: function(){
    return { /* something here */};
}

另外两个只在组件初始化时调用的函数:componentWillMount和componentDidMount。

componentWillMount

在render方法前调用,在该方法中设置state将不会触发重新渲染(re-rendering)。

render

创建虚拟DOM,方法返回一个组件(只能出现一个顶级组件),或者null,或者false(不渲染任何东西)。需要注意的是,render函数应该是*纯粹*的,无论props还是state的值都不应在这个函数中修改,每次该方法调用时返回的应是同样的结果。

componentDidMount

render方法执行之后调用。componentDidMount方法在客户端调用(而不是服务器端),子组件的这个方法调用早于父组件的。这个方法中可以访问DOM,任何DOM交互都应发生在这个时期,而不是在render中。如果需要使用其他js框架,可以在这个方法中用setTimeout或者setInterval设置定时器,或者发送ajax请求。

state改变

+ Updating State

+ ShouldComponentUpdate

+ ComponentWillUpdate

+ Render

+ ComponentDidUpdate

shouldComponentUpdate

在render方法前调用,返回一个布尔值来决定是否需要渲染新的state和props(减少不必要的re-rendering来提升性能(ง •_•)ง)。首次渲染时不会调用这个方法。

shouldComponentUpdate: function(nextProps, nextState){
    // return a boolean value
    return true;
}

componentWillUpdate

如果shouldComponentUpdate方法返回true,之后会调用这个方法。它接收新的state和props,处理状态改变,而不是触发改变,所以不能在这里使用this.setState方法,不应该在该方法中修改state或props。

componentWillUpdate: function(nextProps, nextState){
    // perform any preparations for an upcoming update
}

componentDidUpdate

在render方法后调用,和componentDidMount类似,可以用来在数据更新后执行一些DOM操作。

componentDidUpdate: function(prevProps, prevState){
    // 
}

props改变

和state类似。

+ Updating Props

+ ComponentWillRecieveProps

+ ShouldComponentUpdate

+ ComponentWillUpdate

+ Render

+ ComponentDidUpdate

componentWillReceiveProps

只在props改变、并且不是初次渲染组件时候调用,可以在这个方法中改变state。(注意state并没有啥类似的方法,是state的改变来触发props的变化)

componentWillReceiveProps: function(nextProps) {
  this.setState({
    // set something 
  });
}

中间的跟上面state一样...

组件销毁 unmounting

+ Unmounting

+ componentWillUnmount

componentWillUnmount

在组件从DOM中移除时调用。可以在这里清除一些操作,比如清掉定时器之类的。

参考:

Component Specs and Lifecycle

Understanding the React Component Lifecycle

Comments
Write a Comment