Skip to content

Instantly share code, notes, and snippets.

@kenmistry

kenmistry/ReactBindingApproaches.js

Forked from coryhouse/ReactBindingApproaches.js
Created January 31, 2019 03:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kenmistry/b20e99a8ccdf37335976d375a5fa21fe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kenmistry/b20e99a8ccdf37335976d375a5fa21fe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @coryhouse coryhouse revised this gist Jan 7, 2017. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -49,7 +49,7 @@ class HelloWorld extends React.Component {

    render() {
    return (
    <input type="button" value="Log" onClick={() => logMessage} />
    <input type="button" value="Log" onClick={() => this.logMessage()} />
    );
    }
    }
    @@ -69,7 +69,7 @@ class HelloWorld extends React.Component {

    render() {
    return (
    <input type="button" value="Log" onClick={() => this.logMessage()} />
    <input type="button" value="Log" onClick={this.logMessage} />
    );
    }
    }
  2. @coryhouse coryhouse revised this gist Jan 7, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -69,7 +69,7 @@ class HelloWorld extends React.Component {

    render() {
    return (
    <input type="button" value="Log" onClick={this.logMessage} />
    <input type="button" value="Log" onClick={() => this.logMessage()} />
    );
    }
    }
  3. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 6 additions and 6 deletions.
    12 changes: 6 additions & 6 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -76,10 +76,11 @@ class HelloWorld extends React.Component {

    // Approach 5: Arrow Function in Class Property
    class HelloWorld extends React.Component {
    constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
    }
    // 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.
    @@ -91,5 +92,4 @@ class HelloWorld extends React.Component {
    <input type="button" value="Log" onClick={this.logMessage} />
    );
    }
    }

    }
  4. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 8 additions and 8 deletions.
    16 changes: 8 additions & 8 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,8 +18,8 @@ var HelloWorld = React.createClass({

    // Approach 2: Bind in Render
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
    }

    @@ -37,8 +37,8 @@ class HelloWorld extends React.Component {

    // Approach 3: Use Arrow Function in Render
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
    }

    @@ -56,8 +56,8 @@ class HelloWorld extends React.Component {

    // Approach 4: Bind in Constructor
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
    this.logMessage = this.logMessage.bind(this);
    }
    @@ -76,8 +76,8 @@ class HelloWorld extends React.Component {

    // Approach 5: Arrow Function in Class Property
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    constructor(props) {
    super(props);
    this.state = { message: 'Hi' };
    }

  5. @coryhouse coryhouse revised this gist Aug 17, 2016. No changes.
  6. @coryhouse coryhouse revised this gist Aug 17, 2016. No changes.
  7. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 21 additions and 3 deletions.
    24 changes: 21 additions & 3 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,19 +24,37 @@ class HelloWorld extends React.Component {
    }

    logMessage() {
    // This works because of the bind / arrow function in render below.
    // 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, context) {
    super(props, context);
    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={() => logMessage} />
    );
    }
    }

    // Approach 3: Bind in Constructor
    // Approach 4: Bind in Constructor
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    @@ -56,7 +74,7 @@ class HelloWorld extends React.Component {
    }
    }

    // Approach 4: Arrow Function in Class Property
    // Approach 5: Arrow Function in Class Property
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
  8. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -24,13 +24,14 @@ class HelloWorld extends React.Component {
    }

    logMessage() {
    // This works because of the bind in render below.
    // This works because of the bind / arrow function in render below.
    console.log(this.state.message);
    }

    render() {
    return (
    <input type="button" value="Log" onClick={this.logMessage.bind(this)} />
    <input type="button" value="Log" onClick={() => logMessage} />
    );
    }
    }
  9. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@ var HelloWorld = React.createClass({
    },

    logMessage() {
    // this magically works because React.createClass autobinds.
    console.log(this.state.message);
    },

    @@ -23,6 +24,7 @@ class HelloWorld extends React.Component {
    }

    logMessage() {
    // This works because of the bind in render below.
    console.log(this.state.message);
    }

    @@ -42,6 +44,7 @@ class HelloWorld extends React.Component {
    }

    logMessage() {
    // This works because of the bind in the constructor above.
    console.log(this.state.message);
    }

    @@ -60,6 +63,7 @@ class HelloWorld extends React.Component {
    }

    logMessage = () => {
    // This works because arrow funcs adopt the this binding of the enclosing scope.
    console.log(this.state.message);
    };

  10. @coryhouse coryhouse revised this gist Aug 17, 2016. 1 changed file with 54 additions and 2 deletions.
    56 changes: 54 additions & 2 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,39 @@
    // Approach #
    // Approach 1: Use React.createClass
    var HelloWorld = React.createClass({
    getInitialState() {
    return { message: 'Hi' };
    },

    logMessage() {
    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, context) {
    super(props, context);
    this.state = { message: 'Hi' };
    }

    logMessage() {
    console.log(this.state.message);
    }

    render() {
    return (
    <input type="button" value="Log" onClick={this.logMessage.bind(this)} />
    );
    }
    }

    // Approach 3: Bind in Constructor
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    @@ -17,4 +52,21 @@ class HelloWorld extends React.Component {
    }
    }

    export default HelloWorld;
    // Approach 4: Arrow Function in Class Property
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    this.state = { message: 'Hi' };
    }

    logMessage = () => {
    console.log(this.state.message);
    };

    render() {
    return (
    <input type="button" value="Log" onClick={this.logMessage} />
    );
    }
    }

  11. @coryhouse coryhouse created this gist Aug 17, 2016.
    20 changes: 20 additions & 0 deletions ReactBindingApproaches.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    // Approach #
    class HelloWorld extends React.Component {
    constructor(props, context) {
    super(props, context);
    this.state = { message: 'Hi' };
    this.logMessage = this.logMessage.bind(this);
    }

    logMessage() {
    console.log(this.state.message);
    }

    render() {
    return (
    <input type="button" value="Log" onClick={this.logMessage} />
    );
    }
    }

    export default HelloWorld;