Как избежать повторного рендеринга компонента при отбрасывании Draggable в Droppable, используя response-beautiful-dnd - PullRequest
Новая
       18

Как избежать повторного рендеринга компонента при отбрасывании Draggable в Droppable, используя response-beautiful-dnd

0 голосов
/ 09 июля 2019

Когда я перетаскиваю компонент Draggable в Droppable, компонент Draggable всегда перерисовывается.Я видел видео об оптимизации перетаскиваемых и сбрасываемых объектов, но эта оптимизация не работает для меня, потому что у меня есть графики в перетаскиваемых компонентах, которые я не хочу перерисовывать (например, статические диаграммы и графики в реальном времени)

Я настроил библиотеку реагировать-Beautiful-DDD и попытался поместить все настройки, которые были описаны в этом курсе 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 выглядит так: 

<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>
...