1、組件的掛載階段(只會執(zhí)行一次)
讀取props以及初始化state狀態(tài)、自定義屬性以及方法，使用構(gòu)造函數(shù)construct()献汗，加載的時候調(diào)用一次，可以初始化state
import React, {Component} from "react"
export default class Cycle extends Component {
// 1王污、初始化階段[數(shù)據(jù)的掛載罢吃、函數(shù)的定義聲明]
constructor(){
super()
this.state = {
msg:'舊版本的生命周期'
}
}
}
組件將要掛載的時候觸發(fā)的函數(shù)：componentWillMount()
組件加載時只調(diào)用，之后組件更新不再調(diào)用昭齐，整個生命周期只會調(diào)用一次尿招，此時可以去修改狀態(tài)state中的數(shù)據(jù)。
componentWillMount(){
//修改數(shù)據(jù)
}
render()函數(shù)渲染組件
創(chuàng)建虛擬DOM司浪，進(jìn)行diff算法泊业，更新DOM樹都在此時進(jìn)行把沼。
render(){
return (
<>
<h1>{this.state.msg}</h1>
</>
)
}
掛載完成觸發(fā)函數(shù)
render()函數(shù)渲染完組件后觸發(fā)啊易，而且只會觸發(fā)一次，在進(jìn)行服務(wù)端渲染時是不會觸發(fā)的饮睬。
這個生命周期的主要功能類似于window.onload租谈，可以在這個生命周期函數(shù)中去操作DOM，以及去請求后臺的數(shù)據(jù)接口等操作。
componentDidMount(){
// 請求后臺數(shù)據(jù)
// 操作DOM
}
2割去、組件更新階段
父組件改變props傳值時窟却，子組件觸發(fā)數(shù)據(jù)更新函數(shù)componentWillReceiveProps()
// 修改數(shù)據(jù)的生命周期函數(shù)
componentWillReceiveProps(nextProps, nextContent) {
console.log('觸發(fā)數(shù)據(jù)更新函數(shù)：', nextProps, nextContent);
}
是否要更新數(shù)據(jù)時觸發(fā)的函數(shù)：shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState)，要返回bool值呻逆，組件接收到新的props或者state時調(diào)用夸赫，就會更新dom（使用diff算法更新），return false 能阻止更新（不調(diào)用render）
// 是否要更新數(shù)據(jù)觸發(fā)的函數(shù)咖城，返回boolean類型
shouldComponentUpdate(nextProps,nextState){
return false; //設(shè)為false將不再更新dom
}
將要更新數(shù)據(jù)時觸發(fā)的函數(shù)：componentWillUpdate(nextProps, nextState)
組件加載時不調(diào)用茬腿，只有在組件將要更新時才調(diào)用，此時可以修改state
componentWillUpdate(nextProps, nextState){
//組件更新時調(diào)用
}
render()函數(shù)再次重新調(diào)起渲染組件宜雀，此時是更新DOM樹
創(chuàng)建虛擬dom切平，進(jìn)行diff算法，更新dom樹辐董。
數(shù)據(jù)更新完成時觸發(fā)的函數(shù)：componentDidUpdate(nextProps, nextState)
componentDidUpdate(nextProps, nextState){
// 組件更新完成后執(zhí)行的生命周期函數(shù)
}
3悴品、組件卸載階段
組件將要銷毀時觸發(fā)的函數(shù)：componentWillUnmount()
組件渲染之后調(diào)用，只調(diào)用一次简烘，切換頁面時苔严，上個頁面被銷毀時觸發(fā)，卸載過程只涉及一個函數(shù)孤澎，當(dāng)React組件要從DOM樹上刪除前邦蜜，會調(diào)用一次這個函數(shù)。這個函數(shù)經(jīng)常用于去除componentDidMount函數(shù)帶來的副作用亥至，例如清除計時器悼沈、刪除componentDidMount中創(chuàng)造的非React元素。
父組件：
constructor(){
super()
this.state = {
isShow:true,
}
}
// 卸載子組件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
<button onClick={this.handleRemove}>卸載子組件</button>
{ this.state.isShow && <Subcom list={this.state.arr} /> }
</>
)
}
子組件：
componentWillUnmount(){
console.log('子組件已被卸載');
}
4姐扮、測試完整代碼
父組件：
import React, {Component} from "react"
// 引入子組件
import Subcom from "./Subcom"
export default class Cycle extends Component {
// 1絮供、初始化階段[數(shù)據(jù)的掛載、函數(shù)的定義聲明]
constructor(){
super()
this.state = {
msg:'舊版本的生命周期',
arr:['a','b','c','d','e','f'],
isShow:true,
}
}
componentWillMount(){
//修改數(shù)據(jù)
}
// 添加數(shù)據(jù)
handleAdd = () => {
const { arr } = this.state;
arr.push(Math.floor(Math.random()*10)+1); // 加個隨機(jī)數(shù)
this.setState({
arr
})
}
// 卸載子組件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
<h1>{this.state.msg}</h1>
<button onClick={this.handleAdd}>添加數(shù)據(jù)</button>
<button onClick={this.handleRemove}>卸載子組件</button>
<br/>
<br />
<br />
<br />
{ this.state.isShow && <Subcom list={this.state.arr} /> }
</>
)
}
componentDidMount(){
// 請求后臺數(shù)據(jù)
// 操作DOM
}
}
子組件：
import React, { Component } from "react"
export default class Subcom extends Component {
// 修改數(shù)據(jù)的生命周期函數(shù)
componentWillReceiveProps(nextProps, nextContent) {
console.log('觸發(fā)數(shù)據(jù)更新函數(shù)：', nextProps, nextContent);
}
// 是否要更新數(shù)據(jù)觸發(fā)的函數(shù)茶敏，返回boolean類型
shouldComponentUpdate(nextProps,nextState){
return false;
}
componentWillUpdate(nextProps, nextState){
//組件更新時調(diào)用
}
render() {
const { list } = this.props;
return (
<>
<ul>
{
list.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</>
)
}
componentDidUpdate(nextProps, nextState){
// 組件更新完成后執(zhí)行的生命周期函數(shù)
}
componentWillUnmount(){
console.log('子組件已被卸載');
}
}
