React -- 组件间抽象

前端之家收集整理的这篇文章主要介绍了React -- 组件间抽象前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在React组件的构建过程中,常常有这样的场景,有一类功能需要被不同的组件公用。此时就涉及到了抽象的话题。

下面我们重点讨论:mixin和高阶组件。

mixin

mixin 的目的,就是为了创造一种类似多重继承的效果,或者说,组合。

实际上,包括C++等一些年龄较大的OOP语言,都有一个强大但是危险的多重继承特性。现代语言权衡利弊,大都舍弃了它,只采用单继承。但是单继承在实现抽象的时候有很多不便,为了弥补缺失,Java引入接口(interface),其他一些语言则引入了mixin的技巧。

封装mixin方法

方法

const mixin = function(obj,mixins) {
    const newObj = obj;
    newObj.prototype = Object.create(obj.prototype);
    for (let prop in mixins) {
        if (mixins.hasOwnProperty(prop)) {
            newObj.prototype[prop] = mixins[prop]; 
        }
    }
    return newObj; 
}

应用:

const BigMixin = { 
    fly: () => {
        console.log('I can fly'); 
    }
};
const Big = function() { 
    console.log('new big');
};
const FlyBig = mixin(Big,BigMixin);
const flyBig = new FlyBig(); // => 'new big'
flyBig.fly(); // => 'I can fly'

上面这段代码实现对象混入的方法是:用赋值的方式将mixin对象里的方法都挂载到原对象上。

在React中使用mixin

React在使用createClass构建组件时提供了mixin属性,比如官方封装的:PureRenderMixin.

import React from 'react';
import PureRenderMixin from 'react-addons-pure-render-mixin';
React.createClass({
    mixins: [PureRenderMixin],render() {
        return <div>foo</div>;
    }
});

在createClass对象参数中传入数组mixins,里面封装了我们需要的模块。mixins数组也可以添加多个mixin。同时,在React中不允许出现重名普通方法的mixin。而如果是生命周期方法,则React将会将各个模块的生命周期方法叠加在一起然后顺序执行。

使用createClass实现的mixin为组件做了两件事:
1、工具方法:这是mixin的基本功能,如果你希望共享一些工具类的方法,就可以直接定义它们然后在组件中使用。
2、生命周期继承,props和state合并。mixin能够合并生命周期方法。如果有很多mixin来定义componentDidMount这个周期,那么React会很机智的将它们都合并起来执行。同样,mixin也可以作state和props的合并。

ES6 Classes和decorator

然而,当我们使用ES6 classes的形式构建组件的时候,却并不支持mixin。为了使用这个强大的功能,我们还需要采取其他方法,来达到模块重用的目的。

可以使用ES7的语法糖decorator来实现class上的mixin。

core-decorators库为开发者提供了一些实用的decorator,其中也正好实现了我们想要的@mixin。

注:decorator的知识将在下一篇博客中给出。

使用@mixin的代码

import React,{ Component } from 'React'; 
import { mixin } from 'core-decorators';

const PureRender = { 
    shouldComponentUpdate() {}
};
const Theme = { 
    setTheme() {}
};
@mixin(PureRender,Theme)
class MyComponent extends Component {
    render() {} 
}

mixin的问题

1、破坏了原有组件的封装:mixin会混入方法,给原有的组件带来新特性。但同时它也可能带来新的state和props,这意味着组件有一些“不可见”的状态需要我们去维护。另外,mixin也有可能去依赖其他的mixin,这样会建立一个mixin的依赖链,当我们改动一个mixin的状态,很有可能也会影响其他的mixin。

2、命名冲突

3、增加复杂性

针对这些困扰,React提出的新的方式来取代mixin,那就是高阶组件。

高阶组件

如果已经理解高阶函数,那么理解高阶组件也很容易的。

高阶函数:就是一种这样的函数,它接受函数作为参数输入,或者将一个函数作为返回值。例如我们常见的方法map,reduce,sort等都是高阶函数

高阶组件和和高阶函数很类似,高阶组件就是接受一个React组件作为参数输入,输出一个新的React组件。

高阶组件让我们的代码更具有复用性、逻辑性与抽象性,它可以对render方法作劫持,也可以控制props和state。

实现高阶组件的方法有如下两种:
1、属性代理:高阶组件通过被包裹的React组件来操作props。
2、反向继承:高阶组件继承于被包裹的React组件。

属性代理

示例代码

import React,{ Component } from 'React';
const MyContainer = (WrappedComponent) => 
    class extends Component {
        render() {
            return <WrappedComponent {...this.props} />;
        } 
    }

代码中我们可以看到,render方法返回了传入的WrappedComponent组件。这样,我们就可以通过高阶组件来传递props。这种方式就是属性代理。

如何使用上面这个高阶组件:

import React,{ Component } from 'React';
class MyComponent extends Component { 
    // ...
}
export default MyContainer(MyComponent);

这样组件就可以一层层的作为参数被调用,原始组件久具备了高阶组件对它的修饰。这样,保持单个组件封装的同时也保留了易用行。

功能上, 高阶组件一样可以做到像mixin对组件的控制:

1、控制props

我们可以读取、增加、编辑或是移除从WrappedComponent传进来的props。

例如:新增props

import React,{ Component } from 'React';
const MyContainer = (WrappedComponent) => 
    class extends Component {
        render() {
            const newProps = {  text: newText,};
            return <WrappedComponent {...this.props} {...newProps} />; 
        }
    }

注意:

<WrappedComponent {...this.props}/>
// is equivalent to
React.createElement(WrappedComponent,this.props,null)

这样,当调用高阶组件的时候,就可以使用text这个新的props了。

2、通过refs使用引用

3、抽象state

高阶组件可以讲原组件抽象为展示型组件,分离内部状态。

const MyContainer = (WrappedComponent) => 
    class extends Component {
        constructor(props) { 
            super(props); 
            this.state = { name: '',4 };
            this.onNameChange = this.onNameChange.bind(this); 
        }

        onNameChange(event) { 
            this.setState({
                name: event.target.value,})
        }
        render() {
            const newProps = {
                name: {
                    value: this.state.name,onChange: this.onNameChange,},}
            return <WrappedComponent {...this.props} {...newProps} />; 
        }
    }

在这个栗子中,我们把组件中对name prop 的onChange 方法提取到高阶组件中,这样就有效的抽象了同样的state操作。

使用方式:

@MyContainer
class MyComponent extends Component {
    render() {
        return <input name="name" {...this.props.name} />;
    } 
}

高阶组件和mixin的不同:

高阶组件符合函数式编程思想。对于原组件来说,并不会感知到高阶组件的存在。只需要把功能套在它之上就可以了。避免了mixin的副作用。

反向继承

const MyContainer = (WrappedComponent) => 
    class extends WrappedComponent {
        render() {
            return super.render();
        } 
    }

高阶组件返回的组件继承于WrappedComponent。

(待续)

原文链接:https://www.f2er.com/react/303702.html

猜你在找的React相关文章