资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用

首页/文章专栏/ES6中React Mixins的使用（第四部分）

ES6中React Mixins的使用（第四部分）

Karrdy 发布于2019-08-20 17:59 / 1991人阅读

摘要：在的组建创建中，不太可能使用混合机制。在中，这个组建将被命名为。他们中的其中一个如下结论高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的句法。

这是React和ECMAScript6／ECMAScript7结合使用系列文章的第四篇。

下面是所有系列文章章节的链接：

React 、 ES6 - 介绍（第一部分）

React类、ES7属性初始化（第二部分）

React类，方法绑定（第三部分）

ES6中React Mixins的使用（第四部分）

React 和ES6 之JSPM的使用（第五部分）

React 和 ES6 工作流之 Webpack的使用（第六部分）

本篇文章Github源码

React	JS

当我们使用React.createClass()时，你有可能使用所谓的混合开发。它们允许插入一些额外的方法到React组建中。这个概念不只是针对React，它也存在于vanilla JS和其它的语言/框架中。

在ES6的React组建创建中，不太可能使用混合机制。我不会深入考虑这个决定的原因。如果你感兴趣，你可以点击下面的链接，了解更多.

About mixins in ES6 in official React blog

Mixins Are Dead. Long Live Composition by Dan Abramov

相反，我们将更加专注于具体的例子。

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

代码解释：

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 
                                    
                
                    Time elapsed for interval: 
                    {this.props.seconds} ms
                    
            ;
        }
}
export default IntervalEnhance(CartItem);

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

注意 - 没有触碰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 Helllo
   }
 }

结论

高阶组建功能强大和极具表现力。现在高阶组建广泛的被使用来替代老式的mixin句法。随时创建自己的机制来处理组件之间的混合功能。

参考文档

About mixins in ES6 in official React blog

Mixins Are Dead. Long Live Composition by Dan Abramov

Original gist by Sebastian Markbåge showing usage of composition for React components

JSX Spread Attributes

Gist with PureRenderMixin in ES6

扫码申请加入全栈部落

专线服务服务器托管第四部分 react使用webrtc js中获取字符串部分 linux中的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83981.html

React类，方法绑定（第三部分）

摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始...

livem 2019-08-20 17:59 评论0 收藏0
React Mixin 的前世今生

摘要：但非常不幸，并不原生支持。这个单词相信都很熟悉，高阶函数在函数式编程是一个基本概念，它描述的是这样一种函数，接受函数作为输入，或是输出一个函数。比如常用的工具方法都是高阶函数。恰与的定义完全一致。这种不同很可能会导致问题的产生。在 React component 构建过程中，常常有这样的场景，有一类功能要被不同的 Component 公用，然后看得到文档经常提到 Mixin（混入） ...

姘存按 2019-08-21 10:49 评论0 收藏0
React.createClass和extends Component的区别

摘要：本质上是一个工厂函数，的方式更加接近最新的规范的写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。和的区别主要在于语法区别和状态的区别区别语法区别后一种方法使用的语法，用构造器来构造默认的属性和状态。 createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。...

hlcc 2019-08-19 18:41 评论0 收藏0
React创建组件的三种方式及其区别

摘要：是以的形式来创建的组件的，是目前极为推荐的创建有状态组件的方式，最终会取代形式相对于可以更好实现代码复用。当然，有三种手动绑定方法可以在构造函数中完成绑定，也可以在调用时使用来完成绑定，还可以使用来绑定。 React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：函数式定义的无状态组件 es5原生方式React.createClass定义的组件...

Towers 2019-08-23 12:41 评论0 收藏0
React 、 ES6 - 介绍（第一部分）

摘要：下一步我们将结果输出到文件。这是我们用编写的第一个非常简单的组建。使用将创建的组建导出以便在其它地方能够正常导入使用。这是React和ECMAScript6结合使用系列文章的第一篇。本文出自从零到壹全栈部落下面是所有系列文章章节的链接： React 、 ES6 - 介绍（第一部分） React类、ES7属性初始化（第二部分） React类，方法绑定（第三部分） ES6中Reac...

pingink 2019-08-20 17:59 评论0 收藏0