React高阶组件

高阶组件***

let Root = props => <div>{props.Name}</div>;
如果要在上例的Root组件进行增强怎么办？例如将Root组件的div外部再加入其它div。

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

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

为了以后用的方便，柯里化这个Wrapper函数

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>Root</div»;

let NewComp = Wrapper (Root) //
ReactDom.render (<NewComp name="Gloo"/>, document. getElementById ('root'));

简化Wrapper

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

再次变化

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

再次变化

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

let Root = props => <div>Root</div>;

let NewComp = Wrapper(Root)

ReactDom.render(<NewComp name='Gloo' />, document.getElementById('root')) ;

装饰器

新版ES 2016中增加了装饰器的支持，因此可以使用装饰器来改造上面的代码

@wrapper // 这是不对的，装饰器装饰函数或类
let Root = props => <div>Root</div>;

ES 2016的装饰器只能装饰类，所以，将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="Gloo" />, document.getElementById ('root')) ;

思考题

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="magedu" /›, document.getElementById('root')) ;

使用<Component {...props} /＞相当于给组件增加了属性。

带参装饰器

想给装饰器函数增加一个id参数

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="magedu" /›, document.getElementById('root')) ;

通过上面的改写，就得到带参装饰器