插件腰池，讓代碼更優(yōu)雅
1. babel-plugin-transform-decorators-legacy
這幾天在補(bǔ)高階組件的相關(guān)知識(shí)，對(duì)于高階組件的引用方式壤追，感覺有些別扭磕道，若是需要引用多個(gè)高階組件，必定需要套娃大诸。
根據(jù)官方說明捅厂，這個(gè)插件適用于babel@6.x，如果你正在使用babel@7.x资柔，可以使用@babel/plugin-proposal-decorators焙贷。
安裝和使用
$ npm install --save-dev babel-plugin-transform-decorators-legacy
在package.json中配置
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy"
]
},
注意點(diǎn)
如果在項(xiàng)目中還是用了transform-class-properties，請(qǐng)保證transform-decorators-legacy在前
// right
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
react中的實(shí)際使用
我自己在使用高階組件的時(shí)候贿堰，會(huì)用到這個(gè)插件辙芍，讓代碼看起來更優(yōu)雅，不過最常用的應(yīng)該是withRouter羹与，畢竟路由切換是最常用的業(yè)務(wù)
// 原有寫法
import React from 'react';
import { usernameHoc } from '@/hoc'
const GoodBye = props => {
return <div>GoodBye {props.username}</div>
}
export default usernameHoc(GoodBye);
// 新的寫法
import React from 'react';
import { usernameHoc } from '@/hoc'
@usernameHoc
const GoodBye = props => {
return <div>GoodBye {props.username}</div>
}
export default GoodBye;
2. babel-plugin-transform-class-properties
接上一個(gè)插件中提到的
transform-class-properties這個(gè)插件也是react中文站介紹PropTypes時(shí)推薦的故硅，可以試用一下。
官方定義
該插件可轉(zhuǎn)換es2015靜態(tài)類屬性以及使用es2016屬性初始化程序語法聲明的屬性纵搁。（轉(zhuǎn)化為各大瀏覽器的支持的es5語法）
安裝和使用
npm install --save-dev babel-plugin-transform-class-properties
"babel": {
"presets": [
"react-app"
],
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
},
react中的實(shí)際使用
可以將props檢測(cè)和defaultProps聲明寫在class內(nèi)部吃衅，更優(yōu)雅。
class Para extends React.Component {
constructor(props){
super(props)
this.state = {
para: '123'
}
}
static defaultProps = {
name: 'stranger'
}
static propTypes = {
name: PropTypes.string.isRequired
}
render(){
return <div>
{this.props.name}
<p>{this.state.para}</p>
</div>
}
}
