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

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

官网的例子很具有代表性，我先使用其进行分析，然后再举个简单的例子帮助理解。（也可以直接往下查看我的简单例子）

组件是 React 中代码复用的基本单元。但你会发现某些模式并不适合传统组件。

例如，假设有一个CommentList组件，它订阅外部数据源，用以渲染评论列表：

class CommentList extends React.Component {

constructor(props) {

super(props);

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

this.state = {

// 假设 “DataSource” 是个全局范围内的数据源变量，即所有组件都可以拿到

comments: DataSource.getComments()

};

}

componentDidMount() {

// 订阅更改

DataSource.addChangeListener(this.handleChange);

}

componentWillUnmount() {

// 清除订阅

DataSource.removeChangeListener(this.handleChange);

}

handleChange() {

// 当数据源更新时，更新组件状态

this.setState({

comments: DataSource.getComments()

});

}

render() {

return (

{this.state.comments.map((comment) => (

))}

);

}

}

主要观察上面的代码，稍后，编写了一个用于订阅单个博客帖子的组件，该帖子遵循类似的模式：

class BlogPost extends React.Component {

constructor(props) {

super(props);

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

this.state = {

// 同样，使用全局数据源

blogPost: DataSource.getBlogPost(props.id)

};

}

componentDidMount() {

// 订阅更改

DataSource.addChangeListener(this.handleChange);

}

componentWillUnmount() {

// 清除订阅

DataSource.removeChangeListener(this.handleChange);

}

handleChange() {

this.setState({

blogPost: DataSource.getBlogPost(this.props.id)

});

}

render() {

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 = {

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

//OtherPage.js

import React from ‘react’;

class OtherPage extends React.Component {

constructor(props) {

super(props);

this.state = {

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-KxmceFEf-1715156952335)]