为什么在组件导出期间应用HOC而不是导入组件

我基本的理解是，像连接（用于连接REDX存储）和其他HOC的HOC在输出时应用于组件。

喜欢这个

import React, { Component } from 'react'; import './App.css'; import myHoc from './myHoc/index'; class App extends Component { render() { return ( <div className="App"> </div>); } } export default myHoc({})(App); 

如果在import过程中使用HOC会更好，因为这样可以更容易地制造可重复使用的组件。 相同的组件可以从商店或道具中挑选道具，并且由父组件负责检查在组件上应该应用什么HOC。

我知道我们可以使用容器组件和呈现子组件，但只是在JSX中添加代码（如果有许多容器组件，将看起来不错）

尽pipe我们可以这样做

 import React, { Component } from 'react'; import './App.css'; import myHoc from './myHoc/index'; import AppChild from './AppChild'; const NewAppChild = myHoc({}, ()=> { })(AppChild); class App extends Component { state = { count: 1, }; reRender = () => { this.setState({count: this.state.count + 1}); }; render() { return ( <div className="App"> <NewAppChild handleClick={this.reRender} count={this.state.count}/> </div> ); } } export default App; 

我的问题是，有什么更好的办法可以处理这种情况，我希望将我的HOC应用于导入，即每个容器组件都可以导入，并且可以根据需要应用不同的HOC。

Answer 1

这个deviseselect没有单一的具体原因 – 正如你已经看到，你可以调用你的HOC无论你使用的组件 – 但我看到至less1优势： configuration和组件重用 。

在你的例子中， myHoc带任何参数或configuration，所以这不一定适用，但是想象一下，你正在调用从redux connect 。

在大多数情况下， connect接受2个定义行为的configuration函数 – mapStateToProps和mapDispatchToProps 。 如果你在MyComponent定义了那些，那么任何消费组件都可以import MyComponent from 'MyComponent'并开始使用它。

如果你依靠父组件调用connect()那么你迫使每个消费者重新实现connect的configuration。 这可能意味着许多重复configuration的实例，并增加了消耗组件的复杂性。

这就是说，当然有些情况下你可能会想要这种行为 – 例如，如果你想把同一个组件connect到不同的状态定义。 最终，你需要select最好的模式来支持你需要的组件。