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

Question

I use ReactJS + nextJS + Semantic-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"
}
]

我想在表格行中展示每位艺术家。当单击艺术家行的某些单元格时，将显示艺术家的专辑。

我有 2 个组件。一个给艺术家，一个给专辑。AlbumTable组件基本上是另一个包裹在<Table.Row>内的表。基本上下面的代码工作得很好。

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>             
);      
}

我的要求是仅在单击艺术家行的"+"号时才显示专辑。我能够使用上面的代码切换可见性。

问题：

如果我点击"迈克尔杰克逊"行的"+"号，就会显示他对应的专辑。 但是，所有艺术家的专辑也会重新渲染。这是意料之中的吗？？它会导致大型数据集出现任何性能问题吗？在不影响性能的情况下，最佳方法是什么？

Answer 1

可能不是一个大问题，除非您注意到大型数据集会变得滞后。说到性能，如果你认为你有问题，首先要衡量(阅读更多关于衡量 React 性能的信息(。不要浪费时间试图过度优化，直到你知道你有问题。

一次建议可能是将每一行分成一个PureComponent：

import React, { PureComponent } 'react';
class AlbumTableRow extends PureComponent {
render() {
const {
key,
artist,
dob,
country
albums,
albumsHiddenStatus,
onToggleVisibility,
} = this.props;
return(
<Table.Body key={key}>
<Table.Row >
<Table.Cell>{artist}</Table.Cell>
<Table.Cell>{dob}</Table.Cell>
<Table.Cell onClick={onToggleVisibility}>+</Table.Cell>
<Table.Cell>{country}</Table.Cell>
</Table.Row>
<AlbumRow result={albums} hiddenStatus={albumsHiddenStatus} />
</Table.Body>
);
}
}
export default AlbumTableRow;

PureComponents只应在prop值更改时重新渲染。然后，您应该像这样更改父组件代码：

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方法，该方法获取该索引并返回一个知道要使用的正确索引的onToggleVisibility函数。