筑基-React 常用的生命周期

生命周期

/*
        一、挂载时
            挂载前 constructor
            render
            挂载后 componentDidMount
                发起一个ajax 请求
                定时器
        二、更新时
            render
            DidUpdate
        三、卸载时
            componentWillUnmount
            清定时  取消ajax请求  abort
            axios

        https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
        一、挂载
        1、constructor()  挂载前：初始化state 和为事件处理函数绑定实例
        2、render()
        3、DidMount() 挂载后：（插入 DOM 树中）立即调用，定时器，请求
        componentDidMount() 方法会在组件已经被渲染到 DOM 中后运行
        二、更新
        1、render() props 和state 变化 时
        2、componentDidUpdate() 组件更新时调用
            同样可以发起ajax 请求，但需要约束某种条件或符合某种条件
        三、卸载 当组件从 DOM 中移除(组件卸载及销毁之前)时会调用
        1、componentWillUnmount()
        清定时器、取消ajax请求，
    **/
    在之前我们已经在使用 render didmount constructor 
    我们新增了 更新 以及卸载
    这里面还有shoud，这个主要是针对性能优化的。
    
    生命周期具体哪个周期执行什么事我们在上面已经介绍 
    下面我们要看的就是具体执行顺序
    
    render 需要特别注意
    初始化后执行一次
    有state 和 props 更换还会执行一次
    
    所以我们针对ajax 请求 后setState 的
    
    在render 中都会做一次判断过滤掉第一次
    
    比如 
    {
        lists.lenght!==0
        ?
        this.listFn(lists)
        :
        ''
    }
    
    

新增一个页面

react/first-react/src/App.js

1引入
import Lifecycle from './views/Lifecycle';
2使用
<Lifecycle/>

全部代码

react/first-react/src/views/Lifecycle/index.jsx


react/first-react/src/views/Lifecycle/index.jsx
import React, { Component } from 'react';

import Child from './Child.jsx';

class View extends Component {
    constructor(props){
        super(props);
        this.state = {
            name:'小明',
            age:18,
            timer:null
        }
        console.log('constructor')
    }
    componentDidMount(){
        console.log('componentDidMount')
        this.setState({
            name:'小红'
        })
this.state.timer = setInterval(()=>{
    this.setState((state,props)=>({
        age:state.age+1
    }))
},1000)
    }
    componentDidUpdate(prevProps,prevState){
        console.log('componentDidUpdate')
        console.log(prevProps)
        console.log(prevState)
        console.log(this.state)
        if(prevState.age>=19){
            clearInterval(this.state.timer);
        }
        // clearInterval
        // this.setState({
        //     age:27
        // })
    }
    render(){
        console.log('render')
        let {name,age} = this.state;
        return(
            <div>
                <h3>生命周期</h3>
                姓名：{name}
                年龄：{age}
                <Child/>
            </div>
        )
    }
}
export default View;

react/first-react/src/views/Lifecycle/Child.jsx
import React, { Component } from 'react';

class View extends Component {

    componentDidUpdate(){
        console.log('子组件update')
    }
    componentDidMount(){
        console.log('子组件didMount')
    }
    componentWillUnmount(){
        // 
    }
    render(){
        console.log('子组件render')
        return(
            <div>
            这是子组件
            </div>
        )
    }
}
export default View;