react新出来两个钩子函数是什么？和删掉的will系列有什么区别？

最新推荐文章于 2024-10-14 12:37:39 发布
最新推荐文章于 2024-10-14 12:37:39 发布
阅读量74 收藏 1
点赞数 1
文章标签： react.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68911063/article/details/132364103
版权

新的生命周期新增了两个钩子，分别是：

1.getDerivedStateFromProps：从props中得到衍生的state

接受两个参数：props，state    

返回一个状态对象或者null，用来修改state的值。

使用场景：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps

 2.getSnapshotBeforeUpdate：在更新前拿到快照（可以拿到更新前的数据）

在更新DOM之前调用

返回一个对象或者null，返回值传递给componentDidUpdate

componentDidUpdate():更新DOM之后调用

接受三个参数：preProps,preState,snapshotValue
使用案例：

固定高度的div，定时新增一行，实现在新增的时候，使目前观看的行高度不变。

 总结

1、componentWillMount中可能需要做的事(一些数据初始化的操作就应该放在这个钩子中处理)，constructor与componentDidMount也能做，甚至做的更好，此方法被废弃。
2、componentWillReceiveProps实际行为与命名并不相符，由于不稳定性已由getDerivedStateFromProps代替；
3、而componentWillUpdate同等理由被getSnapshotBeforeUpdate代替

