Question

让我们想象看起来像这样的数据：

{
  {
    title: "great track",
    tags: ["techno"]
  },
  {
    title: "superb track",
    tags: ["house", "90s"]
  },
  ...
}

我在一个html表中渲染它，我有一个整个表的组件，以及tr（也就是歌曲标题和曲目）的子组件。所以在每一行我想让用户能够访问一个弹出窗口，在弹出窗口中他们可以为歌曲选择一个或多个标签。我使用reactstrap做了它，它工作正常。

我只是对性能感到有点失望，一旦它构建完毕就很好，但是当我在每一行添加模态时，我看到加载的时间有多长。所以我的第一反应是在父组件中只构建一个模态，然后从子组件中使用它，然后我阅读有关如何“不应该使用父实例因为它不好”（tm）的文章。 / p>

我理解关于数据流的观点，但在我的例子中，我确信在屏幕上同时有两个模态等待每一行模态感觉就像浪费了资源。

在这个特定的背景下，有人能指出我建立这种特征的优雅方式吗？

Answer 1

提升状态直到父组件是反应中的常见做法，您可以阅读官方文档中的文章https://reactjs.org/docs/lifting-state-up.html

但是有一个问题，当你在父组件中使用setState时，你的歌曲表会一次又一次地呈现，所以你应该关心它。其中一种方法是为Songs表创建PureComponent（如果道具没有变化，这个组件将不会重新渲染）

我认为，下面的代码就是其中之一;

class Parent extends React.Component{
  state={
    tags: [],
    songs: {
        title: "great track",
        tags: ["techno"]
      },
      {
       title: "superb track",
       tags: ["house", "90s"]
      }
  }

  handlePopup(data){
    this.setState({tags: data});
  }

  render(){
    const {tags, songs} = this.state;
    cons isShowModal = tags && tags.length

    return (
      <div> 
          {isShowModal && <Modal data={tags} />}

          <SongsList data={songs} />
      </div>
    )
  }
}

class Parent extends React.PureComponent{
  render(){
    const {data} = this.props;

    return (
       <table><tbody>...render songs data</tbody></table>
     )
  }
}

Answer 2

当然，在子行中使用模态是浪费资源。你需要向父母添加一个模态并使用道具来显示/隐藏它。此外，您应该使用您的列表项的关键道具。

默认情况下，当对DOM节点的子节点进行递归时，React会同时迭代两个子节点列表，并在出现差异时生成变异。

但是当孩子有钥匙时，React使用钥匙将原始树中的孩子与后续树中的孩子相匹配。它对表现有好处。

反应最佳实践/使用父组件实例

2 个答案: