React的生命周期函數(shù)初始掛載更新移除詳解

更新時(shí)間：2022年08月31日 17:15:27 作者：一劍天門(mén)

這篇文章主要為大家介紹了React的生命周期函數(shù)初始掛載更新移除詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

概述

在React中，生命周期函數(shù)指的是組件在某一個(gè)時(shí)刻會(huì)自動(dòng)執(zhí)行的函數(shù)

constructor

在類(lèi)或組件創(chuàng)建的時(shí)候被自動(dòng)執(zhí)行，我們可以說(shuō)它是生命周期函數(shù)，但它并不是React所特有的，所有的Es6對(duì)象都有這個(gè)函數(shù)，所以并不能說(shuō)它是React的生命周期函數(shù)

初始

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，render函數(shù)會(huì)被自動(dòng)執(zhí)行，符合我們對(duì)React生命周期函數(shù)的定義，所以它是React的生命周期函數(shù)，但在初始階段，并不會(huì)有任何的React生命周期函數(shù)被執(zhí)行，但會(huì)執(zhí)行constructor構(gòu)造函數(shù)，進(jìn)行組件數(shù)據(jù)的初始化、

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化數(shù)據(jù)...");
        super(props);
        this.state = {};
    }
    render(){
        return (
            <div>Hello World</div>
        );
    }
}
export default Demo

掛載

頁(yè)面掛載階段，UNSAFE_componentWillMount 頁(yè)面即將render掛載在html前執(zhí)行，以前叫做componentWillMount但React團(tuán)隊(duì)認(rèn)為這些生命周期函數(shù)經(jīng)常被誤解和巧妙的濫用，會(huì)帶來(lái)潛在的問(wèn)題，所以為他們加上了UNSAFE_前綴，當(dāng)然這里的不安全不是指安全性，而是表示使用這些周期函數(shù)在未來(lái)的React版本中更有可能出現(xiàn)錯(cuò)誤。

即將掛載的函數(shù)執(zhí)行完畢，會(huì)進(jìn)行渲染掛載render，之后會(huì)執(zhí)行componentDidMount函數(shù)，我們可以把完成掛載后的邏輯寫(xiě)在這個(gè)函數(shù)上。記住，只有組件第一次渲染頁(yè)面才會(huì)執(zhí)行mount

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化數(shù)據(jù)...");
        super(props);
        this.state = {};
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <div>Hello World</div>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
}
export default Demo

更新

數(shù)據(jù)更新階段，state或props發(fā)生變化，頁(yè)面會(huì)重新渲染。

state會(huì)在更新前先執(zhí)行shouldComponentUpdate生命周期函數(shù)，這個(gè)函數(shù)比較特殊，它需要有一個(gè)返回值，true或者false，控制頁(yè)面是否需要重新重新渲染，如果僅僅是數(shù)據(jù)發(fā)生變化，我們可以返回false，那么之后的生命周期函數(shù)都不會(huì)執(zhí)行，這樣可以有效的提升我們組件更新的效率。

返回true后，會(huì)執(zhí)行UNSAFE_componentWillUpdate函數(shù)做更新前的準(zhǔn)備，在執(zhí)行render進(jìn)行頁(yè)面的重新渲染，渲染完畢后執(zhí)行componentDidUpdate函數(shù)

