P20:React高级-生命周期讲解 componentWillUnmount（三）

阐述

其实本篇算是一个小的补充，把最后一个React的生命周期函数讲一下，这个生命周期函数就是 componentWillUnmount，它是在组件去除时执行。

componentWillUnmount 函数

这个函数时组件从页面中删除的时候执行，比如在 BeautyItem.js，写入下面的代码:

//当组件从页面中删除的时候执行
componentWillUnmount(){
    console.log('child - componentWillUnmount')
}

写完后，可以到浏览器终端中查看结果，当我们点击服务项，服务项被删除时，这个函数就被执行了。

demo

创建一个 React 项目

D:  //进入D盘

mkdir ReactDemo           //创建ReactDemo文件夹
create-react-app demo01   //用脚手架创建React项目
cd demo01                 //等创建完成后，进入项目目录
npm start                 //预览项目，如果能正常打开，说明项目创建成功

清空 src 目录

$ ls -al
total 1793
drwxr-xr-x 1 Administrator 197121       0 12月  7 11:32 ./
drwxr-xr-x 1 Administrator 197121       0 12月  7 11:31 ../
drwxr-xr-x 1 Administrator 197121       0 12月  7 11:32 .git/
-rw-r--r-- 1 Administrator 197121     310 12月  7 11:31 .gitignore
drwxr-xr-x 1 Administrator 197121       0 12月  7 11:34 node_modules/
-rw-r--r-- 1 Administrator 197121     809 12月  7 11:32 package.json
-rw-r--r-- 1 Administrator 197121 1481475 12月  7 11:32 package-lock.json
drwxr-xr-x 1 Administrator 197121       0 12月  7 11:32 public/
-rw-r--r-- 1 Administrator 197121    3369 12月  7 11:31 README.md
drwxr-xr-x 1 Administrator 197121       0 12月 10 17:38 src/

Administrator@DESKTOP-BT1MKQ3 MINGW64 /d//ReactDemo/demo01 (master)

d/ReactDemo/demo01/src/ 目录下

新建 index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './Beauty'
ReactDOM.render(,document.getElementById('root'))

新建 Beauty.js

import React,{Component,Fragment } from 'react'
import BeautyItem from './BeautyItem'

class Beauty extends Component{
//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:['基础按摩','精油推背']    //服务列表
    }
}

shouldComponentUpdate(){
    console.log('shouldComponentUpdate---组件发生改变前执行')
    return true
}

componentWillUpdate(){
    console.log('componentWillUpdate---组件更新前，shouldComponentUpdate函数之后执行')
}

render(){
    return  (
        
            {/* 正确注释的写法 */}
            
                加入服务：
                {this.input=input}}
                //关键代码------------end
                />
                 增加服务 
            
            
                {
                    this.state.list.map((item,index)=>{
                        return (
                            
                        )
                    })
                }
            
        
    )
}

    // inputChange(e){
    //     // console.log(e.target.value);
    //     // this.state.inputValue=e.target.value;
    //     this.setState({
    //         inputValue:e.target.value
    //     })
    // }

    inputChange(){
        console.log(this.input.value);
        this.setState({
            inputValue:this.input.value
        })
    }
    
    //增加服务的按钮响应方法
    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue],
            inputValue:''
        })

    }
   //删除单项服务
   deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
}

}
export default Beauty

新建 BeautyItem.js

import React, { Component } from 'react'; //imrc
import PropTypes from 'prop-types'

class BeautyItem extends Component { //cc
   //--------------主要代码--------start
   constructor(props){
       super(props)
       this.handleClick=this.handleClick.bind(this)
   }

   componentWillUnmount(){
        console.log('child - componentWillUnmount')
    }

   //--------------主要代码--------end
   render() { 
        return ( 
            
                {this.props.avname} 为你做- {this.props.content}
            
        );
    }
    handleClick(){
        console.log(this.props.index)
        this.props.deleteItem(this.props.index)
    }
}

BeautyItem.defaultProps = {
    avname:'苍井空'
}


//--------------主要代码--------start
BeautyItem.propTypes={
    content:PropTypes.string,
    deleteItem:PropTypes.func,
    index:PropTypes.number,
    avname:PropTypes.string.isRequired
}
//--------------主要代码--------end

export default BeautyItem;

预览