React学习笔记之高阶组件应用

前端之家收集整理的这篇文章主要介绍了React学习笔记之高阶组件应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

是什么

高阶组件是一个函数,能够接受一个组件并返回一个新的组件。没有任何副作用。

为什么用

封装并抽离组件的通用逻辑,让此部分逻辑在组件间更好地被复用。

如何用

如何实现

属性代理

下面的例子是最简单的一个实现

显示名称 render() { return } } }

function getDisplayName(Component) {
return Component.displayName || Component.name || "Component"
}

作用:操作prop,refs获取组件实例

注意事项:静态方法无法传递,必须手动复制;refs无法传递。

反向继承

下面的例子是最简单的一个实现

作用: 操作state;渲染劫持(操作它的render函数

注意事项:通过继承ImportComponent,除了一些静态方法包括生命周期,state,各种function,我们都可以得到。

原则

  1. 不要修改原组件,高阶组件只是通过组合的方式将子组件包装在容器组件中,是一个无副作用的纯函数
  2. 不要在render方法内部使用高阶组件。
  3. 高阶组件可以向组件添加功能,但是不应该大幅度地改变功能
  4. 为了方便调试,选择一个显示名称,表示它是高阶组件的结果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章