ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

React Native constructor方法内外this的区别

2021-10-20 19:34:27  阅读:175  来源: 互联网

标签:--- console React evaluateFlowTaskInstanceId constructor evaluateInstanceId Nati


React Native中我们经常会使用到成员变量,一般我们会使用this来访问成员变量,

但有时我们会发现constructor中我们给成员变量赋值,但是在constructor外我们取到的值却和constructor中赋的值不一样?

先看运行效果:我们会发现内外的this访问的成员变量的值是不一样的

 

代码如下:

声明并初始化成员变量:

export default class A extends UtilsRootPage<Props, States> {
  evaluateFlowTaskInstanceId: string = 'constructor方法外evaluateFlowTaskInstanceId---456'
  evaluateInstanceId: string = 'constructor方法外evaluateInstanceId---456'

在constructor中赋值:

console.warn('constructor')
    
     this.evaluateFlowTaskInstanceId = 'constructor方法内evaluateFlowTaskInstanceId---123'
     this.evaluateInstanceId = 'constructor方法内evaluateInstanceId---123'

    console.warn(this.evaluateFlowTaskInstanceId + '\n' + this.evaluateInstanceId)

在componentDidMount中调用:

console.warn('componentDidMount')
    console.warn(this.evaluateFlowTaskInstanceId + '\n' + this.evaluateInstanceId)

那这到底是什么鬼呢?

先说结论

this指向的都是当前页面实例,

但constructor中的this(语法层面的this)与componentDidMount中的this(React Native中this)是不一样的,

后者的this是对前者this的包裹,即react中的this是对new A()的包裹,如图:

constructor中的this---new A()

componentDidMount中的this----红框圈住部分

 

综上我们不难发现

React Native中 this是在new A()基础上进行了包裹,包含了一些react内部方法,

综上我们在使用this时要在构造方法之后,即成员变量要在构造方法之后访问,才能真正访问到

标签:---,console,React,evaluateFlowTaskInstanceId,constructor,evaluateInstanceId,Nati
来源: https://www.cnblogs.com/lijianyi/p/15430296.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有