react面试题-什么是高阶组件？如何实现？

高阶组件可以看作 React 对装饰模式的一种实现，高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。高阶组件（ HOC ）是 React 中的高级技术，用来重用组件逻辑。但高阶组件本身并不是 ReactAPI 。它只是一种模式，这种模式是由 React 自身的组合性质必然产生的。

我们可以通过以下两种方式实现高阶组件：

属性代理

函数返回一个我们自己定义的组件，然后在 render 中返回要包裹的组件，这样我们就可以代理所有传入的 props ，并且决定如何渲染，实际上 ，这种方式生成的高阶组件就是原组件的父组件，上面的函数 visible 就是一个 HOC 属性代理的实现方式。

const loading = info => Wrapcomponent => {
  return class loadings extends Component {
    render() {
      const state = {
        loading_show: () => {
          let loadmodal = document.createElement('div');
          loadmodal.innerHTML = `<p id="loading" style="position:fixed;top:100px;z-index:10;background-color:black">${info}</p>`;
          document.getElementsByTagName('body')[0].appendChild(loadmodal);
        },
        remove_loading: () => {
          document.getElementById('loading').remove();
        }
      };
      return (<div>
        <Wrapcomponent {...this.props} {...state} />
      </div>);
    }
  };
};
export default loading;

反向继承

返回一个组件，继承原组件，在 render 中调用原组件的 render 。由于继承了原组件，能通过this访问到原组件的 生命周期、props、state、render 等，相比属性代理它能操作更多的属性。

const message = Wrapcomponent => {
  return class HOC extends Wrapcomponent {
    componentDidMount() {
      let messagess = document.createElement('div');
      messagess.innerHTML = '<p style="position:fixed;top:100px;z-index:10;background-color:black">消息类高阶组件！</p>';
      document.getElementsByTagName('body')[0].appendChild(messagess);
      super.componentDidMount();  // componentDidMount方法劫持，不覆盖
    }

    render() {
      return super.render();  // super -> Wrapcomponent 
    }
  };
};
export default message;

HOC 可以实现的功能：

• 组合渲染
• 条件渲染
• 操作 props
• 获取 refs
• 状态管理
• 操作 state
• 渲染劫持

HOC 在业务中的实际应用场景：

• 日志打点
• 权限控制
• 双向绑定
• 表单校验

*获取更多面试题
请添加下方微信（备注CSDN推荐）