React中怎么使用高阶组件

发布时间:2021-06-15 15:49:03 作者:Leah
来源:亿速云 阅读:182

今天就跟大家聊聊有关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,我们都可以得到。

原则

  1. 不要修改原组件,高阶组件只是通过组合的方式将子组件包装在容器组件中,是一个无副作用的纯函数。

  2. 不要在render方法内部使用高阶组件。

  3. 高阶组件可以向组件添加功能,但是不应该大幅度地改变功能。

  4. 为了方便调试,选择一个显示名称,表示它是高阶组件的结果。

看完上述内容,你们对React中怎么使用高阶组件有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注亿速云行业资讯频道,感谢大家的支持。

推荐阅读:
  1. 72react_高阶组件_LocalStorage
  2. React总结篇之六_React高阶组件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react

上一篇:C++设计模式之建造者模式Builder的示例分析

下一篇:C++设计模式之适配器模式Adapter的示例分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》