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的时候调用。在初始化渲染的时候,该方法不会调用

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

componentWillReceiveProps(nextProps){

This.setState({

likesIncreasing:nextProps.linkCount>this.props.likeCount

})

}

 

shouldComponentUpdate

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

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

如果shouldComponentUpdate返回false,则不会render将不会执行,直到下次state改变(另外 componentWillUpdatecomponentdidMount 也不会被调用)

 

componentWillUpdate

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

 

componentDidUpdate

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

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

 

注意:

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

移除:componentWillUnmount

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

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

 

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xtaydwxf1988/article/details/80333417
个人分类: 前端 react
上一篇create-react-app antd mobx 以及按需加载
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