Comments 16
constclass App extends Component
Очень понравился канал на ютубе. Видно, что делаешь качественно и с душой. Желаю успехов!
Заходя в статью, ожидал увидеть какую-нибудь тонкую разницу между useLayoutEffect и componentDidMount, но "чуда не произошло")
А то что классы не будут развиваться — это не кажется, так прямо написано где-то в официальных доках.
Таймаут поставил для эксперимента. Если большой таймаут, 1000 например, то размер выдается норм
{x: 2, y: 2359.09375, width: 316, height: 48, top: 2359.09375, …}
а если маленький таймаут, то
{x: 0, y: 0, width: 0, height: 0, top: 0, …}
useLayoutEffect тоже пробовал.
2 часа гуглил. Много где пишут, что useEffect срабатывает когда дом готов )
Кто-то уточняет — что дом готов, но еще не отрисован до конца.
В общем, не могу поймать момент, когда размеры есть у элементов… Есть идеи?
я пытался без функции, не работает.
Но если вдруг тебе надо более сложную конструкцию, тогда я рекомендую сразу это видео посмотреть, чтобы хорошо понимать исходники как они работают: youtu.be/hoQz95Fh84c
И когда ты будешь осознавать, почему создается объект и зачем нужен current внутри него, ты сможешь улучшить реализацию
const phraseRefs = useRef<HTMLDivElement[]>([])
записываю вот так
<div ref={el => {phraseRefs.current[index] = el!}}>
Как создание отдельного компонента, поможет избавиться от функции? Ну будет:
<Item ref={el => {phraseRefs.current[index] = el!}}>
Функция же тут используется чтобы в 1 реф много компонентов записать в цикле.
Скинь пожалуйста пример, что ты предлагаешь, пару строк. А то не понятно.
чет не получается нормально отформатировать :(
`
const Item = ({ index, text }) => {
const ref = useRef()
useEffect(() => {
const size = ref.current.getBoundingClientRect()
// тут делай все что надо тебе с size, можешь родителю прокинуть sendToParent(size)
}, [])
return (
div ref={ref} className="phraseWrapper"{index + ' ' + text} div
)
}
}
`
На момент первого рендера уже есть готовый массив phrases? Или он добывается асинхронно?
Давайте теперь сравним с тем как работает useEffect...
Мы увидим сначала значение ноль, а только через 3 секунды цифра обновится до ширины блока
React 17-18. Я так понимаю, это уже не актуально?
У меня сначала 3 секунды ожидания, потом появляется блок с шириной 0 и тут же обновляется на новую ширину блока.
В чем разница между useLayoutEffect, componentDidMount, useEffect