chapter2.3、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'));

简单改写，就可以得到带参装饰器

如果觉得不好接受，可以先写成原始的形式，熟悉了箭头函数语法后，再改成精简的形式。