React的生命周期函數(shù)初始掛載更新移除詳解
概述
在React中，生命周期函數(shù)指的是組件在某一個時刻會自動執(zhí)行的函數(shù)
constructor
在類或組件創(chuàng)建的時候被自動執(zhí)行，我們可以說它是生命周期函數(shù)，但它并不是React所特有的，所有的Es6對象都有這個函數(shù)，所以并不能說它是React的生命周期函數(shù)
初始
當數(shù)據(jù)發(fā)生變化時，render函數(shù)會被自動執(zhí)行，符合我們對React生命周期函數(shù)的定義，所以它是React的生命周期函數(shù)，但在初始階段，并不會有任何的React生命周期函數(shù)被執(zhí)行，但會執(zhí)行constructor構造函數(shù)，進行組件數(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掛載
頁面掛載階段，UNSAFE_componentWillMount 頁面即將render掛載在html前執(zhí)行，以前叫做componentWillMount但React團隊認為這些生命周期函數(shù)經(jīng)常被誤解和巧妙的濫用，會帶來潛在的問題，所以為他們加上了UNSAFE_前綴，當然這里的不安全不是指安全性，而是表示使用這些周期函數(shù)在未來的React版本中更有可能出現(xiàn)錯誤。
即將掛載的函數(shù)執(zhí)行完畢，會進行渲染掛載render，之后會執(zhí)行componentDidMount函數(shù)，我們可以把完成掛載后的邏輯寫在這個函數(shù)上。記住，只有組件第一次渲染頁面才會執(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ā)生變化，頁面會重新渲染。
state會在更新前先執(zhí)行shouldComponentUpdate生命周期函數(shù)，這個函數(shù)比較特殊，它需要有一個返回值，true或者false，控制頁面是否需要重新重新渲染，如果僅僅是數(shù)據(jù)發(fā)生變化，我們可以返回false，那么之后的生命周期函數(shù)都不會執(zhí)行，這樣可以有效的提升我們組件更新的效率。
返回true后，會執(zhí)行UNSAFE_componentWillUpdate函數(shù)做更新前的準備，在執(zhí)行render進行頁面的重新渲染，渲染完畢后執(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 DemocomponentWillReceiveProps生命周期函數(shù)，只有一個組件接收props或者說當一個組件是子組件接收props的時候，它才會被執(zhí)行，所以我們需要定義一個子組件接收父組件傳值
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')
}
//組件從頁面中移除前自動執(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;當子組件接收參數(shù)發(fā)生變化時，就會執(zhí)行componentWillReceiveProps函數(shù)，然后執(zhí)行shouldComponentUpdate函數(shù)，返回值為true時依次執(zhí)行componentWillUpdate，render，componentDidUpdate
移除
當組件從頁面移除時自動執(zhí)行componentWillUnmount函數(shù)，我們先定義一個路由
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組件跳轉到list組件，button從頁面移除時可觀察到自動執(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>
);
}
//組件從頁面中移除前自動執(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í)行結果
以上就是React的生命周期函數(shù)初始掛載更新移除詳解的詳細內容，更多關于React 生命周期函數(shù) 的資料請關注腳本之家其它相關文章！
相關文章
在開發(fā)過程中，總是遇到很多列表的顯示。當上數(shù)量級別的列表渲染于瀏覽器，終會導致瀏覽器的性能下降，你可以選擇其他方式避免，本文就介紹了虛擬列表來解決這個問題2021-05-05
Remix后臺開發(fā)之remix-antd-admin配置過程
這篇文章主要為大家介紹了Remix后臺開發(fā)之remix-antd-admin配置過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
redux的核心概念其實很簡單：將需要修改的state都存入到store里，發(fā)起一個action用來描述發(fā)生了什么，用reducers描述action如何改變state tree，這篇文章主要介紹了Redux thunk中間件及執(zhí)行原理分析2022-09-09
這篇文章主要為大家詳細介紹了react native之ScrollView下拉刷新效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
基于React.js實現(xiàn)兔兔牌九宮格翻牌抽獎組件
這篇文章主要為大家詳細介紹了如何基于React.js實現(xiàn)兔兔牌九宮格翻牌抽獎組件，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2023-01-01
useEffect是React中的一個鉤子函數(shù),用于處理副作用操作,這篇文章主要為大家介紹了React中useEffect函數(shù)的具體用法,希望對大家有所幫助2023-08-08
解決React報錯`value` prop on `input` should&
這篇文章主要為大家介紹了React報錯`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
Hooks?發(fā)布之后，函數(shù)組件能擁有自己的?state，React提供了很多內置的Hooks，這篇文章就來和大家介紹一下useState?和?useEffect的使用，需要的可以參考一下2023-06-06
webpack是一個前端資源模塊化管理和打包工具，說白了就是方便我們管理自己的常用的一些代碼，比如你開發(fā)中用到sass以及jade同時用到es6，開發(fā)時你不可能改動某個地方就挨個命令去轉換再到瀏覽器去看效果，那樣效率是非常低的。所以webpack幫我們省去了那些多余的步驟。2017-02-02
Class組件和Function組件是React中創(chuàng)建組件的兩種主要方式,本文主要介紹了React class和function的區(qū)別小結,具有一定的參考價值,感興趣的可以了解一下2023-10-10