повторная визуализация функционального компонента при изменении состояния

Question

Я реализовал событие изменения размера окна при начальной загрузке компонента. Событие определяет внутреннюю ширину окна и сохраняет значение в хуке. Основываясь на хуке ширины, есть вторая функция useEffect, срабатывающая при изменении ширины:

export const AppRouter = (props) => {

    const [width, setWidth] = useState(window.innerWidth);

    useEffect(() => {
        const handleResize = () => setWidth(window.innerWidth);
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
        };
    }, []);

    useEffect(() => {
        setAppLayoutForViewportWidth();
    }, [width]);
}

Теперь неожиданное поведение: весь компонент перерисовывается при изменении хука ширины, а не только useEffect, основанный на хуке ширины ,

Может кто-нибудь назвать причину, почему весь компонент перерисовывается? Могу ли я перерисовать только useEffect на основе ширины?

Answer 1

Почему?

setState ({}) всегда заставляет перерисовать . ( если вы не вернете false в: shouldComponentUpdate (nextProps, nextState) ) Вы можете проверить это, поместив консольный журнал в

componentDidUpdate(prevProps, prevState) {
    console.log("Component did update")
}

Ваш setWidth(window.innerWidth); изменит состояние из-за его : useState(window.innerWidth);, что приведет к повторному запуску.

Как предотвратить это:

Если вы хотите контролировать время повторного рендеринга, создайте логи c в shouldComponentUpdate для возврата false, если вы хотите предотвратить повторное рендеринг.

Если вы находитесь в функциональном компоненте , взгляните на React.Memo. Подробнее об этом в этой теме: Как предотвратить повторный рендеринг моего функционального компонента с помощью React memo или перехватчиков React?

React.Memo работает аналогично чистому компоненту. Однако вы также можете настроить его поведение, передав ему функцию, которая определяет, что считается равным. По сути, эта функция - shouldComponentUpdate, за исключением того, что вы возвращаете true, если хотите, чтобы она не отображалась.

const areEqual = (prevProps, nextProps) => true;

const MyComponent = React.memo(props => {
  return /*whatever jsx you like */
}, areEqual);