React高阶组件使用详解-js教程-PHP中文网

这次给大家带来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 
 }
 }
}
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方法内部使用高阶组件。
高阶组件可以向组件添加功能，但是不应该大幅度地改变功能。
为了方便调试，选择一个显示名称，表示它是高阶组件的结果。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

mallcloud商城

mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提

下载

如何操作JS实现html中placeholder属性提示文字

如何使用JS倒计时恢复按钮点击功能