> For the complete documentation index, see [llms.txt](https://shenjunhong.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shenjunhong.gitbook.io/blog/yuan-ma/react/react-yuan-ma-fen-xi-zhi-mixin.md).

# react 源码分析之mixin

## 采用继承的方式

```js
function extend(obj1, obj2) {
    Object.keys(obj2).forEach(function(key) {
            obj1[key] = obj2[key]
        })
}
class People {}
```

```js
var SetIntervalMixin = {
    componentWillMount: function() {
        this.intervals = [];
    }
    setInterval: function() {
        this.intervals.push(setInterval.apply(null, arguments));
    }
    componentWillUnMount: function() {
        this.intervals.forEach(clearInterval);
    }
}
const Demo1 = React.createClass({
    mixins: [SetIntervalMixin]
})
```

```js
var SetIntervalMixin = { 
／／省略
}
class Demo1 extends Components {};
extends(Demo1.prototype, SetIntervalMixin );


```