React 是一种非常流行的前端框架，它的组件化编程思想更是众所周知。React 高阶组件 (Higher Order Component，HOC) 能够把相同的代码逻辑在不同的组件之间复用，极大地提高了代码重用率和可维护性。本文将详细介绍 React HOC 的使用技巧，包括什么是 HOC、为什么需要 HOC、如何创建 HOC、HOC 组件的类型以及 HOC 的应用场景。
什么是 HOC
React 的组件化语法通过组合不同的组件以实现复杂的 UI 页面。但是，随着业务的复杂性增加，常常会遇到相同的业务逻辑代码在多个组件中出现，这时候使用 HOC 就能够非常有效地解决这个问题。简单来说，HOC 是一个能够接收一个组件作为参数并返回一个新组件的函数。
从形式上来看，HOC 本质上是一个纯函数，其输入为一个组件，输出是一个新的组件。HOC 可以接收 props，仿佛自己就是一个 React 组件，但它并不“普通”，自身并没有呈现任何内容，而只是负责处理原组件所需要的逻辑。我们通常称这批高阶组件为“HoC 工厂”。
为什么需要 HOC
React 的本质是使用组件复合的方式构建 UI，组件是重用代码的基本单位。但是，有时候一些不同的组件可能会有共同的业务逻辑，这样的话我们就需要在不同的组件间进行复用。如果每次都写同样的代码，那么不仅耗时且不利于后期维护。
使用 HOC 的优势在于它可以避免代码重复，你只需要把公共逻辑从不同的组件中抽取出来统一处理即可。这样一来，我们就可以更加专注于组件自身的业务逻辑实现，在避免大量代码复制和粘贴时，还能更好地维护和扩展应用程序。
如何创建 HOC
创建 HOC 很简单，只需要定义一个能接收一个组件并返回一个新组件的函数即可。下面通过一个简单示例来介绍具体的实现步骤。
-- -------------------- ---- ------- ------ ----- ---- -------- ----- -------- - ---------------- -- - ----- ---- - -- ----- -------- ------ - -- - ----- --------- ------ - --- ------ ----- ------- --------------- - -------- - ------ ----------------- ----------- --------------- --- - -- -- ----- --------- - -- ---- -- -- - ------ - ----- ------------ ----- ----- -- -- - ------------ ------------- --- ------ -- -- ----- ----------------- - -------------------- ------ ------- ------------------展开代码
在上面的示例代码中，我们定义了一个withData高阶组件，它接收一个WrappedComponent参数，然后在返回的组件运行时渲染传入的组件，并将数据传入组件。在这里，我们模拟获取一个数据，再将数据作为 props 传递给FruitList组件。最后，我们使用withData包装FruitList并使用包装后的组件。
HOC 组件的类型
使用 HOC 可以创建几种不同类型的组件，每种类型都有其特定的目的和用法。下面列举了常见的四种 HOC 组件类型。
根据 props 进行条件渲染
这种 HOC 的目的是根据传入的 props 参数进行条件渲染。在这种情况下，根据 props 参数来渲染组件，它是基于判断条件的一种纯函数。
-- -------------------- ---- ------- ----- --------------------- - ------------------ ---------- -- - ------ ----- -- - -- ------------------ - ------ ----------------- ---------- -- - ---- - ------ ---- - - - ----- ----------------- - ---------------------- ------------------- -- ---------------- -- -- ---------------- -展开代码
实现 Prop 包装器/增强器
这种 HOC 的目的是接收组件的 props，然后将 props 包装到新的 props 对象中，以便传递到被包装的组件中。在这种情况下，你可以将 props 包装成新的形式，从而在组件内部访问。
-- -------------------- ---- ------- ----- --------- - ----- -- ---------------- -- - ------ - ----------------- ---------- --------------------- -- - - ----- ----------------- - ---------- - ----- ----------- -- --------------展开代码
对组件进行生命周期监听
这种 HOC 的目的是扩展传入组件的生命周期。在这种情况下，你可以对生命周期事件做任何你想做的事情。
-- -------------------- ---- ------- ----- -------------------- - ---------------- -- - ----- -------------------- ------- --------------- - -------------------- - -- --- - ------------------- - -- --- - ---------------------- - -- --- - -------- - -- --- ------ ----------------- --------------- -- - - ------ -------------------- - ----- ----------------- - ---------------------------------展开代码
处理数据并在组件之间共享
这种 HOC 的目的是处理组件所需的特定数据，然后将其传递给一组组件内部使用。这允许你在不在组件之间重复逻辑时共享处理数据。
-- -------------------- ---- ------- ----- ----------- - --------------------- ----- ------------ - ---------------- -- - ------ -- -- - ---------------------- ----- -- ----------------- --------- --- ----------------------- - - ----- ----------------- - -------------------------展开代码
HOC 的应用场景
使用 HOC 可以提高代码的简洁性和可维护性。例如，在处理表单时，我们经常会遇到大量的样式和事件处理器重复。使用 HOC，我们只需要编写一遍逻辑，并在需要时调用该函数即可。
-- -------------------- ---- ------- ------ ----- ---- -------- ----- -------- - ---------------- -- - ------ ----- ------- --------------- - ------------------ - ------------- ---------- - - --------- -- -- ---------------------- - ---------------------------------- - ------------------------ - ----- ------ - ------------- ----- ----- - ----------- --- ---------- - -------------- - ------------- ----- ---- - ------------ ----------------------- -- - ----- ----------- - - --------------------- -- ----------------- - ------ ------ - --------- ----------- -- --- - -------- - ------ - ----------------- ------------------------------ -------------------------------------- -- -- - -- -- ----- ---- - -- --------- ------------- -- -- - ------ - ------ ------- ----- ------ ----------- ----------- --------------------- ------------------------ -- -------- ------- ------ ------ ------------ ------------ ---------------------- ------------------------ -- -------- ------- ----------- ------ --------------- ----------------- ----------------------------- ------------------------ -- -------- ------- -- -- ----- ------------- - --------------- ------ ------- --------------展开代码
总之，HOC 能够提高代码的可重用性和可维护性，使代码更加简洁。但是，过度使用 HOC 会导致代码不够直观和混乱。因此，在使用 HOC 时需要权衡其优缺点，并根据具体情况判断是否使用 HOC。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b71f6a306f20b3a63cae70
