react 理解装饰器
说明
- react 初学者
- es6 初学者，对装饰模式有一定了解和使用
react 装饰器的使用
看看装饰模式
- Decorator模式并不严重依赖于创建对象的方式，而是关注扩展其额外功能。我们使用了一个单一的基本对象并逐步添加提供额外功能的Decorator对象，而不是仅仅依赖于原型继承。这个想法是：向基本对象添加属性或者方法，而不是进行子类化 ，因此它较为精简。
react 在 redux 中使用装饰器来写 connect
- 通常情况下我们需要一个 reducer 和一个 action 来包裹你的 Component。
- 假如你已经有一个 key 为 main 的 reducer 和一个 action.js。我们的 App.js 一般这样写：
import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
class App extends React.Component{
render(){
return <div>hellodiv>
}
}
function mapStateToProps(state){
return state.main
}
function mapDispatchToProps(dispatch){
return bindActionCreators(action,dispatch)
}
export default connect(mapStateToProps,mapDispatchToProps)(App)
复制代码- 使用装饰器@
import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
@connect(
state=>state.main,
dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
render(){
return <div>hellodiv>
}
}
复制代码合理的压缩了代码
当然我们每次需要使用 action 和 reducer，还得写这么多，我们再把 connect 抽离出来
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'
export default connect(
state=>state.main,
dispatch=>bindActionCreators(action,dispatch)
)
复制代码- 我们在组件中的这么去使用
import React from 'react'
import {render} from 'react-dom'
import connect from 'connect.js'
@connect
export default class App extends React.Component{
render(){
return hello
}
}配置一下装饰器
- 需要说明的是，这里用了装饰器，需要安装模块babel-plugin-transform-decorators-legacy，然后在babel中配置：
{
"plugins":[
"transform-decorators-legacy"
]
}如果你用的是vscode, 可以在项目根目录下添加jsconfig.json文件来消除代码警告：
{
"compilerOptions": {
"experimentalDecorators": true
}
}实战篇
- 理解了装饰器，我们动手来写一个
- react 写一个预加载数据的装饰器
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
