Question

当我将一个Draggable组件拖放到Droppable中时，Draggable组件总是被重新渲染。我看了有关优化可拖动对象和可放置对象的视频，但是这种优化对我来说不起作用，因为我在可拖动组件中有一些我不想重新渲染的图表（例如静态图表和实时图表）

我已经建立了react-beautiful-dnd库，并尝试放置该课程https://egghead.io/lessons/react-optimize-performance-in-react-beautiful-dnd-with-shouldcomponentupdate-and-purecomponent上描述的并符合我的需求的所有设置，甚至从13节进行了优化。

这是我到目前为止所做的：

Droppable的代码

...
const firstColumn: ReactNode = <Column
                                            widgetsList     = {firstColumnWidgets}
                                            setSpinnerState = {this.setSpinnerState}
                                            rerenderWidgets = {this.state.rerenderWidgets}
                                        />;

<DragDropContext onDragEnd={this.onDragEnd} onDragStart={this.onDragStart} onDragUpdate={this.onDragUpdate}>
    <div className="row">
        <Droppable droppableId={'firstColumnWidgets'}>
            {
                (provided, snapshot) => (
                    <div
                        className={firstColumnStyle + " layout-column"}
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        style={{ backgroundColor: snapshot.isDraggingOver ? '#3b404a' : 'transparent' }}
                    >
                        {firstColumn}
                        {provided.placeholder}
                    </div>
                )
            }
        </Droppable>
</DragDropContext>

单个列位于单独的组件中

class Column extends React.Component<IColumnProps, {}> {

    public shouldComponentUpdate(nextProps: any) {
        if(!nextProps.rerenderWidgets) {
            return false;
        }
        return true;
    }

    public render() {
        const widgets: ReactNode = this.props.widgetsList.map((widget: any, index: number) => {
            return (
                // tslint:disable-next-line:jsx-key
                <Widget
                    id              = {widget.id}
                    index           = {index}
                    rerenderWidget  = {this.props.rerenderWidgets}
                />
            );
        });

        return (
            <div>
                {widgets}
            </div>
        );
    }
}

export default Column;

可拖动对象如下：

<Draggable draggableId={this.props.id.toString()} key={this.props.id.toString()} index={this.props.index}>
    {provided => (
        <div
            className="card"
            ref={provided.innerRef}
            {...provided.draggableProps}
            {...provided.dragHandleProps}
        >
            {provided.placeholder}

            <XYChart
                resetChart   = {this.state.resetChart}
                title        = {this.props.name}
            />
        </div>
    )}
</Draggable>

使用react-beautiful-dnd将可拖放对象拖放到Droppable中时如何避免组件重新渲染

0 个答案: