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并返回一个新的分量。

根据dont use hocs inside the render method上的React文档，这是否会是不好的做法，或者像在return语句中那样做，这还可以吗？

Answer 1

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

在类声明之前放入以下代码：

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

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

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

这样做的目的是，您只创建一次“增强组件”，并在map函数内部重用它们，而不是为数组中的每个新元素创建一个新的组件实例。 / p>

Answer 2

是的，这很糟糕。

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

不鼓励在React中使用HOC吗？

2 个答案: