react生命周期函数

2024-06-11 00:29:55

在react中，生命周期函数指的是组件在加载前，加载后，以及组件更新数据和组件销毁时触发的一系列方法。通常分为以下几类：

组件加载的时候触发的函数：constructor 、componentWillMount、 render 、componentDidMount
组件数据更新的时候触发的函数：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate
在父组件里面改变props传值的时候触发的函数：componentWillReceiveProps
组件销毁的时候触发的函数：componentWillUnmount

组件加载

当然了，在这个里面，构造函数和render并不属于生命周期函数部分，这里将它们放在一起，只是为了更好的展示函数的执行顺序。

需要注意的是，componentDidMount是组件挂在完成的时候触发的生命周期函数，所以通常将DOM操作和数据请求都放在componentDidMount里面。

组件数据更新

当我们点击按钮，更改组件数据时，会依次触发上面的函数。

这个里面组要注意的是，shouldComponentUpdate表示是否更新数据，只有当返回true的时候才会执行更新数据的操作。

组件销毁

要控制组件的销毁，可以在父组件中，通过一个标志数据的布尔值来控制是否加载该组件，然后通过点击事件改变该标志数据的值，从而控制组件的加载和销毁。

然后就可以在子组件中监听组件的加载和销毁了。

父组件改变传值

父组件改变传值的时候，会触发相应的生命周期函数，因为数据的改变，也会触发组件数据更新的相关函数。

当我们点击按钮改变父组件的传值的时候，相关函数的触发顺序如下：

这里需要说明的是shouldComponentUpdate这个函数，它有两个参数，当在组件内部改变数据的时候，第二个参数是改变后的数据值，当在父组件中改变数据的时候，第一个参数是改变后的值。

转载于:https://www.cnblogs.com/yuyujuan/p/10125547.html

react生命周期函数相关推荐

vue生命周期函数、react生命周期函数、微信小程序生命周期函数、uni-app生命周期函数，简介及图示
vue生命周期函数 beforeCreate (创建前) created (创建后) beforeMount (挂载前) mounted (挂载后) beforeUpdate (数据更新前) upda ...
再次理解react生命周期函数
在学习react的过程中,生命周期函数是一个非常核心的概念,对react生命周期函数的了解就是对react工作机制的了解.而生命周期函数对于初学者而言不好记忆,故有此文作为理解和梳理生命周期函数这个知 ...
react生命周期函数_如何优雅的消灭掉react生命周期函数
开源不易,感谢你的支持,❤ star concent^_^ 序言在react应用里,存在一个顶层组件,该组件的生命周期很长,除了人为的调用unmountComponentAtNode接口来卸载掉它和 ...
React 生命周期函数使用场景及ajax请求前端模拟数据
React 中的生命周期函数是很重要的. 我们在写组件的时候,组件都是继承自React.Component 的,Component内置了其他所有生命周期函数,唯独没有render 函数.因此我们在写组 ...
react 生命周期函数
定义:指在某个时刻组件会自动调用的函数阶段: 1 Initialization : 初始化阶段 2 Mounting : 真实Dom已插入 3 Updation : 重新渲染 4 Unmountin ...
React生命周期函数-生命周期回调函数
面试的时候问到了如何运用,这里再回顾一下. 也叫生命周期钩子函数(生命周期钩子) 生命周期大概分成三个阶段:初始化阶段,更新阶段,卸载将组件放入页面的过程中,React会在合适的时间进行函数的调用. ...
七十七、React中的propTypes，defaultProps和生命周期函数
2020/11/19. 周四.今天又是奋斗的一天. @Author:Runsen React,相比于Vue,React更加灵活,但是对JavaScript基础的要求也更高一些.我继续学习React 文 ...
React组件的生命周期函数
文章目录 React组件生命周期认识生命周期生命周期函数不常用生命周期函数 React组件生命周期认识生命周期很多的事物都有从创建到销毁的整个过程,这个过程称之为是生命周期: React组件 ...
React教程（五）——生命周期函数
生命周期函数,是react框架的难点内容,你要知道,每一个生命周期函数是干什么的?它们的使用场景是什么?当某一种条件下,它们有着怎样的执行顺序?每一个生命周期函数,应该注意的点是什么? react中, ...

最新文章

热门文章