React Native constructor方法内外this的区别

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时要在构造方法之后，即成员变量要在构造方法之后访问，才能真正访问到