chapter2.三、react高阶组件，装饰器

React 技术

高阶组件

let Root = props => <div>{props.schoolName}</div>;

若是要在上例的Root组件进行加强怎么办？例如将Root组件的div外部再加入其它div。

let Wrapper = function (Component, props) {
    return (
        <div>
            {props.name}
            <hr />
            <Component />
        </div>
    );
};
let Root = props => <div>{props.name}</div>;

柯里化

import React from "react";
import ReactDom from "react-dom"

let Wrapper = function (Component) {
    function _wrapper (props) {
        return (
        <div>
            {props.name}
            <hr />
            <Component />
        </div>
    );
    }
    return _wrapper
};
let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

简化Wrapper

import React from "react";
import ReactDom from "react-dom"

let Wrapper = function (Component) {
    return  (props) => 
        <div>
            {props.name}
            <hr />
            <Component />
        </div>
    ;
};
let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

继续化简

import React from "react";
import ReactDom from "react-dom"

let Wrapper =  (Component) => (props) => 
        <div>
            {props.name}
            <hr />
            <Component />
        </div>

let Root = props => <div>{props.schoolName}</div>;
let NewComp = Wrapper(Root) // 返回一个包装后的元素
ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

装饰器

新版ES2016中增长了装饰器的支持，所以能够使用装饰器改造上面的代码

装饰器在ES2016能够装饰类，因此，将Root改写成类

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = Component => props =>
    (<div>
        {props.Name}
        <hr />
        <Component />
    </div>);

@Wrapper
class Root extends React.Component {
    render() {
        return <div>Root</div>;
    }
}

ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

能够让Root也显示出name属性

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = Component => props =>
    (<div>
        {props.Name}
        <hr />
        <Component {...props} />
    </div>);

@Wrapper
class Root extends React.Component {
    render() {
        return <div>{this.props.Name}</div>;
    }
}

ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

 

使用 <Component {...props} /> 至关于给组件增长了属性。

带参装饰器

import React from 'react';
import ReactDom from 'react-dom';

let Wrapper = id => Component => props =>
    (<div id={id}>
        {props.Name}
        <hr />
        <Component {...props} />
    </div>);

@Wrapper("wrapper")
class Root extends React.Component {
    render() {
        return <div>{this.props.Name}</div>;
    }
}

ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

简单改写，就能够获得带参装饰器

若是以为很差接受，能够先写成原始的形式，熟悉了箭头函数语法后，再改为精简的形式。