React学习笔记之高阶组件应用
更新时间：2018年06月02日 14:19:16 作者：tiancai啊呆
这篇文章主要介绍了React 高阶组件应用，详细的介绍了什么是React高阶组件和具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
是什么
高阶组件是一个函数，能够接受一个组件并返回一个新的组件。没有任何副作用。
为什么用
封装并抽离组件的通用逻辑，让此部分逻辑在组件间更好地被复用。
如何用
//hoc为我们的高阶组件，可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7，如：let hocHello = hoc(Hello)，只是es7的语法更优雅一些。
//高阶组件可以叠加使用，可以对一个组件使用多个高阶组件
@hoc
class Hello extends React.Component {
//
}
如何实现
属性代理
下面的例子是最简单的一个实现
function hoc(ImportComponent) {
return class Hoc extends React.Component {
static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
render() {
return <ImportComponent {...this.props} />
}
}
}
function getDisplayName(Component) {
return Component.displayName || Component.name || "Component"
}
作用：操作prop，refs获取组件实例
注意事项：静态方法无法传递，必须手动复制；refs无法传递。
反向继承
下面的例子是最简单的一个实现
export function hoc(ImportComponent) {
return class Hoc extends ImportComponent {
static displayName = `Hoc(${getDisplayName(ImportComponent)})`
render() {
return super.render()
}
}
}
作用： 操作state；渲染劫持（操作它的render函数）
注意事项：通过继承ImportComponent，除了一些静态方法，包括生命周期，state，各种function，我们都可以得到。
原则
- 不要修改原组件，高阶组件只是通过组合的方式将子组件包装在容器组件中，是一个无副作用的纯函数。
- 不要在render方法内部使用高阶组件。
- 高阶组件可以向组件添加功能，但是不应该大幅度地改变功能。
- 为了方便调试，选择一个显示名称，表示它是高阶组件的结果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
全栈轻量级搭配之Remix Prisma Sqlite使用分析
这篇文章主要为大家介绍了全栈轻量级搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
详解React中的useMemo和useCallback的区别
React中的useMemo和useCallback是两个重要的Hooks。常常被用于优化组件的性能。虽然这两个Hooks看起来很相似，但它们彼此之间还是有很大的区别的，随着小编一起来学习吧2023-04-04
这篇文章主要为大家详细介绍了在react中使用mockjs的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-03-03
react历次版本迭代主要想解决的是两类导致网页卡顿的问题，分别是cpu密集型任务和io密集型任务导致的卡顿问题，react18新增特性就是为了解决上述问题2022-09-09
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
这篇文章主要介绍了如何去除富文本中的html标签及vue、react、微信小程序中的过滤器,在vue及react中经常会遇到，今天通过实例代码给大家讲解，需要的朋友可以参考下2018-11-11
这篇文章主要介绍了React SSR 之限流,React SSR 毕竟涉及到了服务端，有很多服务端特有的问题需要考虑，而限流就是其中之一，本文会通过一个简单的案例来说明，为什么服务端需要进行限流，需要的朋友可以参考下2022-07-07
React immer与Redux Toolkit使用教程详解
这篇文章主要介绍了React中immer与Redux Toolkit的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-10-10
这篇文章主要为大家详细介绍了React实现表格选取，类似于Excel选中一片区域并获得选中区域的所有数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最近本人在使用Antd开发时遇到些问题,所以下面这篇文章主要给大家介绍了关于react+antd样式不生效问题的解决方式,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了react中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
最新评论