React 高阶组件（HOC）实践

caiyongji 发布于2019-05-23 13:55 / 2491人阅读

摘要：简单来说高阶组件就是一个函数，它接受一个组件作为参数然后返回一个新组件。主要用于组件之间逻辑复用。使用由于数据请求是异步的，为了不让用户看到一片空白，当数据请求还没有返回时，展示组件。组合函数，提升代码可阅读性。

简单来说高阶组件（HOC）就是一个函数，它接受一个组件作为参数然后返回一个新组件。HOC 主要用于组件之间逻辑复用。比如你写了几个组件，他们之间的逻辑几乎相同，就可以用 HOC 对逻辑进行封装复用。

本文主要分享：

如何封装 HOC

HOC + 组合函数，处理多个 HOC 嵌套问题

HOC + 柯里化，封装多参数的 HOC

如何封装 HOC

这里介绍几个常用的 HOC

withLogger

我们在调试代码时，经常都需要打印 props，所以可以将打印逻辑封装起来。

const withLogger = (prefix = "") => WrappedComponent => {
  const WithLogger = props => {
    console.log(`${prefix}[Props]:`, props);
    return <WrappedComponent {...props} />;
  };
  return WithLogger;
};

使用：

withLogger("这里打印的是xxx")(Component)

withData

组件中的获取数据的逻辑也可以抽离成 HOC，需要传入 url， param 两个参数。

import React, { Component } from "react";

const withData = (url, params) => WapperedComponent => {
  class WithData extends Component {
    state = {
      data: []
    };
    componentDidMount() {
      fetch(url, {body: JSON.stringify(params)})
         .then(response => response.json())
         .then(data => this.setState({ data }));
    }
    render() {
      return <WapperedComponent {...this.state} {...this.props} />;
    }
  }
  return WithData;
};

使用：

withData(
  url: "https://jsonplaceholder.typicode.com/posts",
  params: {
    _limit: 10,
    page: 2
  }
)(Component)

withLoading

由于数据请求是异步的，为了不让用户看到一片空白，当数据请求还没有返回时，展示 Loading 组件。

const withLoading = Loading => WapperedComponent => {
  const WithLoading = props => {
    return props.data.length === 0 ");

使用：

const Loading = () => loading;
withLoading(Loading)(Component)

如何处理多个 HOC 嵌套问题

如果一个组件，需要请求数据，在数据未返回时展示 loading，还需要打印 props，那么我们需要将 withData、withLoading 和 withLogger 组合起来。

const Loading = () => loading;
withData(
  "https://jsonplaceholder.typicode.com/posts",
  {
    _limit: 10,
    page: 2
  }
})(
  withLogger("xxx")(
    withLoading(Loading)(Component)
  )
)

上面这种嵌套的方式可阅读性很差，这里用 compose 组合函数优化一下。

const compose = (...fns) => x => fns.reduceRight((x, fn) => fn(x), x);

const Loading = () => loading;
compose(
  withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 10,
      page: 2
    }
  ),
  withLogger("这里是xxx"),
  withLoading(Loading),
)(Component);

优化后的代码明显更为易读，当然如果你不习惯从下到上执行，你也可以写成 pipe 函数，只需要将 compose 函数中 reduceRight 方法改为 reduce 即可。

如何封装多参数的 HOC

我们注意到 withData 传入了两个参数，url 和 params，假如需要多次调用 withData ，比如：

withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 10,
    }
)
withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 9,
    }
)
withData(
    "https://jsonplaceholder.typicode.com/posts",
    {
      _limit: 8,
    }
)

我们发现每次调用的 url 都相同，这里可以用柯里化函数将参数封装一下：

const curry = fn => {
  const loop = (...args) => args.length === fn.length
    ");(...arg) => loop(...args,...arg)
  return loop
}

const withPostData = curry(withData)("https://jsonplaceholder.typicode.com/posts")

withPostData({_limit: 10})
withPostData({_limit: 9})
withPostData({_limit: 8})

同理我们还可以根据不同的 url 封装成 withUserData、withCommentData 等等。

总结

通过 HOC 将一些代码逻辑封装起来，可增加代码的复用性，也方便后期维护。

HOC + 组合函数，提升代码可阅读性。

HOC + 柯里化，封装多参数的 HOC，进一步增加代码的复用性。

参考

React—Composing Higher-Order Components (HOCs)

JavaScript专题之函数柯里化

JavaScript函数式编程，真香之组合(二)

Higher-Order Components

云服务器 GPU云服务器高阶组件 HOC 封装 HOC 如何封装 HOC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6987.html

React高阶组件(HOC)模型理论与实践

摘要：栗子的方法就是一个，他获取，在中给添加需要的。本来准备把详细代码当个栗子贴出来的，结果突然想到公司保密协议，所以。。。栗子这样子你就可以在父组件中这样获取的值了。什么是HOC? HOC(全称Higher-order component)是一种React的进阶使用方法，主要还是为了便于组件的复用。HOC就是一个方法，获取一个组件，返回一个更高级的组件。什么时候使用HOC? 在Reac...

Leo_chen 2019-08-20 13:42 评论0 收藏0
【译】TypeScript中的React高阶组件

摘要：原文链接高阶组件在中是组件复用的一个强大工具。在本文中，高阶组件将会被分为两种基本模式，我们将其命名为和用附加的功能来包裹组件。这里我们使用泛型表示传递到的组件的。在这里，我们定义从返回的组件，并指定该组件将包括传入组件的和的。原文链接：https://medium.com/@jrwebdev/... 高阶组件（HOCs）在React中是组件复用的一个强大工具。但是，经常有开发者在...

wizChen 2019-08-23 16:59 评论0 收藏0
基于Decorator的React高阶组件的思路分析与实现

摘要：在深入技术栈一书中，提到了基于的。书里对基于的没有给出完整的实现，在这里实现并记录一下实现的思路。在这里最小的组件就是。对比范式与父组件的范式，如果完全利用来实现的，将操作与分离，也未尝不可，但却不优雅。在深入react 技术栈一书中，提到了基于Decorator的HOC。而不是直接通过父组件来逐层传递props，因为当业务逻辑越来越复杂的时候，props的传递和维护也将变得困难且冗...

LinkedME2016 2019-08-21 17:31 评论0 收藏0
React-sortable-hoc 结合 hook 实现 Draggin 和 Droppin

摘要：启动项目教程最终的目的是构建一个带有趣的应用程序来自，可以在视口周围拖动。创建组件，添加样式和数据为简单起见，我们将在文件中编写所有样式。可以看出，就是在当前的外层包裹我们所需要实现的功能。现在已经知道如何在项目中实现拖放翻译：https://css-tricks.com/draggi... React 社区提供了许多的库来实现拖放的功能，例如 react-dnd, react-b...

molyzzx 2019-08-26 10:56 评论0 收藏0
动手写个React高阶组件

摘要：作用是给组件增减属性。如果你的高阶组件不需要带参数，这样写也是很的。那么需要建立一个引用可以对被装饰的组件做羞羞的事情了，注意在多个高阶组件装饰同一个组件的情况下，此法并不奏效。你拿到的是上一个高阶组件的函数中临时生成的组件。是什么简称HOC，全称 High Order Component。作用是给react组件增减props属性。怎么用为什么不先说怎么写？恩，因为你其实已经用...

xiaokai 2019-08-22 18:14 评论0 收藏0