重新渲染 Reactjs 数组组件

Posted 2023-02-22

【中文标题】重新渲染 Reactjs 数组组件

【英文标题】：Re-rendering Reactjs array components

【发布时间】：2019-01-01 21:26:14

【问题描述】：

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

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

我读过 React 仅在其 props 更改时才呈现组件，因此对于列组件，如果一列发生更改，它不应该呈现所有列。那么我在这里缺少什么？

这是我的代码：

`

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

【参考方案1】：

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

【讨论】：

为此，我实现了` shouldComponentUpdate(nextProps) return (this.props.hasTool !== nextProps.hasTool); ` 所以现在它很快了，但这不是 React 的 render() 函数默认应该做的吗？

在这种情况下，建议扩展 PureComponent，但是这也对您有用。默认情况下，Render() 函数不应该这样做，因为仅更改道具和状态并不总是会导致重新渲染。你可以看看这里：medium.com/@antonkorzunov/….