React高阶组件(HOC)的入门及实践

前言 

• 作为前端小白中的一员，没接触过 React 高阶组件，首次看到这个名字时不明觉厉 ，甚至有种“从入门到放弃”的想法。
• 然 而，通过深入学习后发现它实际上是一个概念十分简单，但却非常常用的东西。它的作用是能实现代码复用和逻辑抽象、对 state 和 props 进行抽象和操作、对组件进行细化（如添加生命周期）、实现渲染劫持等。
• 正因为高阶组件的实用性 ，它频繁地被大量 React.js 相关的第三方库，如 React-Redux（用于管理 react 应用的状态，React-Loadable（用于加载带有动态导入的组件的高阶组件）等所使用。
• 介绍了那么多，下面进入正题，通过介绍相关的基础知识与实践场景，带你深入浅出高阶组件 。

高阶组件的基本概念（是什么）

• 高阶组件（HOC，Higher-Order Components）不是组件，而是一个函数，它会接收一个组件作为参数并返回一个经过改造的新组件：

const EnhancedComponent = higherOrderComponent(WrappedComponent);

• 需要区分的是，组件是将 props 转换为 UI，而高阶组件是将组件转换为另一个组件。
• 高阶组件是 React 中用于复用组件逻辑的一种高级技巧，关于其原理的详细说明可参看 官方文档。

使用高阶组件的原因

• 在业务开发中，虽然不掌握高阶组件也可以完成项目的开发，但是如果我们能够灵活地使用高阶组件（加分项 ），可以让项目代码变得更加优雅，同时增强代码的复用性和灵活性，提升开发效率。
• 同时，了解高阶组件对我们理解各种 React.js 第三方库的原理很有帮助 。
• 关于高阶组件能解决的问题可以简单概括成以下三个方面：
  • 抽取重复代码，实现组件复用，常见场景：页面复用。
  • 条件渲染，控制组件的渲染逻辑（渲染劫持），常见场景：权限控制。
  • 捕获/劫持被处理组件的生命周期，常见场景：组件渲染性能追踪、日志打点。
• 可见，高阶组件的作用十分强大 ，接下来，我将对高阶组件的实现方式进行介绍，从而加深大家对高阶组件作用的理解。

高阶组件的实现（怎么做）

• 通常情况下，实现高阶组件的方式有以下两种:
  • 属性代理(Props Proxy)
    • 返回一个无状态（stateless）的函数组件
    • 返回一个 class 组件
  • 反向继承(Inheritance Inversion)
• 高阶组件实现方式的差异性决定了它们各自的应用场景：一个 React 组件包含了 props、state、ref、生命周期方法、static方法和React 元素树几个重要部分，所以我将从以下几个方面对比两种高阶组件实现方式的差异性：
  • 原组件能否被包裹
  • 原组件是否被继承
  • 能否读取/操作原组件的 props
  • 能否读取/操作原组件的 state
  • 能否通过 ref 访问到原组件的 dom 元素
  • 是否影响原组件某些生命周期等方法
  • 是否取到原组件 static 方法
  • 能否劫持原组件生命周期方法
  • 能否渲染劫持

作者：前端小黑
链接：https://juejin.cn/post/6844904050236850184
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。