react 给一个引用的组件添加新属性_高阶组件在React中的应用
高阶组件的定义
接受React组件作为输入,输出一个新的React组件。
概念源自于高阶函数,将函数作为参数,或者输出一个函数,如map,reduce,sort。
用haskell的函数签名来表示:
hocFactory:: W: React.component => E: React.component
使用场景
可以用来对组件进行二次加工和抽象,比如:对Input组件进行样式改动、添加新的props属性;某些可以复用的逻辑抽象后再注入组件。
所以 HOC 的作用大概有以下几点:
- 代码复用和逻辑抽象
- 对 state 和 props 进行抽象和操作
- Render 劫持
如何实现
- 属性代理(props proxy):高阶组件通过被包裹的React组件来操作props,从而能够实现控制props、引用refs、抽象state。
1.1 控制props
import React, { Component, Fragment } from 'react';const MyContainer = WrappedComponent =>class extends Component {render() {const newProps = {text: 'newText',};return (<><span>通过 props proxy 封装HOC</span><WrappedComponent {...this.props} {...newProps} /></>);}};
从这里可以看到,在render中返回来传入WrappedComponent 的React组件,这样我们就可以通过HOC在props中传递属性、添加组件及样式等等。
使用也是非常简单:
import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';class App extends Component {...
}export default MyContainer(App);
当然也可以使用装饰器@decorator:”接收一个类作为参数,返回一个新的内部类“,与HOC的定义如出一辙,十分契合。
import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';@MyContainer
class App extends Component {...
}export default App;
1.2 通过refs使用引用
import React, { Component } from 'react';const RefsHOC = WrappedComponent =>class extends Component {proc(wrappedComponentInstance) {wrappedComponentInstance.refresh();}render() {const props = Object.assign({}, this.props, { ref: this.proc.bind(this) });return <WrappedComponent {...props} />;}};export default RefsHOC;
render() 时会执行 ref 回调,即proc方法,该方法可以获取 WrappedComponent 的实例,其中包含组件的 props,方法,context等。我们也可以在 proc 中进行一些操作,如控制组件刷新等。
1.3 抽象state
我们可以通过向 WarppedComponent 提供 props 和 回调函数抽象state,将原组件抽象成展示型组件,隔离内部state。
import React, { Component } from 'react';const MyContainer = WrappedComponent =>class extends Component {constructor(props) {super(props);this.state = {name: '',};}onHandleChange = e => {const val = e.target.value;this.setState({name: val,});};render() {const newProps = {name: {value: this.state.name,onChange: this.onHandleChange,},};return <WrappedComponent {...this.props} {...newProps} />;}};
我们将 input 组件中 name props 的 onChange方法提取到了高阶组件中,这样就有效的抽象了同样的state操作。
import React, { Component } from 'react';
import MyContainer from './MyContainer.jsx';@MyContainer
class MyInput extends Component {render() {return <input type="text" {...this.props.name} />;}
}export default MyInput;
参考链接
深入React技术栈book.douban.comJavascript 中的装饰器aotu.io
react 给一个引用的组件添加新属性_高阶组件在React中的应用相关推荐
- [react] 写一个react的高阶组件并说明你对高阶组件的理解
[react] 写一个react的高阶组件并说明你对高阶组件的理解 定义高阶组件 import React, { Component } from 'react';const simpleHoc = ...
- react进阶系列 - 高阶组件详解四:高阶组件的嵌套使用
前面有讲到过很多页面会在初始时验证登录状态与用户角色.我们可以使用高阶组件来封装这部分验证逻辑.封装好之后我们在使用的时候就可以如下: export default withRule(Home); 但 ...
- React 之 高阶组件的理解
1.基本概念 高阶组件是参数为组件,返回值为新组件的函数. 2.举例说明 ① 装饰工厂模式 组件是 react 中的基本单元,组件中通常有一些逻辑(非渲染)需要复用处理.这里我们可以用高阶组件对组件内 ...
- React总结篇之六_React高阶组件
高阶组件的概念及应用 以函数为子组件的模式 这两种方式的最终目的都是为了重用代码,只是策略不同,各有优劣,开发者可以在实际工作中决定采用哪种方式. 一.高阶组件 1. 高阶组件(Higher Orde ...
- React中的高阶组件
React中的高阶组件 高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合 ...
- React高阶组件探究
React高阶组件探究 在使用React构建项目的过程中,经常会碰到在不同的组件中需要用到相同功能的情况.不过我们知道,去这些组件中到处编写同样的代码并不优雅. 在以往,为了解决以上的情况,我们会用到 ...
- React 中的高阶组件及其应用场景
本文目录 什么是高阶组件 React 中的高阶组件 属性代理(Props Proxy) 反向继承(Inheritance Inversion) 高阶组件存在的问题 高阶组件的约定 高阶组件的应用场景 ...
- 深入理解 React 高阶组件
在目前的前端社区,『推崇组合,不推荐继承(prefer composition than inheritance)』已经成为了比较好的实践,mixin 也因为自身的一些问题而渐渐不被推荐.高阶组件(H ...
- React高阶组件以及应用场景
什么是高阶组件 在解释什么是高阶组件之前,可以先了解一下什么是 高阶函数,因为它们的概念非常相似,下面是 高阶函数 的定义: 如果一个函数 接受一个或多个函数作为参数或者返回一个函数 就可称之为 高阶 ...
最新文章
- codeforces432D[kmp的next数组的运用]
- php趣味小程序,php常用小程序
- 关于核定区域电网2018—2019年输电价格的通知
- qt中json构造一个数组_告别撸单元格!我来分享Excel中如何利用一条公式得到一个数组...
- Oracle:关于分布式数据库(创建数据库链路,创建触发器)
- 磁盘空间管理工具FolderSizes
- 逆序对java_逆序对
- android极光推送声音,android 极光推送 声音与振动 的关闭和开启
- 自己封装的Windows7 64位旗舰版,微软官网上下载的Windows7原版镜像制作,绝对纯净版...
- SSM-1-SSM整合
- Unity3D基础38:角色控制器组件
- docker容器和宿主机时间不一致的问题
- (转)为什么用ls和du显示出来的文件大小有差别?
- 冰封USB3.0导入工具
- python文件操作方法seek_Python文件操作及seek偏移详解
- 思科交换机不同vlan互通
- 多余的回车键(Enter)
- 腾讯云认证考试考点列表有哪些?
- 博客搬家系列(六)-爬取今日头条文章
- 标签体系下的用户画像建设小指南
热门文章
- ubuntu系统安装vscode教程
- linux 扩充db2表空间,如何扩充db2的表空间、加容器等表空间维护操作
- 优集品 php,从细节处着眼 优集品打造成人世界的儿童节
- robotframework调用python类方法_RobotFramework-调用.py文件
- C语言扫雷游戏简单实现
- [BZOJ1297/Luogu4159][SCOI2009]迷路
- 下载安装webstrom及激活
- ORA-12154: TNS:could not resolve the connect identifier specified. Solved.
- 阅读笔记一之《软件需求与分析》
- Android 实现切换主题皮肤功能(类似于众多app中的 夜间模式,主题包等)