Skip to content

Commit f586c58

Browse files
committed
1 parent 84d4bbb commit f586c58

File tree

1 file changed

+10
-6
lines changed

1 file changed

+10
-6
lines changed

docs/docs/mixins.md

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ prev: advanced-components.html
66
next: api.html
77
---
88

9-
Mixins allow code to be shared between multiple React components. They're pretty similar to mixins in Python or traits in PHP. Let's look at a simple example:
9+
Mixins allow code to be shared between multiple React components. They are pretty similar to mixins
10+
in Python or traits in PHP. Let's look at a simple example:
1011

1112
```javascript
12-
// mixins-simple.js
1313
var MyMixin = {
1414
getMessage: function() {
1515
return 'hello world';
@@ -24,10 +24,13 @@ var MyComponent = React.createClass({
2424
});
2525
```
2626

27-
A class can use multiple mixins. Multiple mixins can also override any of the lifecycle methods and they'll be called for each mixin. Here's an example:
27+
A class can use multiple mixins, but no two mixins can define the same method. Two mixins can, however,
28+
implement the same [lifecycle method](component-lifecycle.html). In this case, each implementation will be invoked one after another.
29+
30+
The only exception is the `shouldComponentUpdate` lifecycle method. This method may only be implemented once
31+
(either by a mixin or by the component).
2832

2933
```javascript
30-
// mixins-advanced.js
3134
var Mixin1 = {
3235
componentDidMount: function() {
3336
console.log('Mixin1.componentDidMount()');
@@ -49,7 +52,7 @@ var MyComponent = React.createClass({
4952
});
5053
```
5154

52-
When MyComponent is mounted in the page the following text will print to the console:
55+
When `MyComponent` is mounted into the page, the following text will print to the console:
5356

5457
```
5558
Mixin1.componentDidMount()
@@ -58,4 +61,5 @@ Mixin2.componentDidMount()
5861

5962
## When should you use mixins?
6063

61-
In general, add a mixin whenever you want a component to share some utility methods, public interface, or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language.
64+
In general, add a mixin whenever you want a component to share some utility methods, public interface,
65+
or lifecycle behavior. Often it's appropriate to use them as you would use a superclass in another OOP language.

0 commit comments

Comments
 (0)