react 生命调期详解

生命周期

 

 

1、componentWillMount()

2、componentDidmount()

3、ShouldComponetUpdate()

4、componentWillReceiveProps( nextProps)

5、componentWillUpdate()

6、componetDidUpdate(prevProps, prevState)

7、compoentWillUnmount() 清理componentDidMount绑定事件

例如

在componentDidMount里针对window绑定滚动事件

window.addEventListener('scroll', self.scroll)

当组件离开时调用(componentWillUnmount)

window.removeEventListener(‘scroll’, self.scroll)

 

 

 

componentWillMount:

服务器端和客户端都只调用一次，在初始化渲染执行之前立刻调用。如果这个方法内调用setState,render()将会感知道到更新后的state，将会执行仅一次，尽管state改谈到了

 

componentDidMount

在初始化渲染执行后立刻调用一次，仅客户端有效（服务器端不会调用）。在生命周期中的这个时间点，组件拥有一个DOM展示，你可以通过 this.getDomNode()来获取相应的DOM节点

 

componentWillReceiveProps

在组件接收到新的props的时候调用。在初始化渲染的时候，该方法不会调用

用些函数可以作为react在prop传入之后，render()渲染之前更新state的机会，老的 props可以通过this.props获取到。在该函数中调用 this.setState将不会引起第二次渲染

componentWillReceiveProps(nextProps){

This.setState({

likesIncreasing:nextProps.linkCount>this.props.likeCount

})

}

 

shouldComponentUpdate

在接收到新的prorps或者state将要渲染之前调用，该方法在初始化渲染的时候不会调用，在使用forceUpdate方法的时候也不会

如果确定新的props和state不会导致组件更新。则此处应该返回false

如果shouldComponentUpdate返回false，则不会render将不会执行，直到下次state改变（另外 componentWillUpdate和componentdidMount 也不会被调用）

 

componentWillUpdate

在接收到新的props或者state之前立刻调用，在初始化渲染该方法不会被调用

 

componentDidUpdate

在组件的更新已经同步到DOM中之后立刻被调用，该方法会不在初始化渲染的时候调用

使用该方法可以在组件更新之后操作DOM元素

 

注意：

为了兼容 v0.9，DOM 节点会作为最后一个参数传入。如果使用这个方法，你仍然可以使用 this.getDOMNode()来访问 DOM 节点。

移除:componentWillUnmount

在组件从DOM中移除的时候立该被调用

在该方法中执行任何必要的清理。比如无效的定时器，或者清除在componentDidMount中创建的DOM元素