javascript - 为什么在导出组件而不是导入组件时应用 HOC

Question

我的基本理解是 HOC 之类的连接(用于连接 redux 存储)和其他 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 更好，因为它可以更容易地制作可重用的组件。同一个组件可以从 store 或 props 中获取 props，这将是父组件的责任，以检查将什么 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 - 但我至少看到了 1 个优势:配置和组件重用。

在您的示例中，myHoc 不采用任何参数或配置，因此这不一定适用，但想象一下您正在从 redux 调用 connect。

在大多数用例中，connect 接受 2 个配置函数 - mapStateToProps & mapDispatchToProps - 定义行为。如果您在 MyComponent 中定义它们，那么任何使用组件都可以从“MyComponent”导入 MyComponent 并开始使用它。

如果您改为依赖父组件调用 connect()，那么您将迫使每个消费者也重新实现 connect 的配置。这可能意味着许多重复配置的实例，并增加了使用组件的复杂性。

话虽这么说，但在某些情况下您可能想要这种行为 - 例如，如果您想要将相同的组件连接到不同的状态定义。最终，您需要选择最佳模式来支持您对组件的需求。