React-高阶组件的使用说明

最新推荐文章于 2024-03-13 20:23:50 发布

吃瓜群众欢乐多

最新推荐文章于 2024-03-13 20:23:50 发布

阅读量244

点赞数

分类专栏： React

本文链接：https://blog.youkuaiyun.com/sinat_36146776/article/details/115457963

版权

React 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了React中的高阶组件（HOC）概念，它是一种用于复用组件逻辑的高级技巧，非React官方API。高阶组件是接收组件作为参数并返回新组件的函数，常用于状态管理和数据注入。文中通过一个具体的例子展示了如何创建一个用于全局共享`userInfo`的HOC，并展示了如何在其他组件中使用这个HOC来获取和共享数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概念

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。

具体而言，高阶组件是参数为组件，返回值为新组件的函数。
组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。
HOC 在 React 的第三方库中很常见，例如 Redux 的 connect 和 Relay 的 createFragmentContainer。

举例说明

常用userInfo的数据全局共享

import React, { Component } from 'react'

const WithStorage = WrappedComponent => {
  return class extends Component {
    state = {
      user: {}
    }

    componentWillMount() {
      let user = JSON.parse(localStorage.getItem( 'userInfo' ) as string) || {}
      this.setState( { user } )
    }

    render() {
      return <WrappedComponent user={ this.state.user } { ...this.props } />
    }
  }
}

export default WithStorage

其他组件要想使用userinfo的数据，可通过

import React  from "react";
import WithStorage from '@/utils/WithStorage'
const DynamicFieldSet = (props) => {
  const { innerName, user} = props;
  console.log(props) //获取得到userInfo的数据
  return <>{...props}</>
}
export default WithStorage(DynamicFieldSet)

官网