react中的高阶组件HOC和Hooks

参考文章

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