学习记录——react生命周期

最新推荐文章于 2025-01-18 22:30:48 发布
最新推荐文章于 2025-01-18 22:30:48 发布
阅读量125 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react 文章标签： react reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sakura_zr/article/details/111051991
本文详细介绍了React组件的生命周期，包括实例期、存在期和销毁期的重要函数。重点讲解了constructor、componentWillMount、render、componentDidMount等函数的作用及执行时机。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

参考：https://www.jianshu.com/p/b331d0e4b398

生命周期函数

  1. 框架中提前设置好的
  2. 在一些关键时刻会执行
  3. 生命周期函数的逻辑需要我们自己编写

实例期

  1. contructor
  2. componentWillMount：初始化数据 （相当于vue里的created） 过期
  3. render（仅仅产生虚拟dom）
    ①render之后得到了一份虚拟dom
    ②ReactDom.render()只有这个方法将虚拟dom转换成真实dom
  4. componentDidMount：已经将虚拟dom转换成真实dom （vue里的mounted）

存在期

  1. componentWillReceiveProps 过期

  2. shouldComponentUpdate
    (1) 可以自定义返回一个布尔值
    (2) 决定我们组件是否更新
    (3) 如果未定义该函数，默认返回就是true
    (4) 提升性能

  3. componentWillUpdate 组件将要被更新过期

  4. render 组件正在更新

  5. componentDidUpdate组件已经更新完成

销毁期

  1. componentWillUnmount：组件将要销毁的时候执行 取消事件监听

新增生命周期
getDerivedStateFromProps(nextProps, prevState)
在这里插入图片描述

getSnapshotBeforeUpdate(prevProps, prevState)
在这里插入图片描述

【尚硅谷React】——React全家桶笔记
m0_67393342的博客
07-29 4646
用于构建用户界面的JavaScript库（只关注页面），将数据渲染为HTML视图；由Facebook开发且开源。中文官网英文官网原生JS操作DOM繁琐且效率低，因为用DOM-API操作UI；JS直接操作DOM会使浏览器进行大量的重绘重排；原生JS没有组件化编码方案，代码复用率低react开发者工具Chrome插件ReactDeveloperTool（注意安装来源为facebook的）方法一在package.json中追加如下配置"proxy""http5000"优点方法二第一步。...
【React学习笔记】从0开始——04React原理
m0_64348349的博客
05-24 1167
在这我有一个疑问：为什么直接打印this.state.count的值是更新前的值，而页面上显示的count值是已经更新过的呢？网上的回答是：setState并不会立即修改this.state，而是将需要更新的状态保存到更新队列里，当我们在setState调用后立即通过this.state读取状态时，读取到的是更新前的旧状态。渲染过程中，React会先基于组件的状态构建一棵虚拟DOM树，然后计算如何高效地更新真实DOM树，最小化DOM操作带来的开销。对应节点的属性(id，className，style等)；
React学习笔记（四）——React 组件生命周期
weixin_56370772的博客
09-25 4983
在react类组件中，多次的setState并不会立刻执行，而是合并成一个来执行。
学习笔记——react的生命周期钩子函数
qq_41339126的博客
11-05 930
react的生命周期大体分为三个阶段：组件创建，组件更新，组件销毁。并且只有类组件才具有生命周期的钩子函数，函数组件没有。 1.组件创建： 数组创建会依次调用四个函数。分别是constructor构造函数， ...
React 学习笔记 —— 组件生命周期
叹之
04-02 334
生命周期汇总图 线路一 class Demo extends React.Component { // 实例化组件时执行 constructor () { super() this.state = { count: 0 } console.log('constructor') } handleAdd = () => { this.setState({
React面试题——React的生命周期
weixin_47162649的博客
02-02 2804
react生命周期分为4个阶段： 挂载时（4个），更新时（5个），卸载时（1个），错误处理阶段（2个）。一共有12个钩子。 1.挂载时阶段（4个钩子）： constructor() 加载时调用一次，可以实现：初始化state,为事件处理函数绑定实例。 constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0 }; //初始化state。 this.handleClic
React学习笔记五——组件的生命周期
最新发布
2501_90225825的博客
01-18 911
shouldComponentUpdate–组件是否更新componentWillUpdate–组件将更新render–页面渲染componentDidUpdate–组件已更新componentWillUpdate–组件将更新render–页面渲染componentDidUpdate–组件已更新componentWillReceiveProps–组件将接收propsshouldComponentUpdate–组件是否更新componentWillUpdate–组件将更新。
React学习笔记（二）——React 组件
weixin_56370772的博客
09-15 1988
了解 React 组件作用，和创建组件的方式组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。将页面按照界面功能进行拆分，每一块界面都拥有自己的独立逻辑，这样可以提高项目代码的可维护性。使用函数function使用类class掌握类组件中状态的定义与使用定义state属性定义组件状态，属于组件自己的数据，它的值是个对象。使用state的时候通过this。数据发生变化，驱动视图更新。super()// 给 this 增加一个属性 state。
React 学习笔记 —— 组件生命周期（包含17新版和旧版对比）
weixin_45664402的博客
04-09 412
生命周期汇总图 生命周期的三个阶段（旧） 1. 初始化阶段: 由ReactDOM.render()触发—初次渲染 constructor() componentWillMount() render() componentDidMount() 2.更新阶段: 由组件内部this.setSate()或父组件重新render触发 shouldComponentUpdate() componentWillUpdate() render() componentDidUpdate()
react学习——生命周期
qq_43252482的博客
01-08 309
组件的生命周期 生命全周期图 React中组件也有生命周期，也就是说也有很多钩子函数供我们使用, 组件的生命周期，我们会分为四个阶段，初始化、运行中、销毁、错误处理 1.初始化 在初始化阶段会执行 constructor static getDerivedStateFromProps() render() componentDidMount() 各生命周期详解 (1) constructor(props) React组件的构造函数在挂载之前被调用。在实现React.Component构造函数时，需要先在
react之Effect的生命周期
weixin_73918953的博客
05-26 507
组件可以挂载，更新和卸载每个Effect与周围组件有着独立的生命周期每个Effect描述了一个独立的同步过程们可以开始和停止在编写和读取Effect时，要独立地考虑每个Effect (如何开始和如何停止同步)，而不是从组件的角度思考 (如何挂载，更新，卸载)在组件主体内声明的值是响应式的响应式值应该重新进行同步Effect，因为它们可以随着时间的推移而发生变化检查工具验证在Effect内部使用的所有响应式值都被指定为依赖项检查工具标记的所有错误都是合理的。
React学习笔记（二）——React深入
wuqingdeqing的博客
12-23 535
2.1 事件系统 React基于Virtual DOM实现了一个SyntheticEvent层，定义的事件处理器会接收到一个SyntheticEvent对象的实例。 2.1.1 合成事件的绑定方式 React事件的绑定方式在写法上与原生的HTML事件监听器的属性很相似，并且含义和触发的场景也全都是一致的。 2.1.2 合成事件的实现机制 在React底层，主要对合成事件做了两件事：事件委...
学习记录——react的跨级传值React.createContext
sakura_zr的博客
09-14 814
React里面的api： React.createContext （通过这个api完成跨级传值）里面有如下： Provider 外层 生产数据 （数据的生产者） Consumer 内层 消费数据 （数据的消费者） 这两个都是组件 作用：方便祖先组件与后代组件（中间隔了好多层组件）传值 也就是通过React.createContext()创建一个Context对象，这个Context对象包含两个组件和< Consumer /> ...
学习记录——react路由封装
sakura_zr的博客
12-15 635
封装一个路由，以后我们再使用的时候，不用一个一个写Route那些，只需要调用自己写的方法，并且只需要改动一个文件引入需要的组件就可以了。 views文件夹下新建router文件夹，里面新建RouterView.js和router.config.js router.config.js配置路由需要的组件以及路径 import Home from '../views/Home' import Find from '../views/Find' import Video from '../views/Video'
学习记录——react组件内部的状态state、setState
sakura_zr的博客
09-09 397
类组件内部都会有相关的状态，通过改变状态就可以更新视图 类比vue中的data 写法：state = {show: true} //es7写法 类似vue中的data写法 state = { show: true } 通过组件实例就可以获取到组件状态 this.state.show 改变状态让视图更新 我们应该使用组件实例上的方法 setState去改变组件状态 注意：state有多个状态的时候 改变其中一个状态别的状态不会受影响 会合并 如果setState放在同.
学习记录——react受控组件和非受控组件，操作dom（ React.createRef()）
sakura_zr的博客
09-08 327
受控组件和非受控组件 受控组件：主要应用于表单元素。受控值得是表单中的值，和状态绑定 有受控组件，也有非受控组件。非受控的意思是表单的值不与状态绑定 受控组件 通过受控方式取值，可以实时的去拿，就像vue里的v-model，可以动态获取值。前提是，input框里的值要绑定到state里去。 打开页面查看： 非受控 在react中，我们可以通过ref来获取dom元素 用法：在需要获取的dom元素标签中使用ref=’xxx’ 使用this.refs.xxx就可以获取到这个dom元素了 打开浏览器查看：如果
学习记录——react传入模板（children）
sakura_zr的博客
09-07 321
传入模板（children） 在组件中间写要传入的虚拟dom 在子组件中展示 {this.props.children} 比如想要传递一段代码到子组件里。 父组件Home.js： 子组件Children3.js： 接受父组件里的代码，使用 this.props.children ...
学习记录——react类似百度搜索的小练习（数据筛选）
sakura_zr的博客
12-11 300
先在state里模拟一个数据，用于搜索。 然后写一个input框，添加onChange监听事件，当我们输入内容的时候，会自动去匹配数据，如果包含一样的字就显示出来。 然后要做的是在input框输入值的同时，遍历listDog数组，看有没有输入的那个值。 如果有的话，显示出包含那个值的所有元素，如果没有则返回一个空数组。默认刚打开页面是空的。 可以先封装一个回调，注意在回调里的this的指向问题。可以写一个button来观察this 知识点-改变this指向的三种方法 方式1：把方法变成剪头函数 名.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值