react生命周期

react生命周期主要有 三个阶段

挂载期：一个组件实例初次被创建的过程。
更新期：组件在创建后再次渲染的过程。
卸载期：组件在使用完后被销毁的过程。

挂载阶段

• 01 constructor 构造函数

   static getDerivedStateFromProps(nextProps, prevState) {
    // 当组件的props发送变化时候 ,执行回调函数
    // 当props更新用Props更新state
    // console.log("挂载:-02-getDerivedStateFromProps");
    console.log("更新:01-getDerivedStateFromProps")
    return nextProps;
   }

• 02 static getDerivedStateFromProps

 shouldComponentUpdate(nextProps, nextState) {
    console.log("更新:02 组件是否需要更新");
    return true; //通常用做优化组件,返回true更新,false不更新
   }

• 03 render 渲染函数

 render() {
        // console.log("挂载:03-render选项")
        console.log("更新:03-render")
        return ( <div>
            <h1>生命周期</h1>
            <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
        </div> );
    }

• 04 componentDidMount 组件已经挂载

componentDidMount() {
        // console.log("挂载-04 组件已经挂载")
        // 作用:操作dom,发起ajax ,添加事件,开启定时器
    }

更新阶段

• 01 static getDerivedStateFromProps

static getDerivedStateFromProps(nextProps, prevState) {
    // 当组件的props发送变化时候 ,执行回调函数
    // 当props更新用Props更新state
    // console.log("挂载:-02-getDerivedStateFromProps");
    console.log("更新:01-getDerivedStateFromProps")
    return nextProps;
   }

• 02 shouldCompoentUpdate 组件是否更新(返回true才更新)

shouldComponentUpdate(nextProps, nextState) {
    console.log("更新:02 组件是否需要更新");
    return true; //通常用做优化组件,返回true更新,false不更新
   }

• 03 render 渲染

 render() {
        // console.log("挂载:03-render选项")
        console.log("更新:03-render")
        return ( <div>
            <h1>生命周期</h1>
            <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
        </div> );
    }

• 04 getSnapshotBeforeUpdate 更新前获取快照(返回值是componentDidUpdate第三个参数)

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return {name:"mimu",age:17}
    }

• 05 componentDidUpdate 组件已经更新

componentDidUpdate(prevProps, prevState,snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate",snap)
    }

卸载阶段

• 01 componetWillUnmount 组件将要卸载

componentWillUnmount(){
        // console.log("组件将要卸载")
    }

• 实例一个简单生命周期的例子

import React, { Component } from 'react';
class Life extends Component {
    constructor(props) {
        super(props);
        // console.log("挂载-01-constructor");
    }
   static getDerivedStateFromProps(nextProps, prevState) {
    // 当组件的props发送变化时候 ,执行回调函数
    // 当props更新用Props更新state
    // console.log("挂载:-02-getDerivedStateFromProps");
    console.log("更新:01-getDerivedStateFromProps")
    return nextProps;
   }
   shouldComponentUpdate(nextProps, nextState) {
    console.log("更新:02 组件是否需要更新");
    return true; //通常用做优化组件,返回true更新,false不更新
   }
    state = { num:5 }
    render() {
        // console.log("挂载:03-render选项")
        console.log("更新:03-render")
        return ( <div>
            <h1>生命周期</h1>
            <button onClick={()=>this.setState({num:this.state.num+1})}>{this.state.num}</button>
        </div> );
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log("更新:04 getSnapshotBeforeUpdate")
        // 获取组件的快照,在更新前
        // 返回的值是下个生命周期的第单个参数
        return {name:"mimu",age:17}
    }
    componentDidUpdate(prevProps, prevState,snap) {
        // 组件已经更新
        console.log("更新:05componentDidUpdate",snap)
    }
    componentDidMount() {
        // console.log("挂载-04 组件已经挂载")
        // 作用:操作dom,发起ajax ,添加事件,开启定时器
    }
    componentWillUnmount(){
        // console.log("组件将要卸载")
    }
}
 
export default Life;