概述

在React中,生命周期函数指的是组件在某一个时刻会自动执行的函数

constructor

在类或组件创建的时候被自动执行,我们可以说它是生命周期函数,但它并不是React所特有的,所有的Es6对象都有这个函数,所以并不能说它是React的生命周期函数

初始

当数据发生变化时,render函数会被自动执行,符合我们对React生命周期函数的定义,所以它是React的生命周期函数,但在初始阶段,并不会有任何的React生命周期函数被执行,但会执行constructor构造函数,进行组件数据的初始化、

import React,{Component} from 'react';

class Demo extends Component{
constructor(props){
console.log("初始化数据...");
super(props);
this.state = {};
}
render(){
return (
<div>Hello World</div>
);
}
}
export default Demo

挂载

页面挂载阶段,UNSAFE_componentWillMount 页面即将render挂载在html前执行,以前叫做componentWillMount但React团队认为这些生命周期函数经常被误解和巧妙的滥用,会带来潜在的问题,所以为他们加上了UNSAFE_前缀,当然这里的不安全不是指安全性,而是表示使用这些周期函数在未来的React版本中更有可能出现错误。即将挂载的函数执行完毕,会进行渲染挂载render,之后会执行componentDidMount函数,我们可以把完成挂载后的逻辑写在这个函数上。记住,只有组件第一次渲染页面才会执行mount

import React,{Component} from 'react';

class Demo extends Component{
constructor(props){
console.log("初始化数据...");
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

更新

数据更新阶段,state或props发生变化,页面会重新渲染。state会在更新前先执行shouldComponentUpdate生命周期函数,这个函数比较特殊,它需要有一个返回值,true或者false,控制页面是否需要重新重新渲染,如果仅仅是数据发生变化,我们可以返回false,那么之后的生命周期函数都不会执行,这样可以有效的提升我们组件更新的效率。返回true后,会执行UNSAFE_componentWillUpdate函数做更新前的准备,在执行render进行页面的重新渲染,渲染完毕后执行componentDidUpdate函数

import React,{Component} from 'react';

class Demo extends Component{
constructor(props){
console.log("初始化数据...");
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');
}
//更新前执行
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return true;
} UNSAFE_componentWillUpdate(){
console.log('componentWillUpdate');
} componentDidUpdate(){
console.log('componentDidUpdate')
} }
export default Demo

componentWillReceiveProps生命周期函数,只有一个组件接收props或者说当一个组件是子组件接收props的时候,它才会被执行,所以我们需要定义一个子组件接收父组件传值

import React,{Component,Fragment} from 'react';
import Demo2 from './Demo2';
class Demo extends Component{
constructor(props){
console.log("初始化数据...");
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');
}
//更新前执行
shouldComponentUpdate(){
console.log('shouldComponentUpdate');
return true;
} UNSAFE_componentWillUpdate(){
console.log('componentWillUpdate');
} componentDidUpdate(){
console.log('componentDidUpdate')
}
//组件从页面中移除前自动执行
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;

当子组件接收参数发生变化时,就会执行componentWillReceiveProps函数,然后执行shouldComponentUpdate函数,返回值为true时依次执行componentWillUpdate,render,componentDidUpdate

移除

当组件从页面移除时自动执行componentWillUnmount函数,我们先定义一个路由

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从页面移除时可观察到自动执行了componentWillUnmount函数

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>
);
}
//组件从页面中移除前自动执行
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 href="https://ant.design">{item.title}</a>}
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
/>
</List.Item>
)}
/>
);
}
} export default ButtonTest;

执行结果