import React,{Component} from 'react';
class Demo extends Component{
    constructor(props){
        console.log("初始化數(shù)據(jù)...");
        super(props);
        this.handleClickTest = this.handleClickTest.bind(this);
        this.state = {
            number:1
        };
    }
    handleClickTest(){
        const number = this.state.number + 1;
        this.setState({
            number
        });
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <div onClick={this.handleClickTest}>Hello World</div>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
    //更新前執(zhí)行
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
}
export default Demo

componentWillReceiveProps生命周期函數(shù)，只有一個(gè)組件接收props或者說(shuō)當(dāng)一個(gè)組件是子組件接收props的時(shí)候，它才會(huì)被執(zhí)行，所以我們需要定義一個(gè)子組件接收父組件傳值

import React,{Component,Fragment} from 'react';
import Demo2 from './Demo2';
class Demo extends Component{
    constructor(props){
        console.log("初始化數(shù)據(jù)...");
        super(props);
        this.handleClickTest = this.handleClickTest.bind(this);
        this.state = {
            number:1
        };
    }
    handleClickTest(){
        const number = this.state.number + 1;
        this.setState({
            number
        });
    }
    UNSAFE_componentWillMount(){
        console.log('UNSAFE_componentWillMount');
    }
    render(){
        console.log('render');
        return (
            <Fragment>
                <div onClick={this.handleClickTest}>Hello World</div>
                <Demo2 number={this.state.number}/>
            </Fragment>
        );
    }
    componentDidMount(){
        console.log('componentDidMount');
    }
    //更新前執(zhí)行
    shouldComponentUpdate(){
        console.log('shouldComponentUpdate');
        return true;
    }
    UNSAFE_componentWillUpdate(){
        console.log('componentWillUpdate');
    }
    componentDidUpdate(){
        console.log('componentDidUpdate')
    }
    //組件從頁(yè)面中移除前自動(dòng)執(zhí)行
    componentWillUnmount(){
    }
}
export default Demo

子組件Demo2

import React,{Component} from 'react';
class Demo2 extends Component{
    componentWillReceiveProps(){
        console.log('componentWillReceiveProps');
    }
    render(){
        const {number} = this.props;
        return (<div>{number}</div>);
    }
}
export default Demo2;

當(dāng)子組件接收參數(shù)發(fā)生變化時(shí)，就會(huì)執(zhí)行componentWillReceiveProps函數(shù)，然后執(zhí)行shouldComponentUpdate函數(shù)，返回值為true時(shí)依次執(zhí)行componentWillUpdate，render，componentDidUpdate

移除

當(dāng)組件從頁(yè)面移除時(shí)自動(dòng)執(zhí)行componentWillUnmount函數(shù)，我們先定義一個(gè)路由

import React from 'react';
import ReactDom from 'react-dom';
import TodoList from './TodoList';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import ButtonTest from './ButtonTest';
import NewButton from './NewButton';
import Demo from './Demo';
class Entry extends React.Component{
    render(){
        return (
            <BrowserRouter>
                <Routes>
                    {/*{<Route path='/todoList' element={<TodoList/>}/>}*/}
                    {<Route path='/buttonTest' element={<ButtonTest/>}/>}
                    {<Route path='/newButton' element={<NewButton/>}/>}
                    <Route path='/Demo' element={<Demo/>}/>
                </Routes>
            </BrowserRouter>
        )
    }
}
ReactDom.render(<Entry/>,document.getElementById('root'));

從button組件跳轉(zhuǎn)到list組件，button從頁(yè)面移除時(shí)可觀察到自動(dòng)執(zhí)行了componentWillUnmount函數(shù)

import React,{Component} from 'react';
import { Button } from 'antd';
import {Link} from 'react-router-dom';
class NewButton extends Component{
    render(){
        return (
            <Link to='/buttonTest'>
                <Button type="primary">Primary</Button>
            </Link>
        );
    }
    //組件從頁(yè)面中移除前自動(dòng)執(zhí)行
    componentWillUnmount(){
        console.log('componentWillUnmount-----------');
    }
}
export default NewButton;

import React,{Component} from 'react';
import { List, Avatar } from 'antd';
const data = [
    {
        title: 'Ant Design Title 1',
    },
    {
        title: 'Ant Design Title 2',
    },
    {
        title: 'Ant Design Title 3',
    },
    {
        title: 'Ant Design Title 4',
    },
];
class ButtonTest extends Component{
    render(){
        return (
            <List
                itemLayout="horizontal"
                dataSource={data}
                renderItem={item => (
                    <List.Item>
                        <List.Item.Meta
                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                            title={<a  rel="external nofollow" >{item.title}</a>}
                            description="Ant Design, a design language for background applications, is refined by Ant UED Team"
                        />
                    </List.Item>
                )}
            />
        );
    }
}
export default ButtonTest;

執(zhí)行結(jié)果