zl程序教程

您现在的位置是:首页 >  工具

当前栏目

组件生命周期

组件 生命周期
2023-09-11 14:16:32 时间

只有类组件才有生命周期

常用钩子函数:

一、创建时的钩子函数

1、constructor 

触发时机:组件创建时

作用:初始化state 、为事件处理程序绑定this

2、render

触发时机:渲染时,更新时 

作用:渲染此函数的返回值,此时不能操作DOM ,也注意不要调用setState (会导致循环调用)

3、componentDidMount

触发时机:组件挂载完成后

作用:发送网络请求、操作DOM

二、更新时

导致组件更新的情况:

接收到新的 props、setState、forceUpdate

1、render

2、componentDidUpdate

触发时机:组件更新渲染后

作用:发送网络请求、操作DOM。如果想调用setState,需要放在if条件语句中,否则会导致循环调用,if条件一般是比较preProps和this.props的相关内容。

componentDidUpdate(prevProps){
    if(prevProps.num !== this.props.num){
        //this.setState({})
        //发送ajax请求,并setState
        //修改DOM
    }
}

三、卸载前

1、componentWillUNmount

触发时机:组件卸载前

作用:清理工作,如清除计时器等

 一些不常用的:

shouldComponentUpdate 等