this复习，自定义钩子函数

最新推荐文章于 2023-01-01 17:39:26 发布
最新推荐文章于 2023-01-01 17:39:26 发布
阅读量248 收藏
点赞数
分类专栏： 后端学不走之react 文章标签： 前端 javascript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52563729/article/details/127380821
版权

在类中定义的箭头函数永远都指向我们的实例对象！！！！！

在这里插入图片描述

你说不对啊，下面这种情况我们fn3的箭头函数不是类的对象

在这里插入图片描述
这里的fn3的thiis函数的this应该是window，而不是类实例对象，为什么？？？

因为这个fn3并不是在类中定义的，而是在类中的方法中定义的。我们这里指的类中是代表的是直接在类中定义的箭头函数！！！！！

React中的钩子函数只能在函数组件或自定钩子中调用。当我们需要将React中钩子函数提取到一个公共区域时，就可以使用自定义钩子

自定义钩子是什么，说白了就是调用其他钩子的地方，为什么需要自定义钩子？？因为可以统一调用，我们不再需要一个一个去调用。我们只需要掉自定义钩子就相当与把钩子都调一遍。。其实就是封装其他钩子

自定义钩子其实就是一个普通函数，只是名字需要use开头

在这里插入图片描述

定义：

在这里插入图片描述

使用：

在这里插入图片描述
data后面是别名

