React 中装饰器和混合器的区别

Question

我是一个初学者，发现自己对 mixin 和装饰器感到困惑。有人可以详细说明吗？谢谢。

Answer 1

它们都扩展了 and/or React 组件的覆盖方法。它们用于在组件之间共享通用功能，在扩展 class 不起作用且无意的地方。

一个例子是 PureRenderMixin，它覆盖 shouldComponentUpdate 方法并比较组件的 props 来决定是否应该执行重新渲染。

但是，mixin 已被弃用，不再适用于 React 的 ES6 语法。您的选择是使用继承或装饰器来实现相同的结果。

例子

这是使用装饰器的（某种）PureRenderMixin 示例。我也用了 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
        ));
    }
}

装饰器的一般用法是 @pure(params)。 params 可以包含道具名称，也可以为空。在装饰器中，您会看到 ...props 作为参数。这是传入 params 的地方。

内层函数的参数Component获取传入的React组件，在其上使用装饰器

您可以在您的组件中使用装饰器，如下所示：

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>;
    }

}

它有什么作用？

装饰器覆盖了组件的shouldComponentUpdate方法。每次 React 组件调用其 shouldComponentUpdate 方法时，它现在都使用装饰器中提供的方法。

装饰器本身将 Component 的 props 与它将要接收的下一个 props 进行比较。只有当 props 改变时，组件才会更新。这很好，因为它可以防止不必要的渲染 - 这对性能非常有用！

你看，装饰器基本上是接受参数（例如 React 组件）并修改它们以使代码可重用的函数。这需要一点时间来适应，但这不是火箭科学。 :-)

如果还有什么问题，欢迎随时提问！

React 中装饰器和混合器的区别

Difference between decorators and mixins in react

javascript

ecmascript-6

reactjs