Я работаю над компонентом таблицы. Когда я прокручиваю влево и вправо <tbody />, я хочу, чтобы он обновлял xOffset только для <theader />, который находится в отдельном компоненте, который я вызываю <Header Component />. Вот структура:

<Parent Component >
    <Header Component />
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
    <Very Expensive Body divs/>
</Parent Component >

Прослушиватель прокрутки находится в родительском компоненте, а xOffset является частью состояния родительского компонента. Когда я прокручиваю влево и вправо, он также делает очень дорогие повторные визуализации компонентов тела.

Какие у меня есть варианты только для компонента Header для повторного рендеринга?

1) Используйте Redux и селекторы. Родительский компонент отправляет xOffset в состояние приложения, и <Header Component /> просто прослушивает это в селекторе. Похоже на излишество ...

2) Я разделяю все <Very Expensive Body Comp divs > на их собственный компонент и использую ShouldComponentUpdate, чтобы он не рендерился повторно, если все остается таким же, кроме xOffset. Это не похоже на излишество, но я чувствую, что столкнусь с той же проблемой, потому что мне придется поместить прослушиватель прокрутки в этот новый компонент ... и затем использовать родительский компонент в качестве посредника. богатство

Есть ли третье более элегантное решение?

Я надеюсь, что есть способ передать функцию в <Header Component />, чтобы когда родительский компонент прокручивал влево и вправо, он использовал эту функцию для обновления состояния <Header Component />, что вызывало бы только его повторная визуализация .

6
NateW 31 Мар 2017 в 20:51

2 ответа

Лучший ответ

Вариант № 2! Разбейте ваши очень дорогие теги div на их собственные компоненты и используйте shouldComponentUpdate. Хранение всех элементов в одной функции render() не масштабируется, как вы начинаете видеть. Преимущество использования React в том, что вы можете создавать простые, повторно используемые компоненты и создавать более сложный пользовательский интерфейс с ними. Кажется, вы намерены хранить все внутри одного компонента, но это по сути анти-паттерн в React.

Однако не добавляйте новый прослушиватель прокрутки к каждому компоненту. Вместо этого просто сохраните его на родительском компоненте, как вы делаете, и передайте значение прокрутки вниз в качестве опоры для всех ваших новых компонентов. Если их нужно изменить только после прокрутки определенной части экрана, вы можете обновить их в каждой дочерней функции shouldComponentUpdate.

5
Andy Noelker 31 Мар 2017 в 18:15

Если я правильно понимаю, один из вариантов сделать что-то вроде:

<Parent Component >
    <Header Component />
    { this.getVeryExpensiveBodyDivs() }
</Parent Component >

И пусть getVeryExpensiveBodyDivs генерирует и кэширует div в первый раз, а затем просто обращается к ним из кеша позже, если они в кеше. Кеш будет просто переменной экземпляра (this.cachedVeryExpensiveBodyDivs).

Затем в componentWillReceiveProps компонента вашей таблицы вы можете проверить, не меняются ли какие-либо реквизиты, которые должны повлиять на очень дорогие элементы тела. Если изменения реквизита повлияют на очень дорогие элементы тела, очистите кеш. В следующий раз, когда getVeryExpensiveBodyDivs будет вызван, он восстановит и перепишет div.

2
Aaronius 31 Мар 2017 в 18:15