欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react中的高阶组件HOC和Hooks

程序员文章站 2022-04-06 15:08:13
...

参考文章

Mixin

Mixin(混入)是一种通过扩展收集功能的方式,它本质上是将一个对象的属性拷贝到另一个对象上面去,不过你可以拷贝 任意多个对象任意个方法到一个新对象上去,这是 继承所不能实现的。它的出现主要就是为了解决代码复用问题。

Mixin的危害

  • Mixin 可能会相互依赖,相互耦合,不利于代码维护
  • 不同的 Mixin中的方法可能会相互冲突
  • Mixin非常多时,组件是可以感知到的,甚至还要为其做相关处理,这样会给代码造成滚雪球式的复杂性

高阶组件

高阶组件可以看作React对装饰模式的一种实现,高阶组件就是一个函数,且该函数接受一个组件作为参数,并返回一个新的组件。

function visisble(WrapperComponent) {
    return class extends Component {
        render() {
            const { visisble, ...props } = this.props
            if (visisble === false) return null
            return <WrapperComponent {...props}></WrapperComponent>
        }
    }
}

高阶组件可以实现什么功能

  1. 组合渲染: 可使用任何其他组件和原组件进行组合渲染,达到样式、布局复用等效果。
  2. 条件渲染: 根据特定的属性决定原组件是否渲染
  3. 操作props: 可以对传入组件的props进行增加、修改、删除或者根据特定的 props进行特殊的操作。
  4. 获取refs: 高阶组件中可获取原组件的 ref,通过 ref获取组件实例, 从而可以实现对组件中的方法进行调用
  5. 状态管理: 将原组件的状态提取到 HOC中进行管理
  6. 操作state: 通过反向继承,我们可以直接操作原组件的 state
  7. 渲染劫持: 高阶组件可以在render函数中做非常多的操作,从而控制原组件的渲染输出。只要改变了原组件的渲染,我们都将它称之为一种 渲染劫持。

思考: Vue如何实现高阶组件?

HOC的实际应用

日志打点

可用、权限控制

双向绑定

表单校验

HOC的缺陷

  • HOC需要在原组件上进行包裹或者嵌套,如果大量使用 HOC,将会产生非常多的嵌套,这让调试变得非常困难。
  • HOC可以劫持 props,在不遵守约定的情况下也可能造成冲突。

Hooks

  • 使用 Hooks,你可以在将含有 state的逻辑从组件中抽象出来,这将可以让这些逻辑容易被测试。
  • Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑

使用Hooks的动机

  • 减少状态逻辑复用的风险: Hook和 Mixin在用法上有一定的相似之处,但是 Mixin引入的逻辑和状态是可以相互覆盖的,而多个 Hook之间互不影响,这让我们不需要在把一部分精力放在防止避免逻辑复用的冲突上。
  • 避免地狱式嵌套
  • 让组件更容易理解
  • 使用函数代替class