什么是高阶组件？及高阶组件的使用和应用场景？

2023-08-25 134

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。

什么是高阶组件？

高阶组件（HOC）是 React 中用于重用组件逻辑的高级技术。

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为“纯”组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。

所以你可能会发现，当高阶组件中返回的组件是无状态组件（Stateless Component）时，该高阶组件其实就是一个高阶函数，因为无状态组件本身就是一个纯函数。

无状态组件也称函数式组件。

高阶组件的基本使用

高阶组件内部定义一个类组件或者函数组件作为返回结果例如：

定义类组件返回

// 定义一个高阶组件
// 1.高阶组件会接收一个组件作为参数
function hoc(Cpn) {
  class NewCpn extends PureComponent {
  }
  // 2.并且返回一个新的组件
  return NewCpn
}

定义函数组件返回

// 定义一个高阶组件
// 1.高阶组件会接收一个组件作为参数
function hoc(Cpn) {
  function NewCpn() {
  }
  // 2.并且返回一个新的组件
  return NewCpn
}

高阶组件使用过程

import React, { Component } from 'react'
// 创建一个高阶组件
function hoc(Cpn) {
  function NewCpn() {
    return (
      <div>
        <Cpn />
      </div>
    )
  }
  return NewCpn
}
// 创建一个组件作为参数
class HelloWorld extends Component {
  render() {
    return <h2>Hello World</h2>
  }
}
// 调用高阶组件会返回一个新的组件
const HelloWorldHOC = hoc(HelloWorld)
export default function App() {
  return (
    <div>
      <HelloWorldHOC></HelloWorldHOC>
    </div>
  )
}

高阶组件应用场景

应用一: props增强

例如我们可以定义一个高阶组件, 对传入的组件进行props增强, 也就是为传入的组件添加一些参数, 需要注意的是, 如果传入的组件本身也有传递参数的话, 我们在为组件注入要增强的参数的同时, 还需要将本身传递的参数也注入进来, 实例代码如下:

import React, { Component } from 'react'
// 定义一个高阶组件, 对传入的组件进行props增强
function enhancedProps(WrapperCpn) {
  class NewComponent extends Component {
    constructor() {
      super()
      this.state = {
        userInfo: {
          name: "小红",
          age: 18
        }
      }
    }
    render() {
      // 如果组件本身也有传递参数, 也需要将参数添加进来
      return <WrapperCpn {...this.props} {...this.state.userInfo} />
    }
  }
  return NewComponent
}
// 调用高阶组件, 对组件进行props增强
const Home = enhancedProps(function (props) {
  console.log(props);//{name: '小红', age: 18}
  return <h2>{props.name}-{props.age}</h2>
})
const About = enhancedProps(function (props) {
  console.log(props);//{names: 'zjx', name: '小红', age: 18}
  return <h2>{props.name}-{props.age}-{props.names}</h2>
})
export default function App() {
  return (
    <div>
      <Home></Home>
      <About names={"zjx"}></About>
    </div>
  )
}

应用二: 渲染判定鉴权

一些页面是必须用户登录成功才能进行进入; 如果用户没有进行登录，那么直接跳转到登录页面;

import React, { Component } from 'react'
// 定义一个高阶组件, 对传入的组件进行props增强
// 定义一个高阶组件, 用于鉴权的操作
function loginAuth(WrapperCpn) {
  return props => {
    // 从本地存储中获取token, token有值表示已登录, 没有值表示未登录
    const token = localStorage.getItem("token")
    if (token) {
      return <WrapperCpn {...props} />
    } else {
      return <h2>请先登录, 再跳转到对应的页面中</h2>
    }
  }
}
const Cart = loginAuth(function () {
  return <h2>购物车页面</h2>
})
export default function App() {
  return (
    <div>
      <Cart></Cart>
    </div>
  )
}