web前端高级React - React从入门到进阶之高阶组件

最新推荐文章于 2024-05-02 10:00:00 发布

一笑程序猴

最新推荐文章于 2024-05-02 10:00:00 发布

阅读量5.6k

点赞数

分类专栏： React WEB前端框架文章标签：高阶组件 HOC 嵌套组件包裹组件

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/113190433

版权

本文介绍了React中的高阶组件（HOC），它是一种复用组件逻辑的高级技巧。高阶组件是接收组件作为参数并返回新组件的函数，常用于数据订阅和状态管理。文章详细解释了为何使用HOC，如何创建和使用HOC，以及使用HOC的三大约定。通过实例展示了如何通过HOC减少代码冗余，提高代码复用性。

摘要由CSDN通过智能技术生成

第二部分：React进阶

系列文章目录

文章目录

第二部分：React进阶

高阶组件定义

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

简单而言：高阶组件就是一个把组件作为参数，并且返回一个新组件的函数。例如：

//WrappedComponent：参数是一个组件
function higherOrderComponent(WrappedComponent){
   
	//返回一个新的组件
	return class extends React.Component{
   
		render(){
   
			return <WrappedComponent .../>
		}
	}
}

React 中组件是将props转换为UI，而高阶组件则是将组件转换为一个新的组件。高阶组件在第三方库中很常见，比如Redux中的connect和Relay中的createFragmentContainer

接下来我们来看一下，为什么要使用高阶组件以及如何使用高阶组件

为什么要使用高阶组件

我们先来看一个案例，假如：现在有一个博客系统，其中有一个博客帖子组件BlogPost和对应博客的评论组件，这两个组件都是通过订阅外部数据源来渲染数据。

//博客帖子组件
class BlogPost extends React.Component {
   
	constructor(props){
   
		super(props);
		this.state = {
   
			// 假设 “DataSource”是一个全局数据源变量
			blogPost: DataSource.getBlogPost(props.id);
		}
	}
	componentDidMount(){
   
		//组件渲染完成后订阅更改
		DataSource.addChangeListener(this.handleChange);
	}
	componentWillUnMount(){
   
		//组件卸载前移除订阅
		DataSource.removeChangeListener