React HOC 高阶组件

首次使用场景

1. 版本迭代势必同时修改两个模块；

2. 大量逻辑，方法重复。

方案筛选

1. 公共逻辑代码抽离；

2. 公共容器组件抽离；

3. Mixin;

4. 高阶组件。

概念介绍

高阶函数

• 接受一个或多个函数作为输入

• 输出一个函数

高阶组件

高阶组件解读

const HOC = (WrappedComponent) => {
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

const HOC = (WrappedComponent) => {
  return class extends WrappedComponent {
    render() {
      return super.render();
    }
  }
}

属性代理

const HOC = (WrappedComponent) => {
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}

class WrappedComponent extends Component{
    render(){
        //....
    }
}

//高阶组件使用
export default HOC(WrappedComponent)

属性操作

const HOC = (WrappedComponent) => {
  return class extends Component {
    render() {
        const newProps = {
            name: "HOC"
        }
      return <WrappedComponent {...this.props} {...newProps}/>
    }
  }
}

class WrappedComponent extends Component{
    render(){
        //....
    }
}

//高阶组件使用
export default HOC(WrappedComponent)

refs 引用

const HOC = (WrappedComponent) => {
  return class extends Component {
    render() {
      return <WrappedComponent ref={this.onRef} {...this.props}/>
    }
  }
}

抽象 State

const HOC = (WrappedComponent) => {
  return class extends Component {
    onChange = (data = {}) => {
        this.setState(data)
    }
    render() {
        const {name = ''} = this.state;
        const newProps = {
            name: {
                value: name,
                onChange: (e)=>this.onChange({name: e.target.value})
            }
        }
        return <WrappedComponent {...this.props} {...newProps}/>
    }
  }
}

class WrappedComponent extends Component{
    render(){
        const {name} = this.props;
       return <input {...name} />
    }
}

//高阶组件使用
export default HOC(WrappedComponent)

反向继承

const HOC = (WrappedComponent) => {
  return class extends WrappedComponent {
    render() {
      return super.render();
    }
  }
}

操作 state 以及 props。

//该例子来源于 React 高阶组件(HOC)入门指南 掘金
const HOCFactoryFactory = (...params) => {
    // 可以做一些改变 params 的事
    return (WrappedComponent) => {
        return class HOC extends Component {
            render() {
                return <WrappedComponent {...this.props} />;
            }
        }
    }
}

HOCFactoryFactory(params)(WrappedComponent)

//类似场景 redux
connect(params)(Index)

渲染劫持

//例子来源于《深入React技术栈》

const HOC = (WrappedComponent) =>
    class extends WrappedComponent {
        render() {
            const elementsTree = super.render();
            let newProps = {};
            if (elementsTree && elementsTree.type === 'input') {
                newProps = {value: 'may the force be with you'};
            }
            const props = Object.assign({}, elementsTree.props, newProps);
            const newElementsTree = React.cloneElement(elementsTree, props, elementsTree.props.children);
            return newElementsTree;
    }
}
class WrappedComponent extends Component{
    render(){
        return(
            <input value={'Hello World'} />
        )
    }
}
export default HOC(WrappedComponent)