挂载阶段的组件生命周期
我们将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,否则会陷入死循环
- 至于具体使用环境请在实际开发中探索