Запрет повторного рендеринга с изменениями в родительское состояние - PullRequest
Новая
       49

Запрет повторного рендеринга с изменениями в родительское состояние

0 голосов
/ 01 мая 2020

Как можно изменить состояние в родительском компоненте и передать его в качестве подпорки дочерним элементам, но повторно визуализировать эти дочерние элементы только при изменении измененного состояния?

Моя базовая c настройка в настоящее время работает , но это вызывает некоторые ненужные повторные рендеры. Родительские компоненты получают информацию из URL-адреса (с использованием перехватчиков реакции-маршрутизатора) и изменяют ее, а затем передают ее в качестве подпорки своим дочерним элементам. Компонент выглядит следующим образом: 

 const myComponent = () => {

    const { dataType } = useParams();
    const { search } = useLocation();

    /// These functions help me transform that data into something more manageable
    const y = queryString.parse(search).collection;
    const { collections, gqlQuery } = getCollections(dataType);
    const collection = collections.find(x => x.value === y);

    return (
     <MyChild collection={collection} /> ... This component is re-rendering unnecessarily.
    )



};

Как я могу гарантировать, что, когда URL-адрес не изменяется (значения dataType и search, которые выбираются с помощью реакции-маршрутизатора), дочерние компоненты, которые получают производные данные ТАКЖЕ не будут излишне перерисованы?

1 Ответ

1 голос
/ 01 мая 2020

Первым шагом было бы убедиться, что ссылка на переменную collection изменяется только при изменении одной из зависимостей: 

useMemo(() => {
  const y = queryString.parse(search).collection;
  const { collections, gqlQuery } = getCollections(dataType);
  const collection = collections.find(x => x.value === y);
}, [search, dataType]);

Вторым было бы убедиться, что компонент только повторно рендерится при получении новых реквизитов: 

import { memo } from 'react';

function Child() {

}

export default memo(Child);

Вы также можете использовать второй аргумент для memo для настройки сравниваемого объекта. 

function Child(props) {

}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(Child, areEqual);

React.memo - Документы React.useMemo - Документы

PS: Обратите внимание, что React обычно очень быстр с повторными рендерами. Используйте их только для повышения производительности после измерения их воздействия. Есть вероятность, что его производительность на хуже, чем раньше

...