53 lines
1.4 KiB
Markdown
53 lines
1.4 KiB
Markdown
|
---
|
|||
|
|
title: Higher-Order Components
|
|||
|
|
localeTitle: 高阶组件
|
|||
|
|
---
|
|||
|
|
## 高阶组件
|
|||
|
|
|
|||
|
|
在React中， **高阶组件** （HOC）是一个获取组件并返回新组件的函数。程序员使用HOC来实现**组件逻辑重用** 。
|
|||
|
|
|
|||
|
|
如果您使用过Redux的`connect` ，那么您已经使用过高阶组件。
|
|||
|
|
|
|||
|
|
核心思想是：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
const EnhancedComponent = enhance(WrappedComponent);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
哪里：
|
|||
|
|
|
|||
|
|
* `enhance`是高阶分量;
|
|||
|
|
* `WrappedComponent`是您要增强的组件;和
|
|||
|
|
* `EnhancedComponent`是创建的新组件。
|
|||
|
|
|
|||
|
|
这可能是`enhance` HOC的主体：
|
|||
|
|
|
|||
|
|
```jsx
|
|||
|
|
function enhance(WrappedComponent) {
|
|||
|
|
return class extends React.Component {
|
|||
|
|
render() {
|
|||
|
|
const extraProp = 'This is an injected prop!';
|
|||
|
|
return (
|
|||
|
|
<div className="Wrapper">
|
|||
|
|
<WrappedComponent
|
|||
|
|
{...this.props}
|
|||
|
|
extraProp={extraProp}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
在这种情况下， `enhance`返回一个扩展`React.Component`的**匿名类** 。这个新组件做了三件简单的事情：
|
|||
|
|
|
|||
|
|
* 在`div`元素中渲染`WrappedComponent` ;
|
|||
|
|
* 将自己的道具传递给`WrappedComponent` ;和
|
|||
|
|
* 向`WrappedComponent`注入额外的prop。
|
|||
|
|
|
|||
|
|
HOC只是一种利用React组成性质的力量的模式。 **他们为组件添加功能** 。你可以用它们做更多的事情！
|
|||
|
|
|
|||
|
|
## 其他资源
|
|||
|
|
|
|||
|
|
* [反应文档：高阶组件](https://reactjs.org/docs/higher-order-components.html)
|