Перерисовка элементов с теми же реквизитами - PullRequest
Новая
       28

Перерисовка элементов с теми же реквизитами

0 голосов
/ 16 июня 2020

У меня есть таблица с 500 строками таблицы. Каждая строка представляет собой отдельный компонент.

Исходные данные для таблицы - это простой массив объектов. Строки нужно перетаскивать, и каждый раз, когда я перетаскиваю другую строку, я изменяю исходные данные, сдвигая элемент внутри массива.

Данные неизменяемы, поэтому каждый раз я имею дело с новым массивом.

Проблема в том, что каждый раз, когда данные меняются, все 500 элементов повторно отображаются. Это немного неожиданное поведение, потому что ключи для большинства элементов остаются прежними, а React должен оптимизировать обновление.

shouldComponentUpdate решает проблему, но я использую mobx, и он создает свою собственную реализацию sCU, поэтому я не могу реализовать свой собственный sCU, потому что он нарушает поток mobx.

У меня такое ощущение, что он должен работать правильно даже без sCU. 

<Table>
    {data.map(item => {
      <TableRow key={item[keyField]} item={item} {...props}/>
    })}
</Table>

Есть какие-нибудь мысли об этом, ребята?

--- ОБНОВЛЕНИЕ ---

Оба компонента - наблюдатели. Я изменил свою структуру следующим образом: 

// Table component @observer 

@observable 
data = [] 

componentWillReceiveProps(nextProps) { 
    this.data = [...nextProps.data] 
} 

@action.bound 
onDrag() { 
    // drag handler here which mutates this.data 
    this.data.splice(...) 
} 

render() { 
    return this.data.map(item => (
        <TableRow key={item[keyField]} item={item} {...props} onDrag={this.onDrag}/>
    ))
}

Но он дает точно такой же результат, 500 рендеров при перетаскивании

1 Ответ

0 голосов
/ 17 июня 2020

Данные неизменяемы, поэтому каждый раз, когда я имею дело с новым массивом.

Это ответ. Если это новый массив, то весь компонент TableContainer (или как вы его называете, тот, который ссылается на массив data), отреагирует на него и произведет повторный рендеринг.

, потому что ключи поскольку большинство элементов остаются такими же, и React должен оптимизировать обновление.

Если ключ и тип компонента не изменились, React не будет повторно монтировать их, но они будут повторно отображать в любом случае.

...