React 高阶组件HOC用法归纳

一句话介绍HOC

何为高阶组件(HOC),根据官方文档的解释：“高阶组件是react中复用组件逻辑的一项高级技术。它不属于react API的组成部分，它是从react自身组合性质中抽离出来的一种模式。具体来说，高阶组件是函数，它接受一个组件作为参数，然后返回一个新的组件

使用场景

将几个功能相似的组件里面的方法和react特性（如生命周期里面的副作用）提取到HOC中，然后向HOC传入需要封装的组件。最后将公用的方法传给组件。

优势

使代码简洁优雅、代码量更少

HOC(高阶组件)

怎样包装组件？

定义一个简单的HOC

给Hoc传参

Hoc嵌套

处理ref

使用被包装组件的静态方法

拦截传给被包装组件的props，对props进行增删改

用HOC提取一些复杂的公共逻辑，在不同组件中扩展不同的功能

让不受控组件变成受控组件

反向继承

渲染劫持

配置包装名

不要在render中使用HOC

Hoc的渲染顺序

HOC 和 Mixin

以上就是React 高阶组件HOC用法归纳的详细内容，更多关于React 高阶组件HOC的资料请关注编程网其它相关文章！