计算机网络
-
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)]