pqxpq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
消息钩子函数入门篇
raphyer的专栏
10-02 8067
Windows系统是建立在事件驱动的机制上的，说穿了就是整个系统都是通过消息的传递来实现的。而钩子是Windows系统中非常重要的系统接口，用它可以截获并处理送给其他应用程序的消息，来完成普通应用程序难以实现的功能。钩子可以监视系统或进程中的各种事件消息，截获发往目标窗口的消息并进行处理。这样，我们就可以在系统中安装自定义的钩子，监视系统中特定事件的发生，完成特定的功能，比如截获键盘、鼠标的输入，
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一、什么是钩子函数？ 钩子函数...
vue中的this的问题，mounted钩子函数通过this没能获取到data里定义的key/value
MZ_的博客
03-17 2022
注意钩子函数的定义形式，第一种形式是正确的，写成其它形式会导致 this 指向有误，引起一系列问题。。。 // 第一种形式 mounted(){ // do something } //第二种形式 mounted:()=>{ // do something } //第三种种形式 mounted:function(){ // do something } ...
js高级，this指向问题
qq_52819902的博客
12-01 661
类组件中 1.生命周期中的钩子函数中，this指向当前组件的实例 2.在自己声明的函数内部，this指向的是undefined 例如 在组件中声明一个函数go（）{} render中填一个按钮<button onClick={this.go()}>go1</button> 在执行生命周期时会直接执行button中的go（），触发函数，但是触发函数时又会导致重新运行render。最终导致死循环。 直接this.go显示的是undefined 3.render中声明函数，函
钩子(HOOK)函数教程
热门推荐
心情第一
06-26 5万+
http://blog.sina.com.cn/s/articlelist_1585708262_3_1.html钩子(HOOK)函数教程（一）我们可以首先从字面上了解钩子，钩子是干什么的呢？日常生活中，我们的钩子是用来钩住某种东西的，比如，说，鱼钩是用来钓鱼的，一旦鱼咬了钩，钩子就一直钩住鱼了，任凭鱼在水里怎么游，也逃不出鱼钩的控制。同样的，Windows的钩子Hook也是用来钩东西的，比较抽...
Vue生命周期钩子函数全解析
k464746的博客
03-24 974
文章目录Vue生命周期介绍生命周期图示八个钩子函数详解先创建实例,组件,渲染在页面然后分别调用钩子函数,了解其特性及作用beforeCreat Vue生命周期介绍 Vue实例从创建到销毁的一系列过程叫做实例的声明周期。 vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发） 生命周期可分为四个阶段 创建实例...
用DELPHI编制钩子函数.doc
11-29
DELPHI编制钩子函数 DELPHI是一种流行的编程语言，在Windows操作系统中广泛应用于开发各种应用程序。其中，钩子函数是一个非常重要的概念，钩子函数可以捕获某一特定类型或某一范围的消息，例如键盘消息、鼠标消息...
自定义钩子最佳实践
02-08
自定义钩子以`use`开头，遵循一定的规则，如只能在函数组件或另一个自定义钩子内部调用。它们通过`useState`、`useEffect`等内置钩子来访问React的状态管理功能，并将这些功能打包成更高级别的抽象。例如，可以创建...
深入理解Vue 的钩子函数
10-18
在组件的生命周期中，Vue 提供了一系列的钩子函数，这些钩子函数允许开发者在特定的生命周期阶段执行自定义逻辑。本文将深入探讨Vue的钩子函数，尤其是与Vue Router相关的导航守卫。 首先，我们来了解Vue组件的基本...
Flask框架钩子函数功能与用法分析
12-31
为什么叫做钩子函数呢，是因为钩子函数可以在正常执行的代码中，插入一段自己想要执行的代码，那么这种函数就叫做钩子函数。 before_first_request:Flask项目第一次部署后会执行的钩子函数。 before_request:请求...
Vue.js
m0_46337171的博客
01-28 333
目录前言1.Vue.js1.1 Vue.js 介绍1.1.1 Vue.js是什么?1.1.2 为甚么使用Vue?1.2 Vue.js 基础1.2.1 Vue.js的使用1.2.2 入门程序1.2.3 声明式渲染的好处1.2.4 Vue常用指令1.3 axios1.3.1 Ajax回顾1.3.1.1 什么是Ajax?1.3.1.2 Ajax的作用1.3.1.3 异步与同步1.3.1 axios介绍1.3.2 axios入门1.3.3 axios总结1.4 computed 计算属性1.4.1 什么是计算属性1
钩子函数介绍和总结
qq_43614246的博客
10-09 2万+
Author:快来救救我 ps:快乐废宅 文章目录前言一、钩子函数(Hook)是什么？理解：特点：举例钩子类型二、使用步骤1.引入库2.读入数据总结 前言 我看了其他博客有些对钩子函数讲述的篇幅要不太长，要不太短，所以我打算写一个中等篇幅的，易于看完也能对它大体概况。我也会在后面附上参考的其他人的博客，想要看简短或者详细的，可以点击链接去看。 在开发当作有碰见过几次钩子函数但是一直对这个没有什么概念，所以特意来了解了解，如若有理解错误，请再底下评论，后续会持续更改~ 一、钩子函数(Hook)是什么？ 理.
函数的定义和调用 与 this指向
凉茶铺的博客
01-01 716
介绍了JavaScript的函数的定义和调用 与 this指向
VUE methods,computed,watch,钩子函数里面的函数里面的this到底都包含了那些东西
qq_26239917的博客
07-12 797
VUE里面能轻松对数据进行操作是他最大的优点 最奇妙的东西之一就是他的this对象 这个this到底是谁？ 这里是data部分 data: { firstName: "A", lastName: "B", fName_w:"A B", count:0 }, 这里是 computed...
vue生命周期钩子函数中的this指向问题
weixin_41761270的博客
10-18 3620
vue生命周期钩子函数中的this指的是window对象而不是vue实例， 解决 用bind(this) 用箭头函数
Vue钩子函数中的this为什么能指向Vue的实例而不是指向传入的参数options（Vue源码解读）
milugloomy的博客
09-10 1709
起因 先看一段Vue的代码，在Vue的原型链上增加了一个setData方法，然后实例化Vue对象，传入一个Object类型的参数 Vue.prototype.setData = function (key, val) { if (this.data) { this.data[key] = val } else { this.data = { [key]: ...
vue事件监听函数on中的this指针域
Tang的菜园
10-27 2521
使用eventBus在两个组件A，B之间通讯： //定义全局eventBus用于事件传递 var bus = new Vue(); //A组件 var A = Vue.component({ ... data:{ dataA:1, }, //在钩子函数中将监听_event事件 created:function(){ var this_com = this; bus.$on...
史上最全的Vue生命周期钩子函数11个
在写作的路上持续输出。
04-23 1万+
什么是生命周期？ 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例； 在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新， 在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； 什么是生命周期钩子函数？ 生命周期钩子函数，能够让我们在初始化实例时，添加自己的代码； 生命周期的钩子函数中的this，会默认指向vue的实例; 什么是钩子函数？ beforeCreate created[可以..
vue-router钩子beforeRouteEnter函数获取到this实例
weixin_34191734的博客
11-16 1081
官方文档： const Foo = { template: `...`, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当钩子执行前，组件实例还没被创建 }, beforeRouteUpdate (to, ...
pytest自定义钩子函数
最新发布
08-24
pytest是一个功能强大的Python测试框架，它允许开发者编写自定义钩子函数来扩展其功能。钩子函数是在不同的测试阶段执行的函数，可以用于执行特定操作、修改测试运行环境或生成测试报告等。 下面是一些常见的pytest...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值