说到React的高阶组件,不得不摘抄官网一段经典的介绍:
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。具体而言,高阶组件是参数为组件,返回值为新组件的函数。
组件是将 props 转换为 UI,而高阶组件是将组件转换为另一个组件。
HOC 在 React 的第三方库中很常见,例如 Redux 的 connect 和 Relay 的 createFragmentContainer。
关键词:复用逻辑、组合、设计模式。
熟悉vue的朋友可能知道,在组件复用逻辑(状态、方法等)的一种方式是使用mixins(混入),即将多个组件复用的逻辑单独出来,通过混入的方式引入组件,通过与当前组件的状态、方法等进行组合,得到最终组合后的组件,说白了就是复用与扩展了当前组件的一些能力。不理解的可以参考vue官网的mixins,写的很详细:
混入 — Vue.jsVue.js – The Progressive JavaScript Frameworkhttps://cn.vuejs.org/v2/guide/mixins.html当然,react里面也有mixins,用法与vue里面的大同小异,但是官网对其做出的描述是:
也就是说,react将弃用mixins,取而代之的有高阶组件(HOC)、render props等。
不得不说render props也是个神器,yyds!
React高阶组件(HOC),让组件复用与扩展变得简单,省时、省力又省心,何不用起来?OK,闲话少说,直接走起。
官网的例子很具有代表性,我先使用其进行分析,然后再举个简单的例子帮助理解。(也可以直接往下查看我的简单例子)
组件是 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 (
<div>
{this.state.comments.map((comment) => (
<Comment comment={comment} key={comment.id} />
))}
</div>
);
}
}
主要观察上面的代码,稍后,编写了一个用于订阅单个博客帖子的组件,该帖子遵循类似的模式:
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 <TextBlock text={this.state.blogPost} />;
}
}
有没有发现,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 (
<div>
<h3>{this.state.title}</h3>
<p>{this.state.msg}</p>
<span>{this.state.user}</span>
</div>
)
}
}
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 (
<div>
<h3>{this.state.title}</h3>
<div>
<span>这里是关于当前组件的介绍......</span>
</div>
<p>{this.state.msg}</p>
<span>{this.state.user}</span>
</div>
)
}
}
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 (
<div>
<h3>{this.props.title}</h3>
<p>{this.props.msg}</p>
<span>{this.props.user}</span>
</div>
)
}
}
//使用高阶组件对其包裹,传入当前组件与当前组件标题,扩展成新组件
export default wrapper(Page,'Page')
//OtherPage.js
import React from 'react';
import wrapper from './Wrapper';
class OtherPage extends React.Component {
render(){ //此时相似的逻辑已经被提取到高阶组件中,通过props获取状态或扩展能力
return (
<div>
<h3>{this.props.title}</h3>
<div>
<span>这里是关于当前组件的介绍(高阶组件)......</span>
</div>
<p>{this.props.msg}</p>
<span>{this.props.user}</span>
</div>
)
}
}
//使用高阶组件,传入当前组件与当前组件标题,也可以像官网那样在外部使用
//const WrapperOtherPage = wrapper(OtherPage,'OtherPage'),效果一致
export default wrapper(OtherPage,'OtherPage')
页面效果与未使用高阶组件前一致,达到目的。
现在,我们已经定义了一个高阶组件,其他需要这个逻辑(功能)的组件只需要将自身的当成参数传入即可,而不需要重复写入该逻辑;自身组件不需要感知到外部的高阶组件的存在,可以直接使用props获取扩展属性与功能。现在,你学会了吗?
最后,在使用高阶组件时有一些需要注意的地方,官网描述得很清楚,可以前往查看。高阶组件 – Reacthttps://react.docschina.org/docs/higher-order-components.html
今天的文章耐克react技术_高阶组件的承上启下分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/85847.html