react 高阶组件学习流程

最新推荐文章于 2025-04-21 09:53:43 发布

原创最新推荐文章于 2025-04-21 09:53:43 发布 · 274 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨了React高阶组件（HOC）的概念，详细解释了其定义、作用及实现步骤，包括创建新组件的函数、组件参数传递、链式调用及装饰器的使用，并提供了源码实例。

react 高阶组件

流程图

在这里插入图片描述

定义

高阶组件是一个函数，参数为组件，返回值为新组件的函数

作用

（1）提高组件复用率

（2）可检测性

（3）保证组件功能的单一性

第一步：创建一个函数，函数内return值为一个新组件

// 接受的function作为参数本身带有props，因此需要双箭头
const foo = Cmp=>props =>{
  return (
    <div className='border'>
      <Cmp {...props} />
    </div>
  );
}

第二步：创建一个参数，参数为一个组件

// 参数为组件
function Child(props) {
  console.log(props)
  return <div>
    child-{props.name}
  </div>
}

第三步：将Child组件传递给foo并使用

const Foo = foo(Child)

function HocPage() {
  return (
    <div>
      <h1> HOC高阶组件</h1>
      <Foo name="child" />
    </div>
  )
}

链式调用

可以把高阶组件作为参数嵌套到其他方法中，在项目中不用嵌套太多

const Foo = foo(foo(Child))

装饰器在高阶组件使用

装饰器必须需要使用在class组件

class组件

@foo
class ClassChild extends Component {
  render() {
    return (
      <div>
        child-{this.props.name}
      </div>
    )
  }
}

使用方法

@foo
class ClassChild extends Component {
  render() {
    return (
      <div>
        child-{this.props.name}
      </div>
    )
  }
}

function HocPage() {
  return (
    <div>
      <h1> HOC高阶组件</h1>
      <Foo name="child" />
      <ClassChild name="classChild" />
    </div>
  )
}

源码展示

// HocPage
import React, { Component } from 'react'
// 是一个函数，参数为组件，返回值为新组件
// 接受的function作为参数本身带有props，因此需要双箭头
const foo = Cmp=>props =>{
  return (
    <div className='border'>
      <Cmp {...props} />
    </div>
  );
}
// 参数为组件
function Child(props) {
  console.log(props)
  return <div>
    child-{props.name}
  </div>
}
// // foo接受child组件
// const Foo = foo(Child)
// 链式调用,项目中不建议嵌套太多层
const Foo = foo(foo(Child))
// @装饰器调用，只能用在class组件上
@foo
// 链式调用
@foo
class ClassChild extends Component {
  render() {
    return (
      <div>
        child-{this.props.name}
      </div>
    )
  }
}

function HocPage() {
  return (
    <div>
      <h1> HOC高阶组件</h1>
      <Foo name="child" />
      <ClassChild name="classChild" />
    </div>
  )
}

export default HocPage