react中的生命周期钩子函数? 每个都是干什么用的?

首先react有10个生命周期钩子函数

挂载期

constructor 数据接收 实现继承super(props)
componentWillMount 数据挂载之前 可以操作数据 不可以操作dom
componentDidMount 数据挂载之后 可以操作数据和dom
render 渲染组件 和 html 标签

更新期

shouldComponentUpdate 检测组件内的变化 可以用作页面性能的优化(默认值为true)
componentReceiveProps 接收组件传入输入数据
componentWillUpdate 组件更新之前调用
componentDidUpdate 组件更新之后调用
render 组件更新之后渲染组件

销毁期

componentWillUnmount 组件销毁时调用 可以做一些内存的优化 (全局变量,闭包,计时器,事件)

附上一张大牛写的react声明周期图

这里写图片描述

React生命周期钩子函数使用axios是一种常见的做法,可以用于在组件的不同生命周期发起异步请求或执行其他操作。其,主要使用的钩子函数包括componentDidMount和componentDidUpdate。 在componentDidMount钩子函数使用axios可以在组件挂载完成后立即发起请求。这个钩子函数在组件第一次渲染完成后被调用,通常用于初始化数据或进行一次性的数据获取操作。在该钩子函数,你可以使用axios库发送异步请求,例如获取远程数据、调用API等。通过axios发送请求可以使用GET、POST、PUT等HTTP方法,并在请求完成后处理返回的数据。 另外,如果组件具有动态变化的属性或状态,并且需要在这些变化发生时执行一些操作,可以使用componentDidUpdate钩子函数。在该钩子函数,你可以根据组件的属性(this.props)和状态(this.state)来判断是否需要发送axios请求,以及在请求完成后处理返回的数据。需要注意的是,使用componentDidUpdate时要谨慎判断更新条件,避免陷入无限循环。 综上所述,在React生命周期钩子函数使用axios可以方便地进行异步请求和数据处理操作,使组件能够更好地与后端API进行交互。<span class="em">1</span> #### 引用[.reference_title] - *1* [react最新教程(包含初级-级-高级)](https://download.csdn.net/download/shangrila_kun/11238855)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值