回应最佳做法/使用父组件实例
让我们想象一下看起来像这样的数据：
{
{
title: "great track",
tags: ["techno"]
},
{
title: "superb track",
tags: ["house", "90s"]
},
...
}
我在html表格中渲染，我有一个整个表格的组件，还有一个tr的子组件（又名歌曲标题和曲目）。 所以在每一行我都想让用户能够访问弹出窗口，在弹出窗口中他们可以为歌曲选择一个或多个标签。 我用reactstrap做了它，它工作正常。
我只是对性能感到有点失望，一旦创建完成就没问题，但是我看到在每行上添加我的模态时需要加载多长时间。 所以我的第一个反应是在父组件中只构建一个模态，然后从子组件中使用它，然后阅读关于如何“不应该使用父实例，因为它不好”的文章（tm）。
我理解关于数据流的观点，但在我的例子中，在每条线上都有一个模态等待，而我确信我永远不会在屏幕上同时出现两个模拟感觉就像浪费了资源。
任何人都可以指出我在这个特定的环境中构建这种功能的优雅方式吗？
将状态提升到父组件是反应中的常见做法，您可以阅读官方文档中的文章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>
)
}
}
当然，在子行中使用模态会浪费资源。 你需要为父母添加一个模式，并使用道具来显示/隐藏它。 此外，您应该使用您的列表项目的关键道具。
默认情况下，React在DOM节点的子节点上递归时，只是同时迭代两个子节点列表，并在出现差异时生成突变。
但是当孩子拥有密钥时，React使用该密钥将原树中的孩子与后续树中的孩子进行匹配。 这对性能有好处。
链接地址: http://www.djcxy.com/p/52153.html