1、组件的挂载阶段(只会执行一次)
读取props
以及初始化state
状态、自定义属性
以及方法
,使用构造函数construct()
,加载的时候调用一次,可以初始化state
import React, {Component} from "react"
export default class Cycle extends Component {
// 1、初始化阶段[数据的挂载、函数的定义声明]
constructor(){
super()
this.state = {
msg:'旧版本的生命周期'
}
}
}
组件将要挂载的时候触发的函数:componentWillMount()
组件加载时只调用,之后组件更新不再调用,整个生命周期只会调用一次,此时可以去修改状态state
中的数据。
componentWillMount(){
//修改数据
}
render()函数渲染组件
创建虚拟DOM,进行diff算法,更新DOM树都在此时进行。
render(){
return (
<>
{this.state.msg}
>
)
}
挂载完成触发函数
render()函数渲染完组件后触发,而且只会触发一次,在进行服务端渲染时是不会触发的。
这个生命周期的主要功能类似于window.onload
,可以在这个生命周期函数中去操作DOM,以及去请求后台的数据接口等操作。
componentDidMount(){
// 请求后台数据
// 操作DOM
}
2、组件更新阶段
父组件改变props
传值时,子组件触发数据更新函数componentWillReceiveProps()
// 修改数据的生命周期函数
componentWillReceiveProps(nextProps, nextContent) {
console.log('触发数据更新函数:', nextProps, nextContent);
}
父组件.png
子组件.png
image.png
是否要更新数据时触发的函数:shouldComponentUpdate()
shouldComponentUpdate(nextProps, nextState),要返回bool值,组件接收到新的props或者state时调用,就会更新dom(使用diff算法更新),return false 能阻止更新(不调用render)
// 是否要更新数据触发的函数,返回boolean类型
shouldComponentUpdate(nextProps,nextState){
return false; //设为false将不再更新dom
}
image.png
将要更新数据时触发的函数:componentWillUpdate(nextProps, nextState)
组件加载时不调用,只有在组件将要更新时才调用,此时可以修改state
componentWillUpdate(nextProps, nextState){
//组件更新时调用
}
render()函数再次重新调起渲染组件,此时是更新DOM树
创建虚拟dom,进行diff算法,更新dom树。
数据更新完成时触发的函数:componentDidUpdate(nextProps, nextState)
componentDidUpdate(nextProps, nextState){
// 组件更新完成后执行的生命周期函数
}
3、组件卸载阶段
组件将要销毁时触发的函数:componentWillUnmount()
组件渲染之后调用,只调用一次,切换页面时,上个页面被销毁时触发,卸载过程只涉及一个函数,当React组件要从DOM树上删除前,会调用一次这个函数。这个函数经常用于去除componentDidMount函数带来的副作用,例如清除计时器、删除componentDidMount中创造的非React元素。
父组件:
constructor(){
super()
this.state = {
isShow:true,
}
}
// 卸载子组件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
{ this.state.isShow && }
>
)
}
子组件:
componentWillUnmount(){
console.log('子组件已被卸载');
}
4、测试完整代码
父组件:
import React, {Component} from "react"
// 引入子组件
import Subcom from "./Subcom"
export default class Cycle extends Component {
// 1、初始化阶段[数据的挂载、函数的定义声明]
constructor(){
super()
this.state = {
msg:'旧版本的生命周期',
arr:['a','b','c','d','e','f'],
isShow:true,
}
}
componentWillMount(){
//修改数据
}
// 添加数据
handleAdd = () => {
const { arr } = this.state;
arr.push(Math.floor(Math.random()*10)+1); // 加个随机数
this.setState({
arr
})
}
// 卸载子组件
handleRemove = () => {
const { isShow } = this.state;
this.setState({
isShow : !isShow
})
}
render(){
return (
<>
{this.state.msg}
{ this.state.isShow && }
>
)
}
componentDidMount(){
// 请求后台数据
// 操作DOM
}
}
子组件:
import React, { Component } from "react"
export default class Subcom extends Component {
// 修改数据的生命周期函数
componentWillReceiveProps(nextProps, nextContent) {
console.log('触发数据更新函数:', nextProps, nextContent);
}
// 是否要更新数据触发的函数,返回boolean类型
shouldComponentUpdate(nextProps,nextState){
return false;
}
componentWillUpdate(nextProps, nextState){
//组件更新时调用
}
render() {
const { list } = this.props;
return (
<>
{
list.map((item, index) => {
return - {item}
})
}
>
)
}
componentDidUpdate(nextProps, nextState){
// 组件更新完成后执行的生命周期函数
}
componentWillUnmount(){
console.log('子组件已被卸载');
}
}