反应最佳实践/使用父组件实例-Java 学习之路

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

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

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

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

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

在这个特定的环境中，有人能指出我 Build 这种特征的优雅方式吗？

2 回答

将状态提升到父组件是反应中的常见做法，您可以阅读官方文档中的文章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>
     )
  }
}

回复于 2024-04-19T20:37:44+08:00

0

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

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

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

回复于 2024-04-19T20:37:44+08:00

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

2 回答

相关问题