react高阶组件

最新推荐文章于 2025-06-11 12:23:56 发布

哈娄

最新推荐文章于 2025-06-11 12:23:56 发布

阅读量263

点赞数

分类专栏：前端

前端专栏收录该内容

84 篇文章

订阅专栏

本文深入探讨了React中高阶组件的概念及其实现方式。通过一个简单的示例，展示了如何使用高阶组件增强组件功能，同时保持代码的清晰性和可复用性。

1 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件

import React, { Component } from 'react';
import simpleHoc from './simple-hoc';

class Usual extends Component {
  render() {
    console.log(this.props, 'props');
    return (
      <div>
        Usual
      </div>
    )
  }
}
export default simpleHoc(Usual);


import React, { Component } from 'react';

const simpleHoc = WrappedComponent => {
  console.log('simpleHoc');
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
export default simpleHoc;