Binding in React Native
22 Nov 2018
In his course React for Beginners, Wes Bos recommends we using class fields/properties rather than normal functions that are bound in the constructor. I believe the official react docs also used to recommend this approach but now they warn that this is experimental
Example of class fields/properties:
class MyClass extends Component {
myMethod = () => {}
}
myMethod is a class property which you can call in React with onPress={this.myMethod}
Note that you don’t use () with onPress={this.myMethod()} because that would call the function as soon as the screen is mounted.
I think this is much better than the deprecated this.myMethod.bind(this)
I don’t think you can send parameter with class fields/properties so if the method receives a parameter I like to use arrow in render:
onPress={() => this.myMethod(myVariable)}
Another thing I found, in my testing I couldn’t use the class property or arrow functions for the deprecated ListView. Why I am still using ListView? I am using it in conjunction with Realm and it is highly recommended that you use the ListView and ListView.DataSource provided by the realm/react-native module
Maybe that was just me messing things up. Not sure.
I continued to use class properties when I was writing normal js classes (not just jsx for React) because apparently it has advantages. One disadvantage is it gets messed up if you try to use super.myMethod. I don’t completely understand this but using this rather than super seemed to work for me.
Direction the community is taking:
