CODEWITHSUNDEEP
reactjs
Sakthi
Sakthi

Reputation: 61

How "this" got binded in the React component method

I have abstracted my React code here. I have not binded "this" to method A(). That is , in the constructor I didnot do this.A = this.A.bind(this); nor used any arrow syntax for binding. So the compiler cannot know what's the value of this inside A(). Since I have used this.map inside A(), the compiler should have thrown error for this usage. When inspecting the code in Chrome Dev Tools, I found the compiler seems to correctly assign the value of this automatically by var _this2 = this. I couldnt understand the behaviour. Can somebody explain this pls. (I am new to React. Kindly bear if this question sounds silly) 

class Test extends React.Component{
    constructor(props){
     super(props);
     this.map = [];
     this.state = { a: 1};
    }

    A(){
     // some complex logic 
     this.map = Complexlogic() ;  
    }

    componentWillMount(){
     this.A();
    }
}

Upvotes: 2

Views: 36

Answers (1)

Ramzi C.
Ramzi C.

Reputation: 1731

React has created class constructs partially for this purpose. By design, anything created within a class construct is bound to the object context, as it would in any other language's class.

Why you often see functions being 'bound' inside class constructs is for when they have to be passed outside the class context, but you wish to maintain the context of the object for that function. Such as when you pass a function to a component in the render call.

As for why you see "_this2" - its just a way that react manages several different "this" contexts being available at a given time.

Upvotes: 2

Related Questions