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

Question

我的基本理解是，在导出组件时，将像连接(用于连接redux存储(和其他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);

更好的做法是在导入过程中应用 HOC，因为它可以更轻松地制作可重用的组件。同一组件可以从商店或道具中获取道具，这将是父组件的责任，以检查在组件上应用哪个 HOC 提供什么。

我知道我们可以使用容器组件来获取组件并呈现子项，但这只会在 JSX 中添加代码(如果有很多容器组件，看起来不太好(

虽然我们可以这样做

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

这种设计选择没有单一的具体原因 - 正如您已经看到的那样，您可以在使用组件的任何地方调用您的 HOC - 但我至少看到了一个优势：配置和组件重用。

在您的示例中，myHoc不采用任何参数或配置，因此这不一定适用，而是假设您正在从 redux 调用connect。

在大多数情况下，connect接受 2 个配置函数 -mapStateToProps和mapDispatchToProps- 定义行为。 如果在MyComponent中定义它们，则任何使用组件都可以import MyComponent from 'MyComponent'并开始使用它。

如果你依赖于父组件来调用connect()那么你就会迫使每个使用者重新实现connect的配置。 这可能意味着许多重复配置的实例，并增加了使用组件的复杂性。

话虽如此，在某些情况下，您可能希望此行为 - 例如，如果您想将同一组件connect到不同的状态定义。 最终，您需要选择最佳模式来支持组件所需的内容。