9.vue和react一起学 (*^_^*)

高阶组件（hoc）

高阶组件： 高阶组件是参数为组件，返回值为新组件的函数。
react里面有高阶组件的概念。vue虽然没有显式提出高阶组件，但它也有高阶的影子。

react

以下潦草地实现了一个hoc，哈哈。功能为传入身份组件，各自独立的获取计划（成长，工作）的方法以及计划对象，返回具体的react组件。比如（(Baby, getHomePlan, homePlan)=>Child）

import React from "react"; 

// 计划管理
class Plan {
    subs = [];
    constructor(plans) {
        this.plans = plans;
    }

    addSubs(target) {
        this.subs.push(target);
    }

    changePlans() {
        this.plans = this.plans.reverse();
        this.subs.forEach(target => {
            target.handleChange();
        });
    }

    getGrowthPlan(target){
        const { props:{ sex } } = target;
        switch (sex) {
            case "girl":
                return this.plans[1]
            default:
                return this.plans[0]
        }
    }

    getWorkPlan(target) {
        const { props:{ position } } = target;
        switch (position) {
            case "boss":
                return this.plans[1]
            default:
                return this.plans[0]
        }
    }
}

class Baby extends React.Component {
    render(){
        const { plan, sex } = this.props;
        return (
            <div>我是 {sex}, 我的成长计划: {plan.join()}</div>
        )
    }
}

class Adult extends React.Component {
    render(){
        const { plan, position } = this.props;
        return (
            <div>我是 {position}, 我的工作计划: {plan.join()}</div>
        )
    }
}
// 家庭计划
const homePlan = new Plan([["穷养", "靠自己"], ["富养", "精致"]]);
export const Child = generate(Baby, homePlan.getGrowthPlan.bind(homePlan), homePlan);

// 工作计划
const workPlan = new Plan([["喝茶", "看报"], ["端茶", "倒水"]]);
export const Worker = generate(Adult, workPlan.getWorkPlan.bind(workPlan), workPlan);

export function Boss() {
    return (
        <div>我是boss,<button onClick = {workPlan.changePlans.bind(workPlan)}>我想改变公司的工作计划</button></div>
    )
}

export function Parent() {
    return (
        <div>我是parent,<button onClick = {homePlan.changePlans.bind(homePlan)}>我想改变孩子的成长计划</button></div>
    )
}

/**
 *@description hoc，传入身份组件，各自独立的获取计划（成长，工作）的方法以及计划对象。
 *@return react组件
*/

function generate (Status, getPlan, plan) {
    return class extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                plan: []
            }
            this.handleChange.bind(this);
        }

        componentDidMount(){
            plan.addSubs(this);
            this.setState({
                plan: getPlan(this)
            });
        }

        handleChange() {
            this.setState({
                plan: getPlan(this)
            });
        }

        render(){
            const { plan } = this.state;
            return (<Status plan = {plan} {...this.props}/>)
        }
    }
}

vue

vue的高阶具体体现在mixins，但vue官方——不推荐在应用代码中使用。其实react之前也是有mixins。后面因为潜在的问题而被抛弃了。
以下react官方给出的使用mixins时潜在的问题：

1. Mixins引入隐式依赖
2. Mixins导致名称冲突
3. Mixins导致滚雪球的复杂性

—————————— 引自文章 为什么要抛弃 mixins 以及如何转换现有组件。

尽管vue的mixins会有一套自己的选项合并策略。但是以上这些问题还是会无法避免。
vue关于Mixins的使用可以看下我之前写的 文章。