了解React高阶组件

问题描述：

有人可以请解释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'););

运行此不显示特定的，只有div

谁能帮助了一个更好的例子比那些给定的？

答

一个HOC是功能接受一个组件作为它的参数之一，增强了组件某种程度上来说。

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

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

在这样一个例子中，这是更高阶的组件，Button或EnhancedButton。

EnhanceButton是HOC和FinalButton是增强组件。

我试图创造一个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功能柯里和组件ARG进入最后......像这样：

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

等反应，终极版...的connect功能，可组成更容易。看看recompose。

为什么组件会多次触发它们的'componentWillMount'方法多次 – cr05s19xx

@ cr05s19xx因为它们已被卸载并且它们正在重新挂载......或者因为您正在挂载一个新实例。 – Josep

查看[React的组件生命周期]（https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle）。 – Josep

答

尝试用你的createSetup.js：

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

和你main.js

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

了解React高阶组件

相关推荐