Является ли хорошей практикой установка переменной CSS в методе рендеринга React? - PullRequest
Новая
       52

Является ли хорошей практикой установка переменной CSS в методе рендеринга React?

0 голосов
/ 03 апреля 2020

Я создал сообщение вчера и удалил его по ошибке. Мне нужно создать компонент с указанным стилем c. Проблема в том, что метод componentDidMount () создает некоторую мерцание при рендеринге компонента. Это время, когда CSS стал установленным.

Я думаю, что мой компонент требует ресурсов, поэтому componentDidMount() происходит с небольшим кадром или двумя задержками. Вот почему я предоставляю здесь только фрагмент вместо полной демонстрации, моя маленькая демонстрация работает хорошо с мерцающим нулем c.

Затем я ввожу значение в методе рендеринга. Например: 

componentDidMount(){
   // the CSS rendering will lag by releasing a flickering :/
}

render(){

    // awesome, by setting my style in the render the good style is returned instantly.

    if (Math.round(window.scrollY + window.innerHeight +50) >= Math.round(document.body.scrollHeight)) {

            document.documentElement.style.setProperty('--background-transition', "")
            document.documentElement.style.setProperty('--is-page-bottom', "orange");
            document.documentElement.style.setProperty('--background-transition', "all 0.3s ease-out")
         }
             else{
                //setIsPageBottom_CSSVariable("rgba(84, 80, 79,0.85)")
                document.documentElement.style.setProperty('--background-transition', "")
                document.documentElement.style.setProperty('--is-page-bottom', "purple");
                document.documentElement.style.setProperty('--background-transition', "all 0.3s ease-out")
             }

Кто-то вчера сказал мне, что я должен использовать реагирующий React Hook для управления этим делом или componentDidMount, но componentDidMount в моем случае дает сбой из-за мерцания перед установкой соответствующего цвета фона.

Я новичок в React Hook, поэтому, если я хорошо понимаю, я могу сделать что-то вроде document.documentElement.style.setProperty в useEffect напрямую, и это будет согласовано с дизайном React-хука?

Между тем, я считаю, что мое решение просто хорошее, потому что при чтении официальной документации React отмечает, что :

Функция render () должна быть чистой Это означает, что он не изменяет состояние компонента, при каждом вызове возвращает один и тот же результат и напрямую не взаимодействует с браузером.

Если вам нужно взаимодействовать с браузером, выполните свою работу в componentDidMount () или другие методы жизненного цикла. Сохранение функции render () в чистоте облегчает понимание компонентов.

Хорошо, если я смогу подумать о моего компонента в непринужденной манере, так что это ни в коей мере не плохо не так ли? Просто не лучшая практика, которую я предполагаю. Мне посоветовали использовать addeventlistener, но здесь речь идет о мгновенном рендеринге моего стиля на первом компоненте рендеринга l oop. Таким образом, addeventlistener - это решение для другого случая, в котором я нахожусь.

В любом случае, какую альтернативу вы бы порекомендовали избежать мерцания при вставке моей настройки CSS в componentDidMount ()? Какая связь с крючком React?

Ответы [ 3 ]

2 голосов
/ 03 апреля 2020

Вы также можете рассмотреть useLayoutEffect , так как он запускается синхронно с изменениями DOM. Если обычное useEffect не устраняет проблему, вы можете использовать ее вместо этого.

2 голосов
/ 03 апреля 2020

Вот как вы можете использовать useEffect 

//componentDidMount replacement
useEffect(() => {
 //your code goes here
}, [])
0 голосов
/ 03 апреля 2020

Нет, это не очень хорошая практика - вам лучше изменить имя класса динамически с помощью реакции, в зависимости от внутреннего состояния компонента.

Таким образом, вы можете использовать хук useState и иметь свой компонент в «состоянии загрузки», который затем применяет класс.

Затем вы можете добавлять / удалять имена классов и связанные с ними стили, используя реакцию, а не вставляя их с помощью JS.

Посмотрите на пакет classNames: https://www.npmjs.com/package/classnames

Тогда ваш css будет: .additional-class { background: red; }

или что угодно.

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

https://reactjs.org/docs/refs-and-the-dom.html

...