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>
}
}
}
高阶组件可以实现什么功能
- 组合渲染: 可使用任何其他组件和原组件进行组合渲染,达到样式、布局复用等效果。
- 条件渲染: 根据特定的属性决定原组件是否渲染
- 操作props: 可以对传入组件的props进行增加、修改、删除或者根据特定的 props进行特殊的操作。
- 获取refs: 高阶组件中可获取原组件的 ref,通过 ref获取组件实例, 从而可以实现对组件中的方法进行调用
- 状态管理: 将原组件的状态提取到 HOC中进行管理
- 操作state: 通过反向继承,我们可以直接操作原组件的 state
- 渲染劫持: 高阶组件可以在render函数中做非常多的操作,从而控制原组件的渲染输出。只要改变了原组件的渲染,我们都将它称之为一种 渲染劫持。
思考: Vue如何实现高阶组件?
HOC的实际应用
日志打点
可用、权限控制
双向绑定
表单校验
HOC的缺陷
- HOC需要在原组件上进行包裹或者嵌套,如果大量使用 HOC,将会产生非常多的嵌套,这让调试变得非常困难。
- HOC可以劫持 props,在不遵守约定的情况下也可能造成冲突。
Hooks
- 使用 Hooks,你可以在将含有 state的逻辑从组件中抽象出来,这将可以让这些逻辑容易被测试。
- Hooks可以帮助你在不重写组件结构的情况下复用这些逻辑
使用Hooks的动机
- 减少状态逻辑复用的风险: Hook和 Mixin在用法上有一定的相似之处,但是 Mixin引入的逻辑和状态是可以相互覆盖的,而多个 Hook之间互不影响,这让我们不需要在把一部分精力放在防止避免逻辑复用的冲突上。
- 避免地狱式嵌套
- 让组件更容易理解
- 使用函数代替class
上一篇: Python基础-分支和循环
下一篇: Python中的分支和循环