The library for web and native user interfaces.
@yungsters
petehunt committed
May 30, 2013 at 14:45 UTC
f586c58f960f6efb994a9fa325c524e1150844ad
1 file changed
+10
-6
docs/docs/mixins.md
+10
-6
@@ -6,10 +6,10 @@ prev: advanced-components.html
6
next: api.html
7
---
8
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:
11
12
```javascript
12
-// mixins-simple.js
13
var MyMixin = {
14
getMessage: function() {
15
return 'hello world';
@@ -24,10 +24,13 @@ var MyComponent = React.createClass({
24
});
25
```
26
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).
32
33
```javascript
30
-// mixins-advanced.js
34
var Mixin1 = {
35
componentDidMount: function() {
36
console.log('Mixin1.componentDidMount()');
@@ -49,7 +52,7 @@ var MyComponent = React.createClass({
52
});
53
```
54
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:
56
57
```
58
Mixin1.componentDidMount()
@@ -58,4 +61,5 @@ Mixin2.componentDidMount()
61
62
## When should you use mixins?
63
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.