react生命周期

筅森魡賤 提交于 2019-12-16 13:14:57
import React, {Component} from 'react';

class LifeCycle extends Component {

    // [基本流程]
    // constructor 创建一个组件
    constructor(props) {
        super(props);
        console.log('constructor');
    }
    // componentWillMount 第一次渲染之前
    componentWillMount() {
        console.log('componentWillMount');
    }
    // componentDidMount 第一次渲染之后
    componentDidMount() {
        console.log('componentDidMount');
    }
    // render 第一次渲染
    render() {
        console.log('render');
        return (<div>LifeCycle</div>);
    }

    // [修改流程:当组件的状态数据发生改变时]

    // shouldComponentUpdate 是否允许组件渲染
    shouldComponentUpdate(nextProps, nextState, nextContext) {
    }

    // componentWillUpdate 重新渲染之前
    componentWillUpdate(nextProps, nextState, nextContext) {
    }
    // componentDidUpdate 重新渲染之后
    componentDidUpdate(prevProps, prevState, snapshot) {
    }

    // componentWillReceiveProps 父组件把传递给子组件的的属性发生改变后触发的钩子函数
    componentWillReceiveProps(nextProps, nextContext) {
    }
    
    // [销毁]
    
    // componentWillUnmount 卸载组件
    componentWillUnmount() {
    }
}

export default LifeCycle;
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!