코드 절약 방법 - React Mixin

구성 요소의 원칙은 모듈화로 서로 독립하지만 때로는 서로 다른 구성 요소 간에 일부 기능을 공용하고 일부 코드를 공유할 수 있다.그래서 React는 이런 문제를 처리하기 위해 믹스를 제공했다.
Mixin은 일부 방법을 정의하는 데 사용됩니다. 이 Mixin의 구성 요소를 사용하면 이러한 방법을 자유롭게 사용할 수 있습니다. (구성 요소에서 정의한 것처럼) 그래서 Mixin은 구성 요소의 확장에 해당하고, Mixin에서도 '생명주기' 방법을 정의할 수 있습니다.
 

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {
            name: "Skippy",
            food: "Pancakes"

        };
    }
};
var ComponentOne = React.createClass({
    mixins: [DefaultNameMixin],
        render: function () {
            return (
                <div>
                <h4>{this.props.name}</h4>
                <p>Favorite food: {this.props.food}</p>
                </div>
            ) ;
        }
});

ReactDOM.render(<ComponentOne/>, document.body);

Mixin이 정의한 일부 기능은 모두 공유할 수 있으며, 만약 우리가 같은 상태와 속성을 사용할 때 오류를 보고할 수 있습니다.
 
 

var DefaultNameMixin = {
    getDefaultProps: function () {
        return {name: "Skippy"};
    }
};
var ComponentTwo = React.createClass({
        mixins: [DefaultNameMixin],
        getDefaultProps: function () {
            return {
                food: "Pancakes",
                name: "Lizy"
            };
        },
        render: function () {
            return (
                <div>
                <h4>{this.props.name}</h4>
        <p>Favorite food: {this.props.food}</p>
    </div>
);
}
});
ReactDOM.render(<ComponentTwo/>, document.body);

 console.log:
 
 

Uncaught Error: Invariant Violation: mergeObjectsWithNoDuplicateKeys(): 
Tried to merge two objects with the same key: name

우리의component와mixin이 모두 생명주기 방법을 함유하고 있을 때, 우리의mixin방법은 시종 먼저 실행될 것이다.

var LogOnMountMixin = {
    componentDidMount: function () {
        console.log("mixin mount method");
    }
};

var ComponentOne = React.createClass({
    mixins: [LogOnMountMixin],
    componentDidMount: function () {

mixin mount method
component one mount method

  console.log("component one mount method"); }, render: function() { return <h2>Hello {this.props.name}</h2>; } }); ReactDOM.render(<ComponentOne/>, document.body);

 console.log:

mixin mount method
component one mount method

우리include가 여러 믹스를 가지고 있을 때, 그들은 왼쪽에서 오른쪽으로 실행할 것이다.

var LogOnMountMixin = {
    componentDidMount: function () {
        console.log("mixin mount method");
    }
};

var MoreLogOnMountMixin = {
    componentDidMount: function () {
        console.log("another mixin mount method");
    }
};
var ComponentOne = React.createClass({
    mixins: [MoreLogOnMountMixin, LogOnMountMixin],
    componentDidMount: function () {
        console.log("component one mount method");
    },
    ...

var ComponentTwo = React.createClass({
    mixins: [LogOnMountMixin, MoreLogOnMountMixin],
    componentDidMount: function () {
        console.log("component two mount method");
    },

 console.log:

another mixin mount method
mixin mount method 
component one mount method

mixin mount method
another mixin mount method 
component two mount method