javascript - 在 React 中返回 array.map() 的最佳方法？

Question

我对 React 有点陌生，正在观看一些视频教程，也正在阅读一些有关它的书籍。 (没有早于 2016 年的 - 因为它变化很大)

在我的旅程中，我通过了两种方法在 React 中执行 array.map() 循环。

<强>1。在父组件内执行 map 循环，并仅返回子组件中的元素

class ItemsList extends React.Component {
  render() {
    const items = this.props.items.map((item) =>(
      <Item
        id={item.id}
        title={item.title}
      />
  ));
    return (
      <div id='items'>
        {item}
      </div>
    );
  } //render
}

class Item extends React.Component {
  render() {
    return (
      <li key={this.props.id}>
          {this.props.title}
      </li>
    );
  } //render
}

<强>2。在子组件内部进行map循环，并将整体返回给父组件

class ItemsList extends React.Component {
  render() {      
      ));
        return (
          <div id='items'>
            <Item
            id={item.id}
            title={item.title}
            />
          </div>
        );
      } //render
}

class Item extends React.Component {
  render() {
    const item = this.props.items.map((item) =>(
      <li key={item.id}>
          {item}
      </li>
    ));
    return(item);
  }
}

如果我理解正确的话，React 的优点之一是它是一种更加“团队友好”的应用程序工作方式，因为每个人都可以一次处理一个组件，而不会真正干扰其他人的工作。

但基于此，我会选择选项2，因为我们尽可能少地接触父组件，而更多地关注子组件。

但我也相信选择选项 1 更明智，因为我们在父组件中拥有所有数据和绑定(bind)，这使得子组件更加结构化并且更少的绑定(bind)需求。

很抱歉，如果我仍然缺少一些词汇来更好地向经验丰富的 React 开发人员解释这一点 - 但我希望我能清楚地说明这一点。

感谢您抽出宝贵的时间!

Answer 1

由于 React 是基于组件的，因此您应该将 props 分组到它所属的组件中。选项 2 没有多大意义，因为您有一个 ItemList 组件，它接受项目列表并显然呈现和维护该列表。 Item 组件特定于一个 项目，不应该了解其他项目。此外，使用选项 1，您可以将项目列表与实际项目解耦。

更好的方法是让父组件渲染子项的集合。