React的生命周期函数的更多相关文章

  1. React之生命周期函数

    1.新增知识点 /* https://reactjs.org/docs/react-component.html React生命周期函数: 组件加载之前,组件加载完成,以及组件更新数据,组件销毁. 触 ...

  2. react 的生命周期函数

    生命周期函数: 是指在某一时刻组件自动执行 的函数 初始化: 设置props和state mounting: componentWillMount 在组件即将被挂载到页面的时候自动执行 render ...

  3. React之生命周期函数(16.3以后新版本)

    学习链接: https://www.jianshu.com/p/514fe21b9914 学习链接:https://zhuanlan.zhihu.com/p/38030418 学习链接:https:/ ...

  4. 【React自制全家桶】五、React组件的生命周期函数详解

    一.总览React组件的生命周期函数 什么是生命周期函数:简单的来说就是 在某个时刻会自动执行的函数 二.React的生命周期函数主要由四块组成 分别是:组件初始化.组件挂载.组件更新.组件卸载 三. ...

  5. React中的生命周期函数

    React的生命周期函数 什么是生命周期函数:生命周期函数是指在某一个时刻组件会自动调用执行的函数 Initialization:初始化 执行Constructor,初始state和props Mou ...

  6. 10. react 基础 ref 的使用 及 React 16 的生命周期函数 及 生命周期函数使用场景

    一. ref 的使用 ( 直接获取 DOM 元素 ) 在 input 标签上 可以使用 ref 属性 获取当前DOM节点 eg: import React , { Component, Fragmen ...

  7. React——组件的生命周期函数

    每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...

  8. React 学习(四) ---- 生命周期函数

    现在我们能修改状态,页面可以进行交互了,但是还有一种状态改变没有解决,那就是倒计时效果,时间一直在变化,组件状态也一直在改变,但我们什么都没有做,如果要实现这样的效果,需要怎么处理? 我们都知道,改变 ...

  9. React生命周期函数详解

    React生命周期函数 生命周期函数是指在某一个周期自动执行的函数. React中的生命周期执行过程 以下是React中的常用的生命周期函数,按个部分中按照自动执行顺序列出,这几个过程可能存在同时进行 ...

随机推荐

  1. ExtJS 布局-Center布局(Center layout)

    更新记录: 2022年6月12日 检查发布. 2022年6月1日 开始. 1.说明 center布局将子项放置在容器的中心. 2.设置布局方法 在父容器中设置 layout: 'center', // ...

  2. node开启 https线上服务你不会吗?

    var https=require("https");//https服务var fs = require("fs")var express = require( ...

  3. 使用Kind快速构建k8s

    什么是 KindKind(Kubernetes in Docker) 是一个 Kubernetes 孵化项目,Kind 是一套开箱即用的 Kubernetes 环境搭建方案.顾名思义,就是将 Kube ...

  4. 《A Neural Algorithm of Artistic Style》理解

    在美术中,特别是绘画,人类掌握了通过在图像的内容和风格间建立复杂的相互作用从而创造独特的视觉体验的技巧.到目前为止,这个过程的算法基础是未知的,也没有现存的人工系统拥有这样的能力.然而在视觉感知的其他 ...

  5. android studio 初印象

    ANSROID STUDIO sdk 目录 build-tools目录,存放各版本Android的各种编译工具. docs目录,存放开发说明文档. extras\android目录,存放兼容低版本的新 ...

  6. Linux操作系统(7):rpm包管理和yum软件包在线管理

    一.rpm 包的管理 介绍:一种用于互联网下载包的打包及安装工具,它包含在某些 Linux 分发版中.它生成具有.RPM 扩展名的文件.RPM 是 RedHat Package Manager(Red ...

  7. 基于SqlSugar的开发框架循序渐进介绍(11)-- 使用TypeScript和Vue3的Setup语法糖编写页面和组件的总结

    随着Vue3和TypeScript的大浪潮不断袭来,越来越多的Vue项目采用了TypeScript的语法来编写代码,而Vue3的JS中的Setup语法糖也越来越广泛的使用,给我们这些以前用弱类型的JS ...

  8. Tomcat介绍和配置使用

    目录 JavaWeb 的概念 什么是 JavaWeb? 什么是请求? 什么是响应? 请求和响应的关系 Web 资源的分类 常用的 Web 服务器 Tomcat 服务器和 Servlet 版本的对应关系 ...

  9. 时间模块之datatime模块、os模块、sys模块、json模块、json模块实操

    目录 一.模块的绝对导入和相对导入 二.包的概念 三.编程思想的转变 四.软件开发目录规范 五.常见的内置模块 一.时间模块之datatime模块 1.datetime.datetime.today( ...

  10. Kubernetes组件介绍

    一.api-server   基本概念 该端口默认值为6443,可通过启动参数"--secure-port"的值来修改默认值. 默认IP地址为非本地(Non-Localhost)网 ...