Question

有人可以在React中解释高阶组件。我已阅读并重新阅读文档，但似乎无法更好地理解。根据文档，HOC通过将参数传递给该函数来创建返回react组件的主函数，从而帮助删除重复。我有几个问题。

如果HOC创建一个新的增强组件，是否可以不传入任何组件作为参数？
在诸如this之类的示例中，Button或EnhancedButton

我尝试创建一个这样的HOC：

// createSetup.js
import React from 'react';

export default function createSetup(options) {
    return class extends React.Component {
        constructor(props) {
            super(props);

            this.state = {};

            this.testFunction = this.testFunction.bind(this);
        }

        testFunction() {
            console.log("This is a test function");
        }

        render() {
            return <p>{options.name}</p>
        }
    }
}


// main.js
import React from 'react';
import {render} from 'react-dom';
import createSetup from './createSetup';

render((<div>{() => createSetup({name: 'name'})}</div>),
        document.getElementById('root'););

运行此操作不会显示HOC，只会显示div

任何人都可以提供比给出更好的例子吗？

Answer 1

HOC是函数，它将Component作为其参数之一，并以某种方式增强该组件。

如果HOC创建一个新的增强组件，是否可以不传入任何组件作为参数？

不，那么它就不会是HOC，因为其中一个条件是它们将一个组件作为参数之一并返回一个具有一些附加功能的新组件。

在这样的例子中，它是高阶分量，Button或EnhancedButton。

EnhanceButton是HOC，FinalButton是增强型组件。

我尝试像这样创建一个HOC：...运行它不显示HOC，只显示div

那是因为你的createSetup函数不是HOC ......它是一个返回一个组件的函数，是的，但它不会将一个组件作为一个参数来增强它。

让我们看一个基本HOC的例子：

const renderWhen = (condition, Component) =>
  props => condition(props)
    ? <Component {...props} />
    : null
);

你可以像这样使用它：

const EnhancedLink = renderWhen(({invisible}) => !invisible, 'a');

现在，您的EnhancedLink将类似于a组件，但如果您将属性invisible设置为true，则无法呈现...所以我们已经增强了a组件的默认行为，您可以使用任何其他组件执行此操作。

在许多情况下，HOC功能是curry，而组件arg是最后的......就像这样：

const renderWhen = condition => Component =>
  props => condition(props)
    ? <Component {...props} />
    : null
);

与react-redux的connect函数类似......这使得合成更容易。看看recompose。

Answer 2

尝试使用：

创建setSetup.js

const createSetup = options => <p>{options.name}</p>;

和你的main.js

const comp = createSetup({ name: 'name' });
render((<div>{comp}</div>),
  document.getElementById('root'));

Answer 3

简而言之，如果您假设函数类似于组件，则闭包类似于HOC。

了解React高阶组件

3 个答案: