React 高阶组件（HOC）实践

时间 2019-11-17

标签 react 高阶组件 hoc 实践栏目 React 繁體版

原文原文链接

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

本文主要分享：html

如何封装 HOC
HOC + 组合函数，处理多个 HOC 嵌套问题
HOC + 柯里化，封装多参数的 HOC

如何封装 HOC

这里介绍几个经常使用的 HOCjava

withLogger

咱们在调试代码时，常常都须要打印 props，因此能够将打印逻辑封装起来。react

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

使用：git

withLogger('这里打印的是xxx')(Component)
复制代码

withData

组件中的获取数据的逻辑也能够抽离成 HOC，须要传入 url， param 两个参数。github

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 组件。json

const withLoading = Loading => WapperedComponent => {
  const WithLoading = props => {
    return props.data.length === 0 ? (
      <Loading />
    ) : (
      <WapperedComponent {...props} />
    );
  };
  return WithLoading;
};
复制代码

使用：app

const Loading = () => <p>loading</p>;
withLoading(Loading)(Component)
复制代码

如何处理多个 HOC 嵌套问题

若是一个组件，须要请求数据，在数据未返回时展现 loading，还须要打印 props，那么咱们须要将 withData、withLoading 和 withLogger 组合起来。异步

const Loading = () => <p>loading</p>;
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 = () => <p>loading</p>;
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
    ? fn(...args)
    : (...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，进一步增长代码的复用性。