react的生命周期

挂载阶段的组件生命周期

我们将reactjs组件渲染并构造DOM元素然后塞入页面的过程称为组件的挂载, 我们知道在reactjs内部对于每个组件都有一个初始化组件---->挂载到界面的过程,所以一个组件的调用可以像这样理接

constructor()
render()
//构造DOM节点并插入页面

但是为了更好的掌控组件的挂载,reactjs又新增了两个方法

constructor()
componentWillMount()
render()
//构造DOM节点并插入页面
componentDidMount()

componentWillMount()这个方法实在组件挂载之前调用,而componentDidMount是在组件挂在完成之后调用。
当然组价既然可以挂载,那就可以删除,而方法componentUnMount就是在组件删除之前调用的

constructor()
componentWillMount()
render()
//构造DOM节点并插入页面
componentDidMount()
componentUnMount()

那么这些生命周期函数都有什么用呢

  • constructor,这个函数可以用于对一些变量的初始化,及一些方法的绑定
  • componentWillMount,这个函数用于页面渲染之前,因此我们可以在其中进行一些诸如ajax请求的发送,定时器的开启等操作
  • componentdDidMount,因为这个函数执行的时候组价已经挂载完毕,因此可以再其中进行动画操作等
  • componentUnMount这个函数运行与组件被删除时,我们可以在其中进行一些数据的删除,如定时器

更新阶段的组件生命周期

  • 我们知道的是在State发送改变的时候组件也会重新渲染,此时又会产生新的生命周期
shouldComponentUpdate(nextProps, nextState):你可以通过这个方法控制组件是否重新渲染。如果返回 false 组件就不会重新渲染。这个生命周期在 React.js 性能优化上非常有用。

componentWillReceiveProps(nextProps):组件从父组件接收到新的 props 之前调用。

componentWillUpdate():组件开始重新渲染之前调用。

componentDidUpdate():组件重新渲染并且把更改变更到真实的 DOM 以后调用。
  • 需要注意的是这些函数在第一次渲染时不会调用
  • 还需注意的是不要在componentWillUpdate里面改变state,否则会陷入死循环
  • 至于具体使用环境请在实际开发中探索

你可能感兴趣的:(react的生命周期)