【前端面试】React生命周期函数以及V16新的Api引入

最新推荐文章于 2024-08-04 13:48:08 发布
最新推荐文章于 2024-08-04 13:48:08 发布
阅读量350 收藏
点赞数
分类专栏： react 前端面试准备 文章标签： react 生命周期函数 简书项目 V16
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MeiLuan_yahoho/article/details/86729497
版权
本文介绍了React V16中生命周期函数的变化，包括初始化、挂载、更新和卸载阶段。在V16中，由于Fiber的引入，部分生命周期发生了调整，并新增了getDerivedStateFromProps和getSnapshotBeforeUpdate两个API。建议将componentWillMount中的逻辑移至componentDidMount，同时避免在可打断的Reconciliation阶段进行复杂操作。
摘要由CSDN通过智能技术生成

生命周期函数指在某一时刻调用的函数

1.初始化
这时候执行的其实就是constructor
在这里插入图片描述
2.mount挂载
componentWillMount – render – componentDidMount
组件即将被挂载到页面上–挂载–组件被挂载到页面上之后执行
componentWillMount， componentDidMount只会在第一次的时候执行
3.update更新
组件更新有两种情况
1.props发生变化
2.states发生变化

在这里插入图片描述
shouldComponentUpdate在组件被更新之前被执行
（返回true或false来决定组件是否需要被更新）
在这里插入图片描述
componentWillUpdate在组件更新之前，shouldComponentUpdate之后执行， 只有shouldComponentUpdate返回的值是true它才会执行

componentDidlUpdate
最低0.47元/天 解锁文章
MeiLuan_yahoho
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
面试官:说说react的渲染过程
bemystery的博客
12-14 1398
面试官:说说react的渲染过程 hello，这里是潇晨，大家在面试的过程中有没有遇到过一些和react相关的问题呢，比如面试官让你说说react渲染的过程，这到题目比较开放，也比较考验大家对react渲染原理以及源码的整体架构的理解。 整体流程： react的核心可以用ui=fn(state)来表示，更详细可以用 const state = reconcile(update); const UI = commit(state); 上面的fn可以分为如下一个部分： Scheduler（调度器）：
React生命周期详解
热门推荐
小陈的博客
01-11 1万+
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析
React 生命周期
qq_37016928的博客
11-12 211
React v16.0前的生命周期 其实大部分团队不见得会跟进升到16版本，所以16前的生命周期还是很有必要掌握的，何况16也是基于之前的修改 image 第一个是组件初始化(initialization)阶段 也就是以下代码中类的构造方法( constructor() ),Test类继承了react Component这个基类，也就继承这个react的基类，才能有render(),生...
React 组件的生命周期方法
最新发布
My_wife_QBL的博客
08-04 968
挂载（Mounting）：组件被创建并插入到 DOM 中。更新（Updating）：组件的状态或属性发生变化，导致组件重新渲染。卸载（Unmounting）：组件从 DOM 中删除。在每个阶段，React 提供了一些特定的生命周期方法，开发者可以在这些方法中执行自定义逻辑。React 组件的生命周期方法是控制组件行为的重要工具。了解这些方法的调用顺序以及如何在每个阶段执行特定操作，可以帮助开发者编写更加高效和可维护的代码。
React面试题——React的生命周期
weixin_47162649的博客
02-02 2720
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生命周期
qq_41040989的博客
02-28 378
面试总结——react生命周期
面试题：react生命周期
KLDCXY的博客
09-21 348
面试题：react生命周期 一：挂载卸载 1、constructor： react数据的初始化，他接收2个参数，props和context。如果要使用这两个参数，就要使用super(),否则会造成this指向错误。 2、componentWillMount: 用在服务端渲染时使用。组件已经经历了constructor初始化数据，但还未渲染DOM. 3、componentDidMount: 组件第一次渲染完成，dom节点已生成。可以在这里请求ajax，返回数据setState后，组件会重新渲染。
07 生命周期为什么 React v16 产生了新的生命周期函数慕课专栏1
08-03
在React v16中，生命周期函数的变更主要是为了提高组件的稳定性和性能，以及更好地适应新的渲染机制。React团队引入了新的生命周期方法`getDerivedStateFromProps`和`getSnapshotBeforeUpdate`，同时弃用了`...
最新大厂前端面试题-react面试题.docx
06-06
1. React 生命周期函数：React 生命周期函数是指组件从创建到销毁的整个过程中执行的函数，包括组件挂载、更新、卸载等阶段。常见的生命周期函数有：`componentDidMount`、`componentDidUpdate`、`...
「2021」高频前端面试题汇总之React篇.pdf
12-14
React 面试题汇总 React 是一个流行的前端框架，拥有庞大的开发者社区和丰富的生态系统。本文将从 React 的事件机制、组件基础、事件代理、高阶组件、Render Props、Hooks 等方面总结一些常见的面试题。 1. React ...
【react全家桶学习】react的 (新/旧) 生命周期（重点）
蜗牛~~
06-27 8220
相对比vue的生命周期，react显得复杂的多，光从名称上就比vue长，所以做好准备，不要放弃，坚持就是胜利、
react 生命周期
gklcsdn的博客
11-10 193
文章目录1. 挂载卸载过程1.constructor()2.componentWillMount()3.componentDidMount()4.componentWillUnmount ()2. 更新过程1. componentWillReceiveProps (nextProps)2.shouldComponentUpdate(nextProps,nextState)3.componentWillUpdate (nextProps,nextState)4.componentDidUpdate(prevP
react 的生命周期
木木
10-08 653
整体上来讲，React生命周期分为了挂载、更新、卸载以及捕错四个状态阶段。每种状态里需要执行若干个生命周期函数，这些函数可能会在不同的阶段里重新被调用。 挂载： constructor() constructor方法在组件建立前被调用。 在这个方法里面，应该先调用super(props)，否则this.props就会未定义。 这个方法的主要用途是，初始化props，...
react生命周期
qq_29315565的博客
07-27 170
最近在学react,看到一篇文章还不错,留下链接https://www.cnblogs.com/qiaojie/p/6135180.html
react生命周期详解
lixiaonaaa的博客
02-20 2053
1. 生命周期流程图(旧) 生命周期的三个阶段（旧） 1）初始化阶段:由ReactDOM.render()触发---初次渲染 constructor() componentWillMount() render() componentDidMount() 2）更新阶段: 由组件内部this.setSate()或父组件重新render触发 shouldComponentUpdate() componentWillUpdate() render() componentDidUpd...
React v16新生命周期函数的原因分析
"React v16生命周期变化及新旧函数问题分析" React v16版本对生命周期函数的重大调整是出于优化性能和提升组件安全性的重要考量。在这个版本中，React引入了`getDerivedStateFromProps`和`getSnapshotBeforeUpdate`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值