You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/mixins.md
+10-6Lines changed: 10 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,10 +6,10 @@ prev: advanced-components.html
6
6
next: api.html
7
7
---
8
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:
10
11
11
12
```javascript
12
-
// mixins-simple.js
13
13
var MyMixin = {
14
14
getMessage:function() {
15
15
return'hello world';
@@ -24,10 +24,13 @@ var MyComponent = React.createClass({
24
24
});
25
25
```
26
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).
28
32
29
33
```javascript
30
-
// mixins-advanced.js
31
34
var Mixin1 = {
32
35
componentDidMount:function() {
33
36
console.log('Mixin1.componentDidMount()');
@@ -49,7 +52,7 @@ var MyComponent = React.createClass({
49
52
});
50
53
```
51
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:
53
56
54
57
```
55
58
Mixin1.componentDidMount()
@@ -58,4 +61,5 @@ Mixin2.componentDidMount()
58
61
59
62
## When should you use mixins?
60
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.
0 commit comments