[react] 举例说明什么是高阶组件(HOC)的反向继承

Posted 2021-12-17 前端小歌谣

[react] 举例说明什么是高阶组件(HOC)的反向继承

import React from 'react';

const hoc = (WrappedComponent) => 
  // 集成需要包装的 Component
  return class extends WrappedComponent 
    constructor(props) 
      super(props);
    
    // 重写 component 生命周期
    componentDidMount() 
      console.log('----> hoc didmount');
    
    // render 继续使用被包装的 Component 的 render 方法
    render() 
      return super.render();
    
  


class Title extends React.Component 
  constructor(props) 
    super(props);
  
  componentDidMount() 
    console.log('---> title didmount');
  
  render() 
    return <h1>this.props.title</h1>
  


export default () => 
  const HOCComponent = hoc(Title);
  return <HOCComponent title='title' />

 个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题