from
Можно грубо говоря один где-то сверху
from
Остальное по желанию
Никита Суханов
Можно грубо говоря один где-то сверху
что если компонент большой, в нем отдельные списки например должны через lazyLoad быть?
from
что если компонент большой, в нем отдельные списки например должны через lazyLoad быть?
Вроде как будет работать, если просто обернуть всё в саспенс
Sm•ok
что если компонент большой, в нем отдельные списки например должны через lazyLoad быть?
Посмотри React Suspense
🦜
что если компонент большой, в нем отдельные списки например должны через lazyLoad быть?
научится проектировать интерфейс
Никита Суханов
const LazyImg = lazy(() => import('../image'));
const MyLogo = src => <Suspense>
<LazyImg src={src} />
</Suspense>
return (
<div className="header">
{MyLogo(logoSrc)}
</div>
) -- пытаюсь вот атк решить, но не выходит
}
Sm•ok
const createLazyPage = page => (
<Suspense fallback={<PageIsLoading />}>
{page}
</Suspense>
)
Никита Суханов
чем этот вариант плох?
Никита Суханов
Sm•ok
Оборачивает все lazy контейнеры в это
Никита Суханов
что не грузить все страницы клиенту
так lazyLoad на отдельный компонент вешают, а не на всю страницу целиком же
Sm•ok
через фукнцию
Sm•ok
так lazyLoad на отдельный компонент вешают, а не на всю страницу целиком же
component: props => createLazyPage(<SomePage {...props} />),
Sm•ok
SomePage это импортутый через lazy
Sm•ok
const SomePage = Lazy(....)
Никита Суханов
любой
у тебя в коде нет такого. Ты написал функцию для любого компонента, и назвал ее ...page
Sm•ok
const SomePage = lazy(() => import('path').then(module => ({ default: module.some })))
Никита Суханов
const SomePage = lazy(() => import('path').then(module => ({ default: module.some })))
page.. какой нахер page?
Sm•ok
просто контейнер импортнутый через лези
Sm•ok
добавляешь к его названию слово page
Sm•ok
ты же страницу в лези суешь ?
Sm•ok
ты что, собрался компоненты через lazy импортить ?
Никита Суханов
ты что, собрался компоненты через lazy импортить ?
вообще не понимаю что ты имеешь ввиду
Никита Суханов
еще раз:
Никита Суханов
const LazyImg = lazy(() => import('../image'));
const MyLogo = src => <Suspense>
<LazyImg src={src} />
</Suspense>
return (
<div className="header">
{MyLogo(logoSrc)}
</div>
) -- пытаюсь вот атк решить, но не выходит
}
Sm•ok
который ты отображаешь на опр. роуте
Vladimir
вообще не понимаю что ты имеешь ввиду
насколько велик размер того, что ты суешь внутрь lazy?
Олег
Друзья, как при отправке формы вытащить значение из инпута этой формы?
Никита Суханов
насколько велик размер того, что ты суешь внутрь lazy?
варьируется от картинки до компонента побольше
Sm•ok
Sm•ok
Друзья, как при отправке формы вытащить значение из инпута этой формы?
храни все значения инпута в стейте
Никита Суханов
да что это вообще такое ) лол
1) получаю кмопонент 2) пишу функцию которая возвращаетего
Никита Суханов
1) получаю кмопонент 2) пишу функцию которая возвращаетего
ты аналогичный код написал, с каким то page в параметре
Sm•ok
В lazy обычно страницы суют на сколько я знаю
Sm•ok
то есть ленивая загрузка чанков
Bogdan
useEffect(() => {
alert(props)
}, [props])
смотри в SignIn ефект, я передал пропс из App он все равно отрабатывает
https://codesandbox.io/s/agitated-mendel-q4efb
Bogdan
12 ведь неизменное число
Никита Суханов
Sm•ok
Никита Суханов
Ну, я использую это для страниц и кидал примеры с страницами
ты на всю страницу вешаешь lazyLoad?
Никита Суханов
кусок === компонент я надеюсь?
lazyLoad используют для компонента, который за пределами вьюпорта
Никита Суханов
страница за пределами вьюпорта что ли?
Sm•ok
смотри в SignIn ефект, я передал пропс из App он все равно отрабатывает
https://codesandbox.io/s/agitated-mendel-q4efb
http://joxi.ru/DmBOdEEUJWjOV2
Sm•ok
Сработало один раз. Что не так ?
Sm•ok
Тебе ведь уже сказали, что он срабатывает 1 раз и далее уже если 2 аргумент изменился
Mike
страница за пределами вьюпорта что ли?
конечно. ты находишься на странице А, страницы Б, В, и Г — за пределами вьюпорта
Mikhail
Обычно глаза вытекают, а тут прямо збс
Sm•ok
фича
Bogdan
лол. Компонент же заного создается
тоесть если пропс одинаков, все равно рендер? смысл тогда от второго аргумента, если отрабатывает как componentDidMount и руками придется сравнивать пропсы, что бы не отправлять запрос еще раз