Created
May 24, 2017 10:49
-
-
Save thanhcs94/789f160f2870ae60bb6430a6b9a90656 to your computer and use it in GitHub Desktop.
React-Native , arrow function
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Approach 1: Use React.createClass | |
var HelloWorld = React.createClass({ | |
getInitialState() { | |
return { message: 'Hi' }; | |
}, | |
logMessage() { | |
// this magically works because React.createClass autobinds. | |
console.log(this.state.message); | |
}, | |
render() { | |
return ( | |
<input type="button" value="Log" onClick={this.logMessage} /> | |
); | |
} | |
}); | |
// Approach 2: Bind in Render | |
class HelloWorld extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { message: 'Hi' }; | |
} | |
logMessage() { | |
// This works because of the bind in render below. | |
console.log(this.state.message); | |
} | |
render() { | |
return ( | |
<input type="button" value="Log" onClick={this.logMessage.bind(this)} /> | |
); | |
} | |
} | |
// Approach 3: Use Arrow Function in Render | |
class HelloWorld extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { message: 'Hi' }; | |
} | |
logMessage() { | |
// This works because of the arrow function in render below. | |
console.log(this.state.message); | |
} | |
render() { | |
return ( | |
<input type="button" value="Log" onClick={() => this.logMessage()} /> | |
); | |
} | |
} | |
// Approach 4: Bind in Constructor | |
class HelloWorld extends React.Component { | |
constructor(props) { | |
super(props); | |
this.state = { message: 'Hi' }; | |
this.logMessage = this.logMessage.bind(this); | |
} | |
logMessage() { | |
// This works because of the bind in the constructor above. | |
console.log(this.state.message); | |
} | |
render() { | |
return ( | |
<input type="button" value="Log" onClick={this.logMessage} /> | |
); | |
} | |
} | |
// Approach 5: Arrow Function in Class Property | |
class HelloWorld extends React.Component { | |
// Note that state is a property, | |
// so no constructor is needed in this case. | |
state = { | |
message: 'Hi' | |
}; | |
logMessage = () => { | |
// This works because arrow funcs adopt the this binding of the enclosing scope. | |
console.log(this.state.message); | |
}; | |
render() { | |
return ( | |
<input type="button" value="Log" onClick={this.logMessage} /> | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
from : https://medium.freecodecamp.com/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56