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

Posted 2022-01-05 wgchen~

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;

预览