Добавление класса CSS, когда компонент будет монтироваться - PullRequest
Новая
       6

Добавление класса CSS, когда компонент будет монтироваться

1 голос
/ 27 марта 2019

Я добавляю некоторый класс к элементу body, когда Modal открыт 

const Modal = ({ ... }) => {
    ...
    useEffect(() => {
        document.body.classList.add('modal-open')
        return () => document.body.classList.remove('modal-open')
    }, [])

Но я заметил быструю и короткую задержку при применении класса modal-open (особенно когда этот класс содержит некоторые стили, такие как margin-right: 17px, overflow-y: hidden и position: sticky !important). Поэтому я вижу, что элемент body движется Что, конечно, не очень удобно для пользователя.

Итак, я перешел, добавив класс из useEffect

document.body.classList.add('modal-open')
useEffect(() => { ... }, [])

И это работает, но эта строка кода document.body.classList.add('modal-open') выполняется при каждом повторном рендеринге, а не только один раз, как в useEffect

Так есть ли лучший подход? может быть componentWillMount эквивалент в хуках, потому что я не касаюсь состояния, я просто манипулирую классами элементов dom?

1 Ответ

2 голосов
/ 27 марта 2019

useLayoutEffect можно использовать вместо useEffect, чтобы применить изменения ранее.

Подпись идентична useEffect, но срабатывает синхронно после всех мутаций DOM. Используйте это, чтобы прочитать макет из DOM и синхронно перерисовать. Обновления, запланированные внутри useLayoutEffect, будут синхронно очищаться до того, как браузер получит возможность рисовать.

...