了解React高阶组件 [英] Understanding React Higher-Order Components

问题描述

有人可以解释一下React中的高阶组件吗?我已经阅读并重新阅读了文档，但似乎无法获得更好的理解.根据文档，HOC通过将参数传递给该函数来创建返回React组件的主函数，从而帮助消除重复.我对此有一些疑问.

Can someone please explain Higher-order components in React. I have read and re-read the documentation but cannot seem to get a better understanding. According to the documentation, HOCs help remove duplication by creating a primary function that returns a react component, by passing arguments to that function. I have a few questions on that.

• 如果HOC创建了新的增强组件，是否有可能根本不传入任何组件作为参数?
• 在例如此的示例中，这是高阶组件， Button 或 EnhancedButton .

• 我尝试过这样创建一个HOC:

• If HOCs create a new enhanced component, can it be possible not to pass in any component as argument at all?
• In an example such as this, which is the higher order component, the Button or the EnhancedButton.

• I tried creating one HOC like this:

// 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

Running this does not show the HOC, only the div

有人能提供比给出的例子更好的例子吗?

Can anyone help out with a better example than the ones given?

推荐答案

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

A HOC is a function that takes a Component as one of its parameters and enhances that component in some way.

如果HOC创建了一个新的增强组件，是否有可能根本不传入任何组件作为参数?

If HOCs create a new enhanced component, can it be possible not to pass in any component as argument at all?

不是，那将不是HOC，因为条件之一是它们将组件作为参数之一，并且它们返回具有某些附加功能的新组件.

Nope, then it wouldn't be a HOC, because one of the conditions is that they take a component as one of the arguments and they return a new Component that has some added functionality.

在这样的示例中，它是高阶组件，即Button或EnhancedButton.

In an example such as this, which is the higher order component, the Button or the EnhancedButton.

EnhanceButton 是HOC， FinalButton 是增强组件.

EnhanceButton is the HOC and FinalButton is the enhanced component.

我尝试过这样创建一个HOC:...运行此命令不会显示HOC，而只会显示div

I tried creating one HOC like this: ... Running this does not show the HOC, only the div

那是因为您的 createSetup 函数不是HOC ...这是一个返回组件的函数，是的，但是为了增强它，它不将组件作为参数.

That's because your createSetup function is not a HOC... It's a function that returns a component, yes, but it does not take a component as an argument in order to enhance it.

让我们看一个基本的HOC示例:

Let's see an example of a basic HOC:

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

您可以这样使用它:

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

现在，您的 EnhancedLink 就像一个 a 组件，但是如果您将设置为 true 的属性 invisible 传递给它不会渲染...因此，我们增强了 a 组件的默认行为，您可以使用任何其他组件来实现.

Now your EnhancedLink will be like a a component but if you pass the property invisible set to true it won't render... So we have enhanced the default behaviour of the a component and you could do that with any other component.

在很多情况下，HOC函数都会被处理，而Component arg会倒数第二次……

In many cases HOC functions are curried and the Component arg goes last... Like this:

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

就像react-redux的 connect 功能一样，这使得编写变得更加容易.看看重构.

Like the connect function of react-redux... That makes composition easier. Have a look at recompose.

这篇关于了解React高阶组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！