MENU

React学习笔记【12】

第十四节

生命周期

生命周期即是组件从实例化到渲染到最终从页面中销毁的整个过程
在这个生命周期中与很多可以调用的事件,也称为钩子函数

生命周期的3个状态

Mounting

将组件插入到DOM中

Updating

将数据更新到DOM中

Unmounting

将组件移出DOM

生命周期中到钩子函数(方法,事件)

ComponentWillMount

组件将要渲染

  • ajax
  • 添加动画前的类

ComponentDidMount

组件渲染完毕

  • 添加动画

ComponentWillReceive

组件将要接收props数据

  • 查看接收props数据是什么

ShouldComponentUpdate

在组件接收到新的状态state或者props,判断是否要更新。返回布尔值

ComponentWillUpdate

组件将要更新

  • 添加动画
  • 数据请求
  • 发送数据

ComponentDidUpdate

组件更新完毕

ComponentWillUnmount

组件将要卸载

  • 数据提交

本节代码

import React from 'react';
import ReactDOM from 'react-dom';

class ComLife extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            msg: "Hello world"
        }
        console.log("constructor 构造函数");
    }

    render() {
        console.log("render 渲染函数");
        return (
            <div>
                <h1>{this.state.msg}</h1>
                <button onClick={() => { this.setState({ msg: "new Message" }) }}>组件更新</button>
            </div>
        )
    }

    componentWillMount() {
        console.log("componentWillMount 将要渲染");
    }
    componentDidMount() {
        console.log("componentDidMount 渲染完毕");
    }
    componentWillReceiveProps() {
        console.log("componentWillReceiveProps 接收新的状态和props");
    }
    UNSAFE_componentWillUpdate() {
        console.log("UNSAFE_componentWillUpdate 组件将要更新");
    }
    componentDidUpdate() {
        console.log("componentDidUpdate 更新完毕");
    }
    componentWillUnmount() {
        console.log("componentWillUnmount 组件将要移除");
    }
    shouldComponentUpdate(){
        console.log("shouldComponentUpdate");
        //如果希望更新就返回true
        return true;
    }
}

class ParentCom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isShow: true
        }
    }
    render() {
        if (this.state.isShow) {
            return (
                <div>
                    <ComLife />
                    <button onClick={() => { this.setState({ isShow: false }) }}>移除</button>
                </div>)
        } else {
            return (
                <div>
                    <h1>ComLife已移除</h1>
                </div>
            )
        }
    }
}

ReactDOM.render(
    <ParentCom />,
    document.querySelector("#root")
)

文章标题:React学习笔记【12】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/247/

Archives QR Code Tip
QR Code for this page
Tipping QR Code