React中HOC返回组件的渲染及map批量渲染可行性咨询

嘿，作为React新手能留意到这些细节真的很棒！我来帮你理清这两个问题：

你写的写法是可行的，但并不是最优的常规实践。因为每次组件render时，你都会重新调用HOC(Component)创建一个全新的WrappedComponent组件——这会触发React对该组件的卸载和重新挂载，不仅带来不必要的性能损耗，还会导致组件内部的状态、生命周期钩子被重复执行，甚至丢失状态。

正确的常规做法是在组件定义的外部提前完成HOC的包装，让包装后的组件只被创建一次：

// 在组件外部提前包装，只执行一次
const WrappedComponent = HOC(YourOriginalComponent);

class ParentComponent extends React.Component {
  render() {
    // 直接复用提前包装好的组件
    return <WrappedComponent {...this.props} />;
  }
}

如果是函数组件，写法类似：

const WrappedComponent = HOC(YourOriginalComponent);

function ParentComponent(props) {
  return <WrappedComponent {...props} />;
}

当然可以！完全可以像生成常规组件数组那样用map实现，但同样要注意避免在map循环内重复调用HOC包装组件。

正确的做法是先在外部包装好目标组件，然后在map里复用这个已包装的组件，只传递不同的props即可：

// 提前完成包装，只做一次
const WrappedComponent = HOC(YourOriginalComponent);

function ParentComponent({ dataList }) {
  return (
    <div className="component-list">
      {dataList.map(item => (
        <WrappedComponent
          key={item.id} // 别忘了加唯一key
          title={item.title}
          content={item.content}
          // 可以根据item传递不同的自定义props
          isHighlighted={item.isTop}
        />
      ))}
    </div>
  );
}

如果你的场景需要给不同列表项使用不同的HOC包装（比如部分项用HOC_A，部分用HOC_B），那可以提前把所有需要的包装组件都定义好，再在map里根据条件选择：

// 提前定义好所有需要的包装组件
const WrappedWithA = HOC_A(YourOriginalComponent);
const WrappedWithB = HOC_B(YourOriginalComponent);

function ParentComponent({ dataList }) {
  return (
    <div className="component-list">
      {dataList.map(item => (
        item.category === 'hot' ? (
          <WrappedWithA key={item.id} {...item} />
        ) : (
          <WrappedWithB key={item.id} {...item} />
        )
      ))}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Joseph Tsui