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

【问题标题】：Why HOC are applied during exporting of component in place of importing it为什么在导出组件而不是导入组件时应用 HOC
【发布时间】：2017-12-31 05:20:46
【问题描述】：

我的基本理解是，像 connect（用于连接 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 会更好，因为这样可以更轻松地制作可重用组件。同一个组件可以从 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。

【问题讨论】：

标签： javascript node.js reactjs redux commonjs

【解决方案1】：

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

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

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

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

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

【讨论】：