龙龙972
关注
React新出来两个钩子函数是什么？和删掉的will系列有什么区别？
Aan___的博客
08-18 126
它的存在是为了替代 componentWillReceiveProps，用于根据props的变化来更新组件的内部状态。与 componentWillReceiveProps 不同的是，getDerivedStateFromProps 必须返回一个对象，用于更新组件的状态，而不是直接修改 this.state。React的钩子函数是通过组件的生命周期来执行不同的操作。需要注意的是，对于已经使用了过时的生命周期函数的项目，可以使用React提供的相关方法进行更新和迁移，以适应新版本的变化。
4.react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
zmx_csdnzmx的博客
08-18 119
1. `useEffect`：`useEffect`可以在函数组件中执行副作用操作，比如订阅事件、网络请求、修改DOM等。它在组件渲染完成后执行，类似于`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`的结合体。2. `useContext`：`useContext`用于在函数组件中访问React的上下文（context）。- 新的钩子函数是基于函数组件的，而“will”系列的生命周期方法是基于类组件的。
react新出来两个钩子函数是什么？和删掉的will系列有什么区别？react废弃了哪些钩子？为什么？
m0_60676278的博客
03-15 682
React16新的生命周期弃用了：新增了：新增的钩子函数能够代替弃用的三个钩子函数React16并没有删除这三个钩子函数，但是不能和新的钩子函getDerivedStateFromProps，getSnapshotBeforeUpdate数混用React17将会删除componentWillMount，componentWillReceiveProps，omponentWillUpdate新增了对错误的处理 componentDidCatch。
说说react新出来两个钩子函数是什么？和删掉的will系列有什么区别？
2201_75475459的博客
08-20 54
在React16的Fiber架构中，调和过程会多次执行will周期，不再是一次执行，失去了原有的意义。此外，多次执行，在周期中如果有setState或dom操作，会触发多次重绘，影响性能，也会导致数据错乱。2、新生命周期中新增了两个钩子，分别为getDerivedStateFromProps（从props中得到衍生的state）和getSnapshotBeforeUpdate。使用场景：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps。
面试题整理3
weixin_66395374的博客
12-14 111
闭包（closure）：函数嵌套函数，内部的函数就是闭包，正常情况下，函数执行完成，内部变量会销毁（销毁：释放内存空间），内部函数没有执行完成，外部函数变量不会被销毁，可以利用闭包模拟私有属性，实现数据隐藏和封装，比如防抖和节流函数封装使用了闭包，但要避免滥用闭包导致内存泄漏10.从浏览器地址栏输入url到显示页面的步骤？1、首先在浏览器地址栏中输入url2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
说说React相关面试题
weixin_54189624的博客
12-14 357
前端面试题
react 新旧生命周期有什么区别？新增了哪些钩子？废弃了哪些钩子？为什么废弃？
行星飞行的博客
07-09 861
在日常面试中，若对于了解的同学而言，多多少少会被问到生命周期相关的问题，比如大致阐述生命周期的运作流程，以及每个钩子函数大致的作用，而我在两位出去面试的同事那里了解到，他们都遇到了这个高频问题。我在以往文章中介绍旧版生命周期钩子函数的作用，当时也有同学留言到我未提及新增的部分钩子的作用，那么本文正好对于旧版本生命周期做一次运转对比，补全新钩子的作用，同时站在面试题的角度梳理下我们该如何组织语言，那么本文开始。在版本前后存在两套生命周期，之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。新版也只是废弃
spring react_使用React Spring将React动画提升到一个新的水平
weixin_26717681的博客
09-27 1661
spring reactPrerequisites — React basics 先决条件— React基础知识 Animations are the important parts of UX that give an additional feel to the users and add some awesomeness to the application. But implementi...
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---React篇
m0_59529616的博客
08-03 943
★★★ React 事件绑定原理 ★★★ React中的 setState 缺点是什么呢 ★★★ React组件通信如何实现 ★★★ 类组件和函数组件的区别 ★★★ 请你说说React的路由是什么？ ★★★★★ React有哪些性能优化的手段？ ★★★★ React hooks 用过吗，为什么要用？ ★★★★ 虚拟DOM的优劣如何？实现原理？ ★★★★ React 和 Vue 的 diff 时间复杂度从 O(n^3) 优化到 O(n) ，那么 O(n^3) 和 O(n) 是如何计算出来的？
react
qq_38390669的博客
08-23 338
react的使用 引入.js文件使用react 通过脚手架工具来编码 create-react-app 环境准备 安装好node环境 安装npm 查看安装版本 node -v npm -v 安装create-react-app npm install -g create-react-app //换源 npm config set registry https://registry.npm.taobao.org //配置后通过以下方法验证是否成功 npm config get registry 创建一个
React-class——React表单与事件（受控组件与非受控组件、事件类型、事件对象、事件绑定）、React组件生命周期、面试
qq_52301431的博客
10-12 1085
时，一般都要为表单元素传入应用状态中的值，我们需要根据表单元素中用户的输入，对应用数据进行相应的操作和改变。- React对原生的事件系统也进行了封装，在React中的事件对象实际上是一个跨浏览器的**虚拟事件对象** ，它拥有和原生事件对象相同的属性和方法。受控组件的值由props或state传入给受控组件（表单的输入框），用户在元素上交互或输入内容会引起应用state的改变。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到**
React 学习笔记
zxf_CN的博客
12-20 444
1. 脚手架的安装 下载： npm install -g create-react-app 可能会报错，有可能是因为没有权限，以管理员身份运行，就可以了 。 C:\Windows\system32>npm install -g create-react-app D:\TEND\node\create-react-app -> D:\TEND\node\node_modules\create-react-app\index.js + create-react-app@4.0.1 added 67
React中的refs是什么？
Front end development engineer
10-10 380
React 的众多优点之一是它抽象了处理真实 DOM 的复杂性。现在，我们无需手动查询元素、绞尽脑汁思考如何为这些元素添加类又或者是添加样式等，也无需为浏览器兼容性而苦恼，只需编写组件并专注于用户体验即可。然而，仍然有一些情况（虽然很少！）我们需要访问实际的 DOM。而当涉及到实际的 DOM 时，最重要的是要理解并学习如何正确使用 ref 以及 ref 周围的一切。
1.3.ReactOS系统 PAGED_CODE 宏函数的实现
zhyjhacker的博客
10-11 470
ReactOS系统 PAGED_CODE 宏函数的实现ReactOS系统 PAGED_CODE 宏函数的实现。
2.4.ReactOS系统提升IRQL级别KfRaiseIrql 函数
最新发布
zhyjhacker的博客
10-14 295
2.4.ReactOS系统提升IRQL级别KfRaiseIrql 函数。
1.3.ReactOS系统宏函数ASSERT的实现
zhyjhacker的博客
10-11 397
ReactOS系统宏函数ASSERT的实现。
React 为什么引入 Hooks ？
u010194271的博客
10-08 754
React 中的“Hook”之所以得名，是因为它能让你“钩住”函数组件中的状态管理、生命周期和其他特性，类似于编程中常见的“钩子”概念。通过 Hooks，你可以在 React 中更灵活地插入逻辑、管理状态，提供了一种简洁、模块化的方式来构建复杂应用。
React(一) 认识React、熟悉类组件、JSX书写规范、嵌入变量表达式、绑定属性
lxh的博客
10-10 896
认识React，JSX规范及注释，JSX嵌入变量作为子元素、JSX嵌入表达式、JSX绑定属性，class样式、style样式
React里钩子函数是什么意思
04-17
在React中，钩子函数（Hooks）是一种用于在函数组件中添加状态和其他React特性的方式。它们是React 16.8版本引入的新特性。 通过使用钩子函数，您可以在无需编写类组件的情况下，将状态和其他React特性添加到函数组件中。这使得函数组件具有了类组件的功能。 React提供了一些常用的钩子函数，例如useState、useEffect、useContext等。每个钩子函数都有特定的用途和功能。 - useState：用于在函数组件中添加状态管理。它返回一个状态值和一个更新该状态值的函数。 - useEffect：用于在函数组件中执行副作用操作，例如订阅数据、处理DOM操作等。它接收一个回调函数，在组件渲染完成后执行。 - useContext：用于在函数组件中访问React的上下文（Context）。它接收一个上下文对象，并返回该上下文的当前值。 除了上述钩子函数外，还有其他一些常用的钩子函数，如useReducer、useCallback、useMemo等，它们都有不同的用途和功能。 使用钩子函数可以使代码更简洁、易读，并且更容易实现组件之间的复用。同时，它们也提供了更好的性能优化和状态管理的能力。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值