React初级的生命周期

组件的生命周期

每个组件都包含“生命周期方法”，你可以重写这些方法，以便于在运行过程中特定的阶段执行这些方法。

创建一个父组件，和子组件来比较

//父组件
import React, { Component } from 'react'

export default class Parent extends Component {
    constructor(){ 
         super()
        // 挂载时最先执行
        console.log("parent  constructor")
    }
    render() {
    //之后执行render
        console.log("parent render")
        return (
            <div id="app">
            </div>
        )
    }
}

更新时

修改state的值时，render重新执行

import React, { Component } from 'react'

export default class Parent extends Component {
    constructor(){
        super();
        // 最先执行
        this.state={
            count:1
        }
        console.log("parent  constructor")
    }
    render() {
        console.log("parent render")
        return (
            <div id="app">
            {
                this.state.count

            }
            //count传给子组件
            <Child count={this.state.count}></Child>
            </div>
        )
    }

    componentDidMount(){
    //一般可以在在这里面发ajax请求
        setTimeout(()=>{
            this.setState({
                count:this.state.count +1
            })
        },2000) 
    }
}

//

定义一个子组件，改变状态时也会执行

import React, { Component } from 'react'

export default class Child extends Component {
    render() {
    console.log('child render)
        return (
            <div>
                child {this.props.count}
            </div>
        )
    }
}
//打印次序
//parent constructor ; parent render
//child render ;parent render;chhild render

componentDidMount 一般可以发ajax请求

return (
            <div id="app">
            {
                this.state.count
            }
            </div>
        )
-----------
componentDidMount(){
        this.setState({
            count:2
        })
        //拿到页面之前的内容
        //内容依然是1，不是2
        console.log(document.getElementById("app").innerHTML)
    }

//类似于Vue里面nextTick(()=>{})
componentDidUpdate(){
        console.log(document.getElementById("app").innerHTML)

    }
    //得到更新后的数据

一般用于子组件的getDerivedStateFromProps，接受父组件传过来的属性

import React, { Component } from 'react'

export default class Child extends Component {
    constructor(){
        super();
        this.state={
            name:'lvyib'
        }
    }
    static getDerivedStateFromProps(props,state){
    //必须在constructor定义state,钩子函数里面必须要有返回值
    //props是父组件传来的，state是自己组件的state
        console.log(props,state)
        return {
        //可以把父组件传来的值转化为状态
            ...state,
            ...props
        }
    }
    render() {
        return (
            console.log("child"),
            <div>
            //这就可以直接用this.state来用
                child {this.state.count}{this.state.name}
            </div>
        )
    }
}

当强制更新时重新执行render
this.forceUpdate();拿到最新数据

卸载

import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    constructor(){
        super();
        // 最先执行
        this.state={
            showChild:true
        }

    }
    render() {
       return (
            <div id="app">
           {
                this.state.showChild?<Child count={this.state.count}></Child>:<h1>子组件为展示</h1>
            }
            
            <button onClick={()=>this.handleShow()}>显示隐藏子组件</button>

            </div>
        )
    }
    handleShow(){
        this.setState({
            showChild:!this.state.showChild
        })
    }

//---------------------------------
import React, { Component } from 'react'

export default class Child extends Component {
    constructor(){
        super();
        this.state={
            name:'lvyib'
        }
    }
    render() {
        return (
            console.log("child render"),
            <div>
            我是子组件
                child {this.state.count}{this.state.name}
            </div>
        )
    }
    componentDidMount(){
        this.timer=setTimeout(()=>{
            
        },5000)
    }
    componentWillMount(){
        console.log("componentWillMount")
    }
}

import React, { Component } from 'react'
import Child from './Child'
export default class Parent extends Component {
    constructor(){
        super();
        // 最先执行
        this.state={
            count:1
        }
    }
    render() {
        console.log("parent render")
        return (
            <div id="app">
            {
                this.state.count

            }>
            <button onClick={this.handleIncrement}>更新</button>
            </div>
        )
    }
//让他更新到5时候不执行
   handleIncrement=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    //阻止执行render
shouldComponentUpdate(){
        if(this.state.count===5){
            return false
        }else{
            return true
        }
    }
}

getSnapshotBeforeUpdate(prevProps,prevState){
        //虚理DOM生成，真实Dom之前
        //返回给componentDidUpdate
        console.log("llll",prevProps,prevState)
        //必须有返回值
        return {
            name:"lvyib"
        }
    }
    componentDidUpdate(prevProps,prevState,sanpshot){
        //要用getSnapshotBeforeUpdate，必须要有componentDidUpdate这个钩子函数
        console.log(sanpshot)//就是getSnapshotBeforeUpdate返回的
    }

在组件初始化阶段会执行

1. constructor 2. static getDerivedStateFromProps() 3. componentWillMount() / UNSAFE_componentWillMount() 4. render() 5. componentDidMount()

更新阶段

props或state的改变可能会引起组件的更新，组件重新渲染的过程中会调用以下方法：

1. componentWillReceiveProps() / UNSAFE_componentWillReceiveProps() 2. static getDerivedStateFromProps() 3. shouldComponentUpdate() 4. componentWillUpdate() / UNSAFE_componentWillUpdate() 5. render() 6. getSnapshotBeforeUpdate() 7. componentDidUpdate()

卸载阶段

componentWillUnmount()

错误处理

componentDidCatch()