React高阶组件（HOC），让组件复用与扩展变得简单，省时、省力又省心，何不用起来？

return ;

}

}

有没有发现，CommentList和BlogPost不同 - 它们在数据源DataSource上调用不同的方法，且渲染不同的结果。但它们的大部分实现都是一样的：

• 在挂载时，向 DataSource 添加一个更改侦听器。

• 在侦听器内部，当数据源发生变化时，调用 setState。

• 在卸载时，删除侦听器。

你可以想象，在一个大型应用程序中，这种订阅DataSource和调用setState的模式将一次又一次地发生。我们需要一个抽象，允许我们在一个地方定义这个逻辑，并在许多组件之间共享它。这正是高阶组件擅长的地方。

对于订阅了DataSource的组件，比如CommentList和BlogPost，我们可以编写一个创建组件函数。该函数将接受一个子组件作为它的其中一个参数（可以是多个参数），该子组件将订阅数据作为 prop。

//withSubscription为高阶组件，复用逻辑提取到里面

const CommentListWrapper = withSubscription(

CommentList,

(DataSource) => DataSource.getComments()

);

const BlogPostWrapper = withSubscription(

BlogPost,

(DataSource, props) => DataSource.getBlogPost(props.id)

);

//CommentListWrapper、BlogPostWrapper分别为扩展（共享逻辑）之后的新组件

第一个参数是被包装组件。第二个参数通过DataSource和当前的 props 返回我们需要的数据。当渲染这两个组件时，CommentList和BlogPost将传递一个data prop，其中包含从DataSource检索到的最新数据：

// 此函数接收一个组件

function withSubscription(WrappedComponent, selectData) {

// 并返回另一个组件

return class extends React.Component {

constructor(props) {

super(props);

this.handleChange = this.handleChange.bind(this);

this.state = {

data: selectData(DataSource, props) //DataSource全局数据源

};

}

componentDidMount() {

// 负责订阅相关的操作

DataSource.addChangeListener(this.handleChange);

}

componentWillUnmount() {

// 清除订阅

DataSource.removeChangeListener(this.handleChange);

}

handleChange() {

this.setState({

data: selectData(DataSource, this.props)

});

}

render() {

// 并使用新数据渲染被包装的组件!

// 请注意，我们可能还会传递其他属性

return <WrappedComponent data={this.state.data} {…this.props} />;

}

};

}

请注意，HOC 不会修改传入的组件，也不会使用继承来复制其行为。相反，HOC 通过将组件_包装_在容器组件中来_组成_新组件。HOC 是纯函数，没有副作用。

被包装组件接收来自容器组件的所有 prop，同时也接收一个新的用于 render 的data prop。HOC 不需要关心数据的使用方式或原因，而被包装组件也不需要关心数据是怎么来的。

因为withSubscription是一个普通函数，你可以根据需要对参数进行增添或者删除。例如，您可能希望使data prop 的名称可配置，以进一步将 HOC 与包装组件隔离开来。或者你可以接受一个配置shouldComponentUpdate的参数，或者一个配置数据源的参数。因为 HOC 可以控制组件的定义方式，这一切都变得有可能。

与组件一样，withSubscription和包装组件之间的契约完全基于之间传递的 props。这种依赖方式使得替换 HOC 变得容易，只要它们为包装的组件提供相同的 prop 即可。例如你需要改用其他库来获取数据的时候，这一点就很有用。

以上就是官网高阶组件的经典例子，描述的也比较清楚，如果还不太明白，接下来看一个非常简单的实例，帮助大家理解。

现在，有两个组件，分别是Page和OtherPage：

//Page.js

import React from ‘react’;

class Page extends React.Component {

constructor(props) {

super(props);

this.state = {

msg: ‘’,

user: ‘’,

title: ‘Page’

}

}

componentDidMount(){

let greet = sessionStorage.getItem(‘greet’)

let name = sessionStorage.getItem(‘name’)

this.setState({

msg: greet,

user: name

})

}

render(){

return (

{this.state.title}

{this.state.msg}

{this.state.user}

)

}

}

export default Page

（主要观察两个组件之间的逻辑与功能 ）

//OtherPage.js

import React from ‘react’;

class OtherPage extends React.Component {

constructor(props) {

super(props);

this.state = {

msg: ‘’,

user: ‘’,

title: ‘OtherPage’

}

}

componentDidMount(){

let greet = sessionStorage.getItem(‘greet’)

let name = sessionStorage.getItem(‘name’)

this.setState({

msg: greet,

user: name

})

}

render(){

return (

{this.state.title}

这里是关于当前组件的介绍…

{this.state.msg}

{this.state.user}

)

}

}

export default OtherPage

展示两个组件，页面效果如下：

展示比较简单，主要是结合代码，对比页面，发现两个组件的逻辑有一部分的代码是相似的，同样地试想一下，如果相似的逻辑代码量比较大，且使用到的组件比较多，若每个组件重新写一遍，会造成代码重复、冗余，因此我们借鉴官网的例子，将相同逻辑的代码单独定义，并允许多组件之间共享，使用高阶组件实现。

现在，我们需要定义一个高阶组件（一个函数，参数是组件，返回一个新组件），即包裹组件，将相同逻辑提取于此。

//高阶组件Wrapper.js

import React from ‘react’;

// 此函数接收一个组件与组件的标题（当然也可以是自己定义的其他扩展能力）

export default function wrapper(WrappedComponent, pageTitle) {

// 并返回一个新组件

return class extends React.Component {

constructor(props) {

super(props);

this.state = {

msg: ‘’,

user: ‘’,

title: pageTitle

};

}

componentDidMount(){

let greet = sessionStorage.getItem(‘greet’)

let name = sessionStorage.getItem(‘name’)

this.setState({

msg: greet,

user: name

})

}

render() {

// 将属性props（或扩展能力）传给被包裹的组件

return <WrappedComponent {…this.state} />;

}

};

}

此时，Page、OtherPage组件相应调整，去掉重复逻辑部分：

//Page.js

import React from ‘react’;

import wrapper from ‘./Wrapper’; //导入高阶组件（即一个函数）

class Page extends React.Component {

render(){ //此时相似的逻辑已经被提取到高阶组件中，通过props获取状态或扩展能力

return (

{this.props.title}

{this.props.msg}

{this.props.user}

)

}

}

//使用高阶组件对其包裹，传入当前组件与当前组件标题，扩展成新组件

export default wrapper(Page,‘Page’)

//OtherPage.js

import React from ‘react’;

import wrapper from ‘./Wrapper’;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-YmIrgiz1-1712952692590)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。

[外链图片转存中…(img-tPZc5Xwp-1712952692590)]