diff --git a/docs/docs/05-reusable-components.md b/docs/docs/05-reusable-components.md index b79e329e5a..64fcf75cdd 100644 --- a/docs/docs/05-reusable-components.md +++ b/docs/docs/05-reusable-components.md @@ -205,13 +205,14 @@ export class Counter extends React.Component { constructor(props) { super(props); this.state = {count: props.initialCount}; + this.tick = this.tick.bind(this); } tick() { this.setState({count: this.state.count + 1}); } render() { return ( -
+
Clicks: {this.state.count}
); @@ -223,7 +224,34 @@ Counter.defaultProps = { initialCount: 0 }; ### No Autobinding -Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`. +Methods follow the same semantics as regular ES6 classes, meaning that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` or [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`: + +```javascript +// You can use bind() to preserve `this` +
+ +// Or you can use arrow functions +
this.tick()}> +``` + +We recommend that you bind your event handlers in the constructor so they are only bound once for every instance: + +```javascript +constructor(props) { + super(props); + this.state = {count: props.initialCount}; + this.tick = this.tick.bind(this); +} +``` + +Now you can use `this.tick` directly as it was bound once in the constructor: + +```javascript +// It is already bound in the constructor +
+``` + +This is better for performance of your application, especially if you implement [shouldComponentUpdate()](/react/docs/component-specs.html#updating-shouldcomponentupdate) with a [shallow comparison](/react/docs/shallow-compare.html) in the child components. ### No Mixins