React常用生命周期

一、生命周期调用顺序

1. 挂载

• constructor()
• render()
• componentDidMount()

2. 更新

• render()
• componentDidUpdate()

3. 卸载

• componentWillUnmount()

image.png

二、详解生命周期函数

1. construcor()

• 挂载之前调用，子类调用是须在其他语句之前调用super(props)

• 构造函数的调用情况：

• 需要通过this.state复制对象来初始化内部state

• 为事件函数绑定实例

• 注意：

• 在构造函数中不得使用setState()方法复制

    constructor(props){
        super(props)
        // 不要在这里调用 this.setState()
        this.state = { counter: 0 };
        this.handleClick = this.handleClick.bind(this);
    }

• 避免将 props 的值复制给 state！

2. componentDidMount()

• 组件挂载后调用，依赖DOM节点的初始化应该在此函数中执行，网络请求大多也在次函数中，进行数据初始化
• 次函数可调用setState()方法
• 只要进入页面就会调用该函数
• 适合添加订阅，但不要忘记在componentWillUnmount取消

3. render()

• render()方法是class组件唯一必须实现的方法

• 调用render时，检测this.props和this.state的变化并返回：

• React元素

• 数组或fragment

• protals

• 字符转或数值类型

• 布尔类型或null

• render()不与浏览器直接交互

4. componentDidUpdate()

• 只要页面的state或者model中的state中定义的变量值发生改变，这个方法就会执行，首次渲染不执行，首次渲染不执行
• 例如：在componentDidUpdata()中对originLength的监听从而达到上传或删除的操作

image.png

• 当组件更新后可在此函数中进行DOM操作或网络请求

    componentDidUpdate(prevProps){
        //典型用法，判断props
        if(this.props.userId !== prevProps.userId){
            this.fetchData(this.props.userId)
        }
    }

• 可直接调用setState() ，但必须包裹在条件语句中，否则会造成死循环

5. componentWillUnmount()

• 此函数会在组件卸载及销毁前调用，可执行必要的清理操作，例如定时器，取消请求，清除订阅
• 此函数中不应再调用setState()，因为该组件永远不再重新渲染了