• React高阶组件(HOC)


    1.什么是HOC?

         HOC(Higher-order component)是一种React 的进阶使用方法,只要还是为了便于组件的复用。强调一点,HOC本身并不是 React API, 它就是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。

         概括的讲,HOC能够实现:

         1. 代码复用,代码模块化

         2. 渲染劫持, 操作state

         3. Props 增删改

    HOC的实现方式

    在这节中我们将学习两种主流的在 React 中实现高阶组件的方法:属性代理(Props Proxy)和 反向继承(Inheritance Inversion)。

    基于反向继承(Inheritance Inversion, 缩写II)的方式

    反向继承的实现为:

    返回的高阶组件类(Enhanced)继承了 WrappedComponent。这被叫做反向继承是因为 WrappedComponent 被动地被 Enhancer 继承,而不是 WrappedComponent 去继承 Enhancer。 

    反向继承允许高阶组件通过this关键词获取 WrappedComponent,意味着它可以获取到 state,props,组件生命周期(component lifecycle)钩子,以及渲染方法(render)。


    使用高阶组件遇到的问题

    静态方法丢失

    当使用高阶组件包裹原始组件,返回的新组件会丢失原始组件的所有静态方法。

    解决方案:

        1. 手动拷贝所有静态方法给新组件;(不推荐)

        2. 使用hoist-non-react-statics来帮你自动处理,它会自动拷贝所有非React的静态方法;(react-router 里withRouter就使用了这个包)

    Refs属性不能传递

    解决方案: 

    新组建传递一个ref 回调函数属性给原始组件,也就是将ref组件绑定到新组件上;如:

    <Enhancer  getRef={ref => this.wrappedC = ref}  />

  • 相关阅读:
    CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
    js 自定义获得类class和获得id
    学习笔记:BSGS(拔山盖世?)算法
    解题报告: luogu P1040
    解题报告:SP18155 ABSP1
    解题报告:luogu P1099
    Thussat 游记
    解题报告:luogu P2220
    学习笔记:卢卡斯定理(并没有学会)
    从线性筛到欧拉函数,你十有八九能懂吧!
  • 原文地址:https://www.cnblogs.com/zhouyideboke/p/12618846.html
Copyright © 2020-2023  润新知