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

Bertha 。 2023-10-06 20:50 26阅读 0赞

#### React16 基础 ####

*  阐述
 *  componentWillUnmount 函数
 *  demo
 *   *  新建 \`index.js\`
     *  新建 \`Beauty.js\`
     *  新建 \`BeautyItem.js\`
     *  预览

## 阐述 ##

其实本篇算是一个小的补充，把最后一个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(<App />,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  (
            <Fragment>
                {
        /* 正确注释的写法 */}
                <div>
                    <label htmlFor="willem">加入服务：</label>
                    <input 
                    id="willem" 
                    className="input" 
                    value={
        this.state.inputValue} 
                    onChange={
        this.inputChange.bind(this)}
                    //关键代码——----------start
                    ref={
        (input)=>{
        this.input=input}}
                    //关键代码------------end
                    />
                    <button onClick={
        this.addList.bind(this)}> 增加服务 </button>
                </div>
                <ul>
                    {
        
                        this.state.list.map((item,index)=>{
        
                            return (
                                <BeautyItem 
                                key={
        index+item}  
                                content={
        item}
                                index={
        index}
                                deleteItem={
        this.deleteItem.bind(this)}
                                />
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    
        // 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 ( 
                <div onClick={
        this.handleClick}>
                    {
        this.props.avname} 为你做- {
        this.props.content}
                </div>
            );
        }
        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;

### 预览 ###

![在这里插入图片描述][bba7362c8712404bbdb138171ffbf810.gif_pic_center]

[bba7362c8712404bbdb138171ffbf810.gif_pic_center]: https://img-blog.csdnimg.cn/bba7362c8712404bbdb138171ffbf810.gif#pic_center