react 高阶组件 HOC 的个人理解和使用场景(易懂)
2020-04-23 11:30
671 查看
一句话介绍HOC
高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意。
使用场景
将几个功能相似的组件里面的方法和react特性(如生命周期里面的副作用)提取到HOC中,然后向HOC传入需要封装的组件。最后将公用的方法传给组件。
优势
使代码简洁优雅、代码量更少
代码示例:
高阶组件:
`//定义高阶组件 //放在common公用方法里面 import React, { Component} from 'react'; export default (WrappedComponent) => { return class extends Component { constructor(props) { super(props) this.state = { //定义可复用的状态 count:1 } this.getCode = this.getCode.bind(this) } componentDidMount() { alert('111') } //定义可复用的方法 getCode(mobile) { // ... this.setState({count : mobile}) console.log(mobile) } postVcode(mobile) { // ... } render() { return ( <div> <WrappedComponent getCode={this.getCode} state={this.state} {...this.props}/> </div> ) } } } // 高阶组件就是把可复用的逻辑放在定义的高阶组件中,然后把需要调用高阶组件的组件作为参数传给高阶组件,然后在高阶组件中 // 实例化该组件,再把需要复用的方法和state传给次组件,然后在此组件中的props中就可以拿到高阶组件里定义的逻辑方法和state了
传入的组件:
import React, { Component} from 'react'; import HOC from './index' //高阶组件的使用 class Register extends Component{ render() { return ( <div> <button onClick={()=>{this.props.getCode('17682334636')}}>使用高阶组件里复用的方法</button> {this.props.state.count} </div> ) } } export default HOC(Register) //高阶组件其实就是将复用的方法传给组件,使代码简洁、代码量更少
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- 深入理解react 组件类型及使用场景
- 理解react生命周期,以及react生命周期的使用场景
- Vue组件的使用及个人理解与介绍
- FieldCache在lucene中使用的代码解析,使用场景个人分析
- [div+css培训] a链接标记的三种方式使用我的个人理解
- 【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
- ping 命令的使用【个人理解,待续】
- 在Eclipse或者ADT中使用ButterKnifeZelezny,Android组件初始化从此变得简单易懂!!!!
- 理解final static的使用场景以及具体含义
- React Native系列——WebView组件使用介绍
- React中文教程 - Advanced Components(组件高级使用)
- EGOTableViewPullRefresh个人理解代码原理和使用
- DbUtils的使用(个人理解,有不同的可以指出)
- 【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
- reactjs入门到实战(八)----表单组件的使用
- 使用reflux进行react组件之间的通信
- ReactNative-Navigator组件简单使用
- 深入理解Oracle索引(6):在实践中初步认识3大索引的使用场景
- Unity3D场景搭建2. 使用组件(Using Components)