React基础-生命周期

React中的生命周期--分为三大部分
<h3>1-实例化/挂载阶段</h3>

constructor() 进行构造初始化 接收props和context使用这两个参数必须在内部使用super()传入对应参数

UNSAFE_componentWillMount() 数据已经初始化完成,还没渲染到dom上

render() 渲染阶段,这里会通过jsx进行创建虚拟dom并返回,这里通常会访问到props和state并且决定该如何渲染到页面.另外这里是不应该调用setState()的.

componentDidMount() 数据已经渲染挂载完成,一般在这里发送请求
<h3>2-存在期/更新期</h3>

componentWillReceiveProps (nextProps) 接收一个参数nextProps,props传递给Component实例时，将调用此方法,通常用于对比新旧数据后进行this.state的处理

shouldComponentUpdate(nextProps, nextState) 可以查看当前和新的props＆state，并选择是否继续前进,从而防止不必要的渲染,相当于一个拦截,必须返回一个布尔值

componentWillUpdate(nextProps和nextState) 一旦确定需要在更新阶段重新渲染componentWillUpdate就会调用。相当于数据更新前执行的函数,是我们处理配置更改并为下一次渲染做准备的时机

render 再次进行数据的渲染 每次数据更新都会使用react的diff算法对比更新前后的dom树,并且重新渲染

componentDidUpdate(prevProps, prevState) 数据更新后,重新渲染完成后执行,prevProps, prevState就是更新前的props和state.componentDidUpdate在初始化render的时候不会执行, 这里需要谨慎的使用setState避免死循环

<h3>3-销毁期</h3>

componentWillUnmount () 在此处完成组件的卸载和数据的销毁。一般需要在这里销毁定时器,事件监听等

00.png

import React, { Component } from 'react'
import Apps3 from './apps3';
export default class apps2 extends Component {
    constructor(p){
        super(p)
        this.state={
            title:'原始的标题',
            ChildTitle:'好日子'
        }
        console.log('1-构造初始化的函数');
    }
    changeTitle(){
        this.setState({
            ChildTitle:'无敌好日子'
        })
    }
    change(){
        this.setState({
            title:'新的标题'
        })
    }
    UNSAFE_componentWillMount(){
        console.log('2-准备渲染')
    }
    componentDidMount(){
        console.log('4-已经渲染完成')
    }
    render(){
        console.log('3-渲染阶段 /2-3更新渲染');
        
        return(
            <div>
    <h1>{this.state.title}</h1>
                <button onClick={this.change.bind(this)}>按钮</button>
                <button onClick={this.changeTitle.bind(this)}>改变子组件标题</button>
                <Apps3 title={this.state.ChildTitle}></Apps3>
            </div>
        )
    }
    shouldComponentUpdate(nextProp,nextState){
        console.log(nextState)
        console.log(nextProp)
        console.log('2-1更新阶段-询问可否更新')
        return this.state.title !== nextState
    }
    UNSAFE_componentWillUpdate(){
        console.log('2-2更新阶段-数据准备更新')
    }
    componentDidUpdate(){
        console.log('2-4-更新阶段,数据已经更新并渲染完成')
    }
  

}