ES6中React Mixins的运用（第四部份）

2019年8月25日 147次阅读 来源: 愿码社区技术团队

这是React和ECMAScript6／ECMAScript7连系运用系列文章的第四篇。

下面是一切系列文章章节的链接：

本篇文章Github源码

ReactJS
《ES6中React Mixins的运用（第四部份）》《ES6中React Mixins的运用（第四部份）》

当我们运用React.createClass()时，你有能够运用所谓的夹杂开辟。它们许可插进去一些分外的要领到React组建中。这个观点不只是针对React，它也存在于vanilla JS和别的的言语/框架中。

在ES6的React组建建立中，不太能够运用夹杂机制。我不会深切斟酌这个决议的缘由。假如你感兴趣，你能够点击下面的链接，相识更多.

相反，我们将越发专注于详细的例子。

Higher-Order Components instead of Mixins

我们将运用本系列文章中的part2中的 CartItem组建。你能够从这里猎取到源码。

让我们来看看怎样陪伴别的的组建天生一个每秒加1的定时器。

为了更好的申明，我们将不转变CartItem的代码。我们从新供应新的组建，这个新的组建不会损坏CartItem的原始内容。而是会在坚持CartItem原始内容的情况下，对CartItem加强一些分外的要领。

这听起来很神奇，随着我，他会逐步的变得越发清楚。

让我们设想我们已经有了IntervalEnhance组建：

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here
}

export default IntervalEnhance(CartItem);

如今该是时刻写IntervalEnhance组建了。我们将增添一个文件名为intervalEnhance.jsx文件。

import React from 'react';

export var IntervalEnhance = ComposedComponent => class extends React.Component {

    static displayName = 'ComponentEnhancedWithIntervalHOC';

    constructor(props) {
        super(props);
        this.state = {
            seconds: 0
        };
    }

    componentDidMount() {
        this.interval = setInterval(this.tick.bind(this), 1000);
    }

    componentWillUnmount() {
        clearInterval(this.interval);
    }

    tick() {
        this.setState({
            seconds: this.state.seconds + 1000
        });
    }

    render() {
        return <ComposedComponent {...this.props} {...this.state} />;
    }
};

代码诠释：

  • Line 3.ComposedComponent => class extends React.Component部份的代码等价于定义一个返回class的要领。ComposedComponent是我们愿望加强的组建(在我们这个案例中，它是CartItem),经由过程运用export var IntervalEnhance，我们能够把全部要领作为IntervalEnhance(指向上面代码中的CartItem)导出。

  • Line 5.协助调试。在React DevTools中，这个组建将被命名为ComponentEnhancedWithIntervalHOC。

  • Lines 7-12. 初始化一个值为0，名字为seconds的状态机变量。

  • Lines 14-26. 为这个组建供应启动和住手的性命周期函数。

  • Line 29. 在这里有许多感兴趣的东西。这一即将给我的组建增添一切的state和props而且转换成CartItem组建。同时，经由过程这行代码的设置，在CartItem中我们将能够一般接见this.state.seconds属性。

末了一步须要转变CartItem component的render要领。我们将在这个视图上直接输出this.state.seconds.

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

class CartItem extends React.Component {
    // component code here

    render() {
        return <article className="row large-4">
                <!-- some other tags here -->                    
                <p className="large-12 column">
                    <strong>Time elapsed for interval: </strong>
                    {this.props.seconds} ms
                </p>    
            </article>;
        }
}
export default IntervalEnhance(CartItem);

在浏览器中翻开这个页面，你将瞥见每秒跳动一次的label。

《ES6中React Mixins的运用（第四部份）》

注重 – 没有触碰CartItem组建(经由过程render要领的星散)就全完整搞定！这就是高阶组建的气力。

如今，请看看末了一切的代码。假如代码不清楚或许有题目，很愉快你能供应响应的反应。

Use ES7 Decorators instead of Mixins

假如你喜好ES7装潢，能够运用一种熟习的体式格局来运用他们。

起首，装置babel-plugin-transform-decorators-legacy.

npm install --save-dev babel-plugin-transform-decorators-legacy

从GitHub repository猎取修悛改的gulpfile.js文件源码。

然后：

import React from 'react';
import { IntervalEnhance } from "./intervalEnhance";

@IntervalEnhance
export default class CartItem extends React.Component {
    // component code here
}

What about PureRenderMixin?

假如你喜好运用像PureRenderMixin的mixins,那末在ES6中有差别的要领能够完成雷同的功用。他们中的个中一个以下：

class Foo extends React.Component {
   constructor(props) {
     super(props);
     this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
   }
   render () {
     return <div>Helllo</div>
   }
 }

结论

高阶组建功用强大和极具表现力。如今高阶组建普遍的被运用来替换老式的mixin句法。随时建立本身的机制来处置惩罚组件之间的夹杂功用。

参考文档

扫码申请加入全栈部落
《ES6中React Mixins的运用（第四部份）》
    原文作者：愿码社区技术团队
    原文地址: https://segmentfault.com/a/1190000010185435
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