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方法内部使用高阶组件。
- 高阶组件可以向组件添加功能，但是不应该大幅度地改变功能。
- 为了方便调试，选择一个显示名称，表示它是高阶组件的结果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧2021-06-06
React Server Component混合式渲染问题详解
React 官方对 Server Comopnent 是这样介绍的: zero-bundle-size React Server Components，这篇文章主要介绍了React Server Component: 混合式渲染,需要的朋友可以参考下2022-12-12
在现代Web应用程序中，网络连接是至关重要的，通过监听网络状态，我们可以为用户提供更好的体验，例如在断网时显示有关网络状态的信息，本文将介绍如何使用React监听网络状态的变化，并提供相应的代码示例2023-06-06
这篇文章主要介绍了react-router6.x路由配置及导航,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
当一个APP在运行的时候, 开发者想要将自己的代码更新到用户的手机上时, 一般都有两种方案, 一是热更新, 二就是APP更新.热更新暂且不说,这篇文章就讲讲 APP 如何更新。2021-06-06
这篇文章主要为大家介绍了react结合typescript 封装组件实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家介绍了每天一个hooks学习之useUnmount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了React内部实现cache方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。2017-04-04
这篇文章主要为大家详细介绍了react native之ScrollView下拉刷新效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论