不鼓励在React中使用HOC吗？

Question

有一些处于组件状态的数据，这些数据被映射为：

  render() {
    return (
      <div className="App">
        {this.state.items.map(item => {
            const enhancer = item.color = 'red' ? EnhancerA : EnhancerB
            const Enhanced = withEnhancement(enhancer)
            return <Enhanced {...item} />
          })}
      </div>
    )
  }

withEnhancement是一个HoC ，它使用EnhancerA或EnhancerB并返回一个新组件。

根据React docs的说法，这是不好的做法吗， 不要在render方法内使用hocs，或者像在return语句内那样使用hocs吗？

Answer 1

我会说这很糟糕，是的。但是有一个非常简单的解决方法。

将此代码放在类声明之前：

const EnhancedA = withEnhancement(EnhancerA);
const EnhancedB = withEnhancement(EnhancerB);

在渲染功能中，选择要使用的增强组件：

const Component = item.color = 'red' ? EnhancedA : EnhancedB;
return <Component {...item} />;

关键是，您只需创建一次“增强组件”，然后在map函数中重新使用它们，而不是为数组中的每个新元素创建一个新的组件实例。

Answer 2

是的，那将是不好的。

为了使您链接的React文档中讨论的内容相同，它们是同一回事，这也将导致不必要的强制转售。