10、高阶组件
最后更新于：2022-04-02 06:08:41
高阶组件（High Order Component，简称HOC）不是一个真的组件，而是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件，在很多第三方库（例如Redux、Relay等）中都有高阶组件的身影。由于遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、包装和拓展，改变原组件的行为（图9形象的表达出了高阶组件的作用）。这样不仅增强了组件的复用性和灵活性，还保持了组件的易用性。灵活使用高阶组件，可大大提高代码质量。
:-: 
图9 高阶组件的作用
高阶组件有两种常见的实现方式：代理和继承，下面会分别做讲解。
## 一、代理方式
高阶组件作为原组件的代理，不但会将其包裹住，还会给它添加新特性，并且提供了众多控制原组件的功能，例如操纵props、抽取state、访问实例和再包装等。
**1）操纵props**
在原组件（即被包裹组件）接收到props之前，高阶组件可以将其拦截，执行增删改操作，再将处理过的props传给原组件。下面是一个简单的示例，会在高阶组件中新增了一个name属性。
~~~js
//原组件
class Btn extends React.Component {
render() {
return ;
}
}
//高阶组件
function HOC(Wrapped) {
class Enhanced extends React.Component {
constructor(props) {
super(props);
this.state = { name: "strick" };
}
render() {
return { this.myBtn = btn }} />;
}
componentDidMount() {
console.log(this.myBtn); //Btn组件的实例
}
}
return Enhanced;
}
~~~
注意，ref属性不会传递给原组件，如果在上面的Btn组件中读取this.props.ref，那么得到的值将是undefined，如下所示。
~~~js
class Btn extends React.Component {
render() {
console.log(this.props.ref); //undefined
}
}
~~~
**4）包装**
在高阶组件中，还能通过引入其它React元素包装原组件，既能改变布局，也能增加样式。例如用一个包含内边距的元素包裹原组件，并在其邻近的位置新增一个文本框，如下所示。
~~~js
function wrappedHOC(Wrapped) {
class Enhanced extends React.Component {
render() {
return (
';