如何高效利用React装饰器HOC优化组件开发？

本文共计401个文字，预计阅读时间需要2分钟。

高级组件 + 简单来说，高级组件是一个函数，可以接收一个组件并返回一个新的组件。组件将props转换成UI，而高级组件将一个组件的props转换成另一个组件。装饰器。

​​高阶组件​​

简单来说，高阶组件是一个函数，能够接受一个组件并返回一个新的组件。
组件是将 props 转化成 UI ，然而高阶组件将一个组价转化成另外一个组件。

​​装饰器​​

ES7中的一种语法糖，与Python中的装饰器使用及作用类似，其实就是以一种更为简洁的方式来来包装修改类的行为。装饰对象包括：​​类​​​、​​类的属性​​​、​​类的方法​​。

项目中使用

由于属于新特性，如果在项目中使用需要使用​​babel​​来进行转码。

• 安装babel插件:
  Babel >= 7.x
• Babel >= 7.x

npm install --save-dev @babel/plugin-proposal-decorators

Babel@6.x

npm install --save-dev babel-plugin-transform-decorators-legacy

.babelrc 配置：

Babel >= 7.x
{ "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }], ] }
Babel@6.x
{ "plugins": [ "transform-decorators-legacy" ] }
import React, {Component} from 'react';
const addDiv = (title) => (WrappedComponent) => class extends Component {
render() {
return (
<div>
<h1>{title}</h1>
<hr/>
<WrappedComponent/>>
</div>
)
}
};export default addDiv


//demo.js
import React, {Component} from 'react';
import addDiv from './addDiv.js';@addDiv('标题')
export default class Demo extends Component {
...
render() {
return(
<i>demo</i>
)
}
}