React compose 函数和高阶函数使用答案

【问题标题】：React compose function and higher order function usageReact compose 函数和高阶函数使用
【发布时间】：2021-05-25 12:29:36
【问题描述】：

我有一个 JSX 文件 MyComponent.jsx 定义如下；

import compose from 'compose-function'

const MyComponent = () => {
    //some hooks like useState, useEffect here
    // finally returns some JSX
    return (
        <>
        </>
    )
}

function MyComponentData(props) {
    let StyledMyComponent = compose(
        withStyle(style),
        withTranslation('translation'),
        withMyApi()
    )(MyComponent);
    return (
        <MyContextProvider>
            <StyledMyComponent />
        </MyContextProvider>
    );
}

export default MyComponentData;

现在“withMyApi”如下所示（在单独的 Api.jsx 文件中定义）；

export function withMyApi() {
    // Extra function wrapper. Is this required to compose multiple HOCs ?
    return function(WrappedComponent) {
        class MyApiURLs extends React.Component {
            constructor(props) {
              super(props);
              this.api = {
                dataSources: dataSources
              }
            }
            render() {
              const { title, content } = this.props;
              return (
                <div>
                  <WrappedComponent api={this.api} {...this.props} />
                </div>
              );
            }
        }
        return MyApiURLs;
    }
}

现在是我的问题；

我正在尝试了解“compose-function”依赖项的用法。是否可以组合样式、进行 API 调用的类、翻译等内容？
在 withMyApi 中，我看到了一个额外的函数包装器。是否需要组成多个 HOC？我的意思是整个语法很混乱。虽然我了解 HOC，但我只是想了解它的语法用法，特别是在 MyComponent.jsx 中如何使用它的上下文中。
在这种情况下，“WrappedComponent”究竟指的是什么？这就是我撰写的下一个圆括号中的内容，即 MyComponent 在这种情况下？

【问题讨论】：

标签： javascript reactjs react-hooks jsx higher-order-functions

【解决方案1】：

我正在尝试了解“compose-function”依赖项的用法。是组合样式、类来进行 API 调用吗？翻译等

Compose 是一种更易读的嵌套函数方式。这是一种标准的函数式编程实践，并且与 React 严格相关。

这个：

let StyledMyComponent = compose(
  withStyle(style),
  withTranslation('translation'),
  withMyApi()
)(MyComponent);

等价于：

let StyledMyComponent = withStyle(style)(withTranslation('translation')(withMyApi()(MyComponent)));

在 withMyApi 中，我看到了一个额外的函数包装器。是否需要组成多个 HOC ？我的意思是整个语法很混乱。虽然我知道 HOC，但只是想了解语法在他的情况下使用它，特别是在它是如何被消费的背景下 MyComponent.jsx。

外部函数包装器用于在包装组件时配置HoC。配置是静态的，不是通过标准的 React 渲染过程来自 props。这也是一种称为柯里化的标准函数式编程实践。您可以通过传递第一组参数来调用该函数，然后您将获得另一个也可以接受参数的函数，依此类推。只有当最后一个返回的函数被调用时，该函数才会返回它的结果。

您可以在代码中看到两个示例：

withStyle(style) - 传递渲染组件时使用的样式
withTranslation('translation') - 在渲染组件时传递要使用的翻译

对于withMyApi()，您可以跳过外包装，因为它不用于任何用途。

在这种情况下，“WrappedComponent”到底指的是什么？是那是我撰写的下一个圆括号中的内容，即在这种情况下是 MyComponent 吗？

正如我在撰写示例中所展示的那样

let StyledMyComponent = withStyle(style)(withTranslation('translation')(withMyApi()(MyComponent)));

调用withMyApi()后返回一个函数，调用MyComponent，这就是WrappedComponent。

您可以在此article 中找到有关柯里化和撰写的更多信息。

您的代码有问题。当您使用MyComponentData 时，您会在每次渲染时重新创建StyledMyComponent：

function MyComponentData(props) {
  let StyledMyComponent = compose(
    withStyle(style),
    withTranslation('translation'),
    withMyApi()
  )(MyComponent);
  return (
    <MyContextProvider>
      <StyledMyComponent />
    </MyContextProvider>
  );
}

从MyComponentData 中提取封装的组件，因为您只需要创建一次：

const StyledMyComponent = compose(
  withStyle(style),
  withTranslation('translation'),
  withMyApi()
)(MyComponent);

function MyComponentData(props) {
  return (
    <MyContextProvider>
      <StyledMyComponent />
    </MyContextProvider>
  );
}

【讨论】：