React生命周期的基本用法

组件的生命周期可分成三个状态：

• Mounting：已插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：已移出真实 DOM

import React, { Component } from "react"

class Test extends Component {
    constructor(props) {
        super(props);
    }

//在渲染前调用
    componentWillMount() {
        //此时组件刚经历constructor,初始完数据,还未进入render，渲染还未完成，dom还未渲染
    }
//在第一次渲染后调用
    componentDidMount() {
        //此时组件第一次渲染完成，dom节点已经生成
        //可以在这里调用ajax请求，返回数据setState后组件会重新渲染
    }
//在组件接收到一个新的 prop (更新后)时被调用
    componentWillReceiveProps(nextProps) {
        //这个方法在初始化render时不会被调用。
    }
//在组件接收到新的props或者state时被调用
    shouldComponentUpdate(nextProps, nextState) {
        //唯一用于控制组件重新渲染的生命周期，在这里return false可以阻止组件的更新
        //主要用于性能优化					       
        return true;
    }
//在组件接收到新的props或者state但还没有render时被调用
    componentWillUpdate(nextProps, nextState) {
        //组件进入重新渲染的流程
    }
//在组件完成更新后立即调用
    componentDidUpdate(prevProps, prevState) {
        //组件更新完毕后，react只会在第一次初始化成功会进入componentDidmount,之后每次重新渲染后都会进入这个生命周期
    }
    
    render() {
        return (
            <div>
                <h2>It is {this.state.date.toLocaleTimeString()}</h2>
            </div>
        )
    }
//在组件从 DOM 中移除之前立刻被调用
    componentWillUnmount() {
    	//在这里可以进行
        //1.clear你在组建中所有的setTimeout,setInterval
        //2.移除所有组建中的监听 removeEventListener
    }
}
export default Test;

生命周期实例1——时钟

import React, { Component } from "react"

class Test extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            date: new Date()
        };
    }

    componentDidMount() {
        this.timerID = setInterval(() => this.tick(), 1000);
    }
    tick() {
        this.setState({
            date: new Date()
        })
    }

    render() {
        return (
            <div>
                <h2>It is {this.state.date.toLocaleTimeString()}</h2>
                //以本地时间区表示，并根据本地规则格式化。
            </div>
        )
    }

    componentWillUnmount() {
    	//clear定时器
        clearInterval(this.timerID);
    }
}
export default Test;

生命周期实例2

//父组件中
import React, { Component } from "react";
import Child from "./Child";

class Dad extends Component {
    constructor(props) {
        super(props);
        this.state = { data: 0 };
    }

    setNewNumber = () => {
        this.setState({ data: this.state.data + 1 })
    }

    render() {
        return (
            <div>
            	//点击按钮的时候观察生命周期函数什么时候被触发
                <button onClick={this.setNewNumber}>click</button>
                <Child myNumber={this.state.data}></Child>
            </div>
        )
    }
}

export default Dad;

//子组件中
import React, { Component } from "react";

class Child extends Component {
    componentWillMount() {
        console.log('Component WILL MOUNT!')
    }
    componentDidMount() {
        console.log('Component DID MOUNT!')
    }
    componentWillReceiveProps(newProps) {
        console.log('Component WILL RECEIVE PROPS!')
    }
    shouldComponentUpdate(newProps, newState) {
    //这里可以判断一下 如果有不希望更新的组件可以过滤出来return false;
        return true;
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('Component WILL UPDATE!');
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('Component DID UPDATE!')
    }
    componentWillUnmount() {
        console.log('Component WILL UNMOUNT!')
    }

    render() {
        return (
            <div>
                <h3>{this.props.myNumber}</h3>
            </div>
        );
    }
}

export default Child;

运行结果

• 没有点击按钮
  
• 点击按钮