简单的讲,Higher-Order Components就是一个函数,传给它一个组件,它返回一个新的组件。
官网的定义:
组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
具体而言,高阶组件是参数为组件,返回值为新组件的函数。
const EnhancedComponent = higherOrderComponent(WrappedComponent);
我们可以通过高阶组件来实现一个组件底部的共享版权信息添加👇
目录结构:
copyright.jsx
import React from 'react'
// 函数式组件内部返回一个class类型组件
const withCopyright = (InnerComponent)=>{
//注意这里的形参需要首字母大写,和普通组件一致
return class newcom extends React.Component{
render(){
return(
<>
<InnerComponent></InnerComponent>
<div>©底部共享版权信息</div>
</>
)
}
}
}
export default withCopyright
//将我们的HOC的函数式组件暴露出去
home.js
import React, { Component } from 'react'
import Copyright from './copyright'
//将hoc函数式组件引入
class home extends Component {
//定义一个类组件写入内容
render() {
return (
<div>
home页面内容
</div>
)
}
}
export default Copyright(home)
//用函数式组件包裹类组件后暴露导出
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Mycomponent from './HOC/home.jsx'
//引入home
ReactDOM.render(
<Mycomponent/>,
document.getElementById('root')
);
※HOC的一些问题:
- HOC 不会修改传入的组件,也不会使用继承来复制其行为。相反,HOC 通过将组件包装在容器组件中来组成新组件。HOC 是纯函数,没有副作用。
- 被包装组件接收来自容器组件的所有 prop,同时也接收一个新的用于 render 的 data prop。HOC 不需要关心数据的使用方式或原因,而被包装组件也不需要关心数据是怎么来的。
- 不要试图在 HOC 中修改组件原型(或以其他方式改变它)。
- 不要在 render 方法中使用 HOC。
- 复制静态方法。
- Refs 不会被传递。
以上问题可在官网查看解决办法,本文不再搬运
官网链接:https://react.docschina.org/docs/higher-order-components.html