幽灵资源网 Design By www.bzswh.com
是什么
高阶组件是一个函数,能够接受一个组件并返回一个新的组件。没有任何副作用。
为什么用
封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用。
如何用
//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方法内部使用高阶组件。
- 高阶组件可以向组件添加功能,但是不应该大幅度地改变功能。
- 为了方便调试,选择一个显示名称,表示它是高阶组件的结果。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
React,高阶组件
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?