CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Ajay Gaur
Ajay Gaur

Reputation: 5270

Difference between decorators and mixins in react

I am a beginner to react and finding myself confused between mixin and decorators. Can somebody elaborate? Thanks.

Upvotes: 2

Views: 977

Answers (1)

Rico Herwig
Rico Herwig

Reputation: 1712

They both extend and/or override methods of the React Component. They are used to share common functionality between components, in places where extending a class would not work and is not intended.

An example would be the PureRenderMixin, which overrides the shouldComponentUpdate method and compares the props of a component to decide, if a rerender should be executed.

However, mixins are deprecated and do not work with the ES6 syntax of React anymore. Your options are either to use inheritance or decorators to achieve the same result.

Example

Here is an example of the (kind of) PureRenderMixin, using a decorator. Also I used Immutable.js.

// pure.js
import React from 'react';
import assign from 'object-assign';
import {is} from 'immutable';

/**
 * Pure Render Decorator
 * @param props
 * @returns {function()}
 */
export default (...props) => (Component) => class PureComponent extends React.Component {

    shouldComponentUpdate(nextProps) {
        if (!props.length) {
            props = Object.keys(nextProps);
        }
        for (let i = 0, l = props.length; i < l; i++) {
            if (!is(nextProps[props[i]], this.props[props[i]])) {
                return true;
            }
        }
        return false;
    }

    render() {
        return React.createElement(Component, assign({},
            this.props,
            this.state
        ));
    }
}

The general usage of the decorator would be @pure(params). params can contain the name of the props or can be empty. In the decorator you see the ...props as a parameter. This is where the params are passed in.

The parameter Component of the inner function gets the React Component passed in, on which you use the decorator.

You can use the decorator in your component as follows:

import React from 'react';
import pure from './pure.js';

@pure('myProp', 'anotherProp')
export default MyComponent extends React.Component {

    static propTypes = {
        myProp: React.PropTypes.any,
        anotherProp: React.PropTypes.any
    }

    render() {
        return <p>I only re-render, when my props changed.</p>;
    }

}

What does it do?

The decorator overrides the shouldComponentUpdate method of the component. Everytime the React Component calls its shouldComponentUpdate method, it now uses the one provided in the decorator.

The decorator itself compares the props of the Component to the next props that it is going to receive. Only if the props change, the component will update. This is nice, because it prevents unnecessary rendering - that's great for performance!

You see, decorators are basically functions that take parameters (such as the React Component) and modify them in order to make code reusable. It takes a bit of getting used to, but its no rocket science. :-)

If there are any more questions, please feel free to ask!

Upvotes: 5

Related Questions