React Binding Patterns: 5 Approaches for Handling this

Datetime:2016-08-23 00:09:27          Topic: React           Share

Cory House:

There are at least five ways to handle the this context in React. Let’s consider the merits of each approach.

  1. Use React.createClass
  2. Bind in Render
  3. Use Arrow Function in Render
  4. Bind in Constructor
  5. Use Arrow Function in Class Property

Currently I’m mostly using Approach 4 (“Bind in Constructor”), but Approach 5 (“Arrow Function in Class Property”) looks like something to switch to after having read the post.

React Binding Patterns: 5 Approaches for Handling this

On a sidenote, ES2016 will sport the Function Bind Operator ( :: ) which acts a a shorthand for .bind(context) .

// ES2015
this.logMessage = this.logMessage.bind(this);

// ES2016
this.logMessage = ::this.logMessage;

JavaScript ES7 Function Bind Syntax →





About List