高阶组件: (HOC)  Higher Order Component  高阶组件

	高阶组件其实就是一个函数
	函数的参数接收了一个组件，返回一个新的组件

<script type="text/babel">
    function FnHOC(MyCom){ //高阶组件
        return class Mid extends React.Component{
            render(){
                return (<div>
                    <MyCom name="welcome" title="suzhou">
                        <strong>爱记录</strong>
                    </MyCom>
                </div>)
            }
        }
    }

    class Basic extends React.Component{
        render(){
            return (<div {...this.props}>
                <h1>{this.props.name}</h1>
                {this.props.children}
            </div>)
        }
    }
    let NewComponent = FnHOC(Basic);
    ReactDOM.render(
        <NewComponent />,
        document.querySelector('#root')
    )
</script>

<script type="text/babel">
    /* function FnHOC(MyCom){ //高阶组件
        return class Mid extends React.Component{
            render(){
                return (<div>
                    <MyCom name="welcome" title="suzhou">
                        <strong>爱记录</strong>
                    </MyCom>
                </div>)
            }
        }
    } */
    const FnHOC = (Component) => () =>(<div>
        <Component name="welcome" title="suzhou">
            <strong>爱记录</strong>
        </Component>
    </div>);


    const Basic = (props) =>(<div {...props}>
        <h1>{props.name}</h1>
        {props.children}
    </div>);

    let NewComponent = FnHOC(Basic);
    ReactDOM.render(
        <NewComponent />,
        document.querySelector('#root')
    )
</script>