重新渲染Reactjs数组组件

Question

我正在使用React和以下组件实现一个非常简单的图表页面：设计器：具有列。列：如果有工具，它会呈现图表。图表：将绘制一个高点图表。

问题是当我更改任何列的状态时的性能，所以我在Designer中调用this.setState({columns: columnsArr})，React将渲染所有列，例如，如果我们有一个60列，这将需要很长时间。

我读过React只有在组件的道具发生变化时才会渲染组件，所以对于列组件，如果一列发生变化，它不应该渲染所有列。那么我在这里错过了什么？

这是我的代码：

`

class Chart extends Component {
constructor(props) {
super(props);
this.handleDelete = this.handleDelete.bind(this);
}
handleDelete() {
this.props.removeTool(this.props.index);
};  
render() {
return (
<div id={"Chart_"+this.props.index}>
<div>
<button onClick={(e)=>{this.handleDelete()}} className="btn btn-sm btn-danger"><i className="fa fa-trash btn-danger"></i></button>
</div>
<div>
<HighchartsReact key={"H_" + this.props.index} highcharts={Highcharts} options={options} update={false} />
</div>
</div>
);
}
};
class Designer extends Component {
constructor(props, context) {
super(props, context);
this.state = {
columns: [
{ name: 'c1', hasTool: true },
{ name: 'c2', hasTool: true },
{ name: 'c3', hasTool: true },
{ name: 'c4', hasTool: true },
{ name: 'c5', hasTool: true }
]
}
this.toogleHasTool = this.toogleHasTool.bind(this);
}
toogleHasTool(columnId) {
var columnsArr = this.state.columns;
columnsArr.find(function (c) { return c.name === columnId }).hasTool = !columnsArr.find(function (c) { return c.name === columnId }).hasTool;;
this.setState({ columns: columnsArr })
}
render() {
var fn = this.toogleHasTool;
return (
<div id="container">
{
this.state.columns.map(function (column, i) {
return <Column key={"Col_"+column.name} index={column.name} hasTool={column.hasTool} toogleHasTool={fn} />
})
}
</div>
);
}
};
class Column extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="col-sm-3" >
{this.props.hasTool ? (<Chart key={"C_" + this.props.index} index={this.props.index} removeTool={this.props.toogleHasTool}> </Chart>) : ("")}
</div>
);
}
};`

Answer 1

您可以尝试在Column类中扩展PureComponent。这些组件只有在其状态或道具发生更改时才会重新渲染。请注意，它对这些对象进行了浅(而非深(比较。因此，如果只有一个Column更改，则不会调用其他Column的render((方法。