ReactJS-在不重新渲染的情况下切换可见性

我使用ReactJS+nextJS+语义UI React

我有这样的json响应

[
    {
        "artist": "Cardi B",
        "dob": "01/01/1990",
        "albums":[
            {
                "title": "Invasion of privacy",
                "year": "2018"
            }
        ],
        "country": "usa"
    },
    {
        "artist": "Michael Jackson",
        "dob": "01/01/1950",
        "albums":[
            {
                "title": "Thriller",
                "year": "1981"
            },
            {
                "title": "Blood On The Dance Floor",
                "year": "1995"
            }           
        ],
        "country": "usa"
    }
]

我想让每一位艺术家看一排桌子。单击艺术家行的某些单元格时，将显示艺术家的相册

我有两个组件。一个是艺术家，一个是专辑

AlbumTable

组件基本上是包装在

中的另一个表。基本上，下面的代码工作得很好

toggleVisibility(index){
    let oldSt = this.state.AlbumStatus;
    oldSt[index] = !oldSt[index];
    this.setState({AlbumStatus: oldSt});
}


renderResult(){
    let rows = this.props.artists.map((r, index) =>{
        return(
             <Table.Body key={index}>
                  <Table.Row >
                        <Table.Cell>{r.artist}</Table.Cell>
                        <Table.Cell>{r.dob}</Table.Cell>
                        <Table.Cell onClick={() => this.toggleVisibility(index)}>+</Table.Cell>                 
                        <Table.Cell>{r.country}</Table.Cell>                            
                  </Table.Row>
                  <AlbumRow result={r.albums} hiddenStatus={!this.state.AlbumStatus[index]} />
              </Table.Body>
        );
    });
    return rows;
}


render(){
    return(
      <Table > 
            <Table.Header >
              <Table.Row>
                <Table.HeaderCell >Artists</Table.HeaderCell>
                <Table.HeaderCell >Dob</Table.HeaderCell>
                <Table.HeaderCell >Albums</Table.HeaderCell>                                    
              </Table.Row>
            </Table.Header>
            {this.renderResult()}
       </Table>             
    );      
}

切换可见性（索引）{
让oldSt=this.state.AlbumStatus；
oldSt[index]=！oldSt[index]；
this.setState（{AlbumStatus:oldSt}）；
}
renderResult（）{
让rows=this.props.artists.map（（r，index）=>{
返回(
{r.艺术家}
{r.dob}
this.toggleVisibility（index）}>+
{r.country}
);
});
返回行；
}
render（）{
返回(
艺术家
多巴哥
相册
{this.renderResult（）}
);      
}

我的要求是仅当单击艺术家行的“+”符号时才显示相册。我可以使用上面的代码切换可见性

问题：

---

如果我单击“迈克尔·杰克逊”行的“+”符号，就会显示他相应的专辑。然而，所有艺术家的专辑也被重新渲染。这是预期的吗？？它会导致大型数据集的性能问题吗？在不影响性能的情况下，最好的方法是什么？

可能不是什么大问题，除非您注意到在使用大型数据集时会出现问题。当谈到性能时，如果您认为自己有问题，请首先衡量（）。不要浪费时间试图过度优化，直到你知道你有一个问题

有一个建议是将每一行分成一行：

import-React，{PureComponent}'React'；
类AlbumTableRow扩展了PureComponent{
render（）{
常数{
钥匙
艺术家，
dob，
国家
专辑，
albumsHiddenStatus，
不可预见性，
}=这是道具；
返回(
{艺术家}
{dob}
+
{国家}
);
}
}
导出默认表格行；

PureComponents只应在属性值更改时重新渲染。然后，您应该更改父组件代码，如下所示：

getOnToggleVisibility = (index) => () => this.toggleVisibility(index);

renderResult(){
    let rows = this.props.artists.map((r, index) =>{
        return (
            <AlbumTableRow
                key={index}
                artist={r.artist}
                dob={r.dob}
                country={r.country}
                albums={r.albums}
                albumsHiddenStatus={!this.state.AlbumStatus[index]}
                onToggleVisibility={this.getOnToggleVisibility(index)}
            />
        );
    });
    return rows;
}

getOnToggleVisibility=（索引）=>（）=>this.toggleVisibility（索引）；
renderResult（）{
让rows=this.props.artists.map（（r，index）=>{
返回(
);
});
返回行；
}

---

请注意，我添加了一个

getOnTogglevibility

方法，该方法获取该索引并返回一个

OnTogglevibility

函数，该函数知道要使用的正确索引。

感谢您的时间。我想你是糊涂了切换唱片表的ArtistRow上会出现一个标志。这里的问题是setState重置了整个阵列-它会导致所有艺术家的相册重新渲染！尽管它不能解决实际问题，但它有助于提示重新设计整个组件，使其性能比我预期的要好得多。所以我接受这个答案。

getOnToggleVisibility = (index) => () => this.toggleVisibility(index);

renderResult(){
    let rows = this.props.artists.map((r, index) =>{
        return (
            <AlbumTableRow
                key={index}
                artist={r.artist}
                dob={r.dob}
                country={r.country}
                albums={r.albums}
                albumsHiddenStatus={!this.state.AlbumStatus[index]}
                onToggleVisibility={this.getOnToggleVisibility(index)}
            />
        );
    });
    return rows;
}