The library for web and native user interfaces.
Return of mixin docs
petehunt committed
May 30, 2013 at 14:16 UTC
d73c2b23e06665c57f4e615e2b5cfe122b98ac4d
4 files changed
+70
-7
docs/_config.yml
+7
-7
@@ -1,14 +1,14 @@
1
----
2
-pygments: true
1
+---
2
+markdown: redcarpet
3
name: React
4
+redcarpet:
5
+ extensions:
6
+ - fenced_code_blocks
7
react_version: 0.3.0
5
-exclude:
8
+pygments: true
9
+exclude:
10
- Gemfile
11
- Gemfile.lock
12
- README.md
13
- Rakefile
10
-redcarpet:
11
- extensions:
12
- - fenced_code_blocks
13
-markdown: redcarpet
14
baseurl: /react
docs/_includes/nav_docs.html
+1
@@ -18,6 +18,7 @@
18
<li><a href="/react/docs/event-handling.html"{% if page.id == 'docs-event-handling' %} class="active"{% endif %}>Event Handling</a></li>
19
<li><a href="/react/docs/advanced-components.html"{% if page.id == 'docs-advanced-components' %} class="active"{% endif %}>Advanced Components</a></li>
20
<li><a href="/react/docs/api.html"{% if page.id == 'docs-api' %} class="active"{% endif %}>API</a></li>
21
+ <li><a href="/react/docs/mixins.html"{% if page.id == 'docs-mixins' %} class="active"{% endif %}>Mixins</a></li>
22
</ul>
23
</div>
24
</div>
docs/docs/api.md
+1
@@ -3,6 +3,7 @@ id: docs-api
3
title: React API
4
layout: docs
5
prev: advanced-components.html
6
+next: mixins.html
7
---
8
9
## React
docs/docs/mixins.md
new
+61
@@ -0,0 +1,61 @@
1
+---
2
+id: docs-mixins
3
+title: Mixins
4
+layout: docs
5
+prev: api.html
6
+next: common-questions.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:
10
+
11
+```javascript
12
+// mixins-simple.js
13
+var MyMixin = {
14
+ getMessage: function() {
15
+ return 'hello world';
16
+ }
17
+};
18
+
19
+var MyComponent = React.createClass({
20
+ mixins: [MyMixin],
21
+ render: function() {
22
+ return <div>{this.getMessage()}</div>;
23
+ }
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:
28
+
29
+```javascript
30
+// mixins-advanced.js
31
+var Mixin1 = {
32
+ componentDidMount: function() {
33
+ console.log('Mixin1.componentDidMount()');
34
+ }
35
+};
36
+
37
+var Mixin2 = {
38
+ componentDidMount: function() {
39
+ console.log('Mixin2.componentDidMount()');
40
+ }
41
+};
42
+
43
+
44
+var MyComponent = React.createClass({
45
+ mixins: [Mixin1, Mixin2],
46
+ render: function() {
47
+ return <div>hello world</div>;
48
+ }
49
+});
50
+```
51
+
52
+When MyComponent is mounted in the page the following text will print to the console:
53
+
54
+```
55
+Mixin1.componentDidMount()
56
+Mixin2.componentDidMount()
57
+```
58
+
59
+## When should you use mixins?
60
+
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.