надо об эдж кейсах тоже думать, а если я хочу в одной форме onChange для одного инпута с сайдэффектом? как с таким апи выкрутиться? Object.assign на ходу?

<input onChange={form.field('myInput').onChange} /> Ну да, не очень удобно

чтоб можно было дополнять своими правилами

вон формик обходятся

There are two ways to use Formik: withFormik(): A Higher-order Component (HoC) that accepts a configuration object <Formik />: A React component with a render prop

There are two ways to use Formik: withFormik(): A Higher-order Component (HoC) that accepts a configuration object <Formik />: A React component with a render prop

да, можно с ХОКом, можно без него

Не так уж и обходятся

в смысле?)

ну можно да, но всё равно

как-то не то

в смысле render prop для тебя "не то"? как по мне это как раз лучший способ композиции сейчас

причём там в проп render походу надо кидать форму

в смысле render prop для тебя "не то"? как по мне это как раз лучший способ композиции сейчас

с HOC код более плоский получается

велосипед

поддерживаю алексея в плане НОС-ов

тем более никто не мешает сделать так: withForm(...)( ({form}) => (<form> ... </form>) )

с HOC код более плоский получается

Ага, требующий больше файлов создавать

Ага, требующий больше файлов создавать

Чего?????

каждый НОС отвечает за свою часть логики Form - за хранение стейта формы FormValidator за валидацию

Чего?????

Динамически ты в хок не обернёшь

Ага, требующий больше файлов создавать

у меня на 20 форм 3 файла хоков

не вижу проблемы )

А зачем динамически оборачивать?

у меня на 20 форм 3 файла хоков

Значит у тебя три вида формы )

Значит у тебя три вида формы )

нет

redux-form выглядит наиболее развитым решением

А зачем динамически оборачивать?

Композиция

Композиция

а HOC не композиция?

redux-form выглядит наиболее развитым решением

Тише)

а HOC не композиция?

Это абстракция.

это я масла подливаю

redux-form выглядит наиболее развитым решением

как поздние дни Nero Burning Rome ага )

а HOC не композиция?

Статическая

как поздние дни Nero Burning Rome ага )

:)) хех

как поздние дни Nero Burning Rome ага )

ну а если серьезно, кто еще поддерживает такой же функционал?

Вов, что значит “такой же функционал"?

redux-form выглядит наиболее развитым решением

Там Field, для которого надо ещё свой компонент писать дополнительный, если хочется что-то более сложное, чем какой-нибдуь input. Да и с редаксом не всегда такая тесная связь нужна. Но да, на самом деле redux-form пока что один из самых популярных

ну а если серьезно, кто еще поддерживает такой же функционал?

Они сами виноваты, что столько функционала поддерживают)

Статическая

а зачем тебе динамическая? и что тебе мешает в любом компоненте делать const MyFormHoc = withForm()(MyForm); и юзать как компонент, если уж так надо

А как композиция в реакте сказывается на перформансе? Просто интуитивно кажется что делать кучу HOC-ов чревато тормозами.

Тормозами черевата плохая архитектура

А как композиция в реакте сказывается на перформансе? Просто интуитивно кажется что делать кучу HOC-ов чревато тормозами.

Да, лучше не делать HOC внутри HOC внутри HOC и так далее.

Например, в material-ui некоторые компоненты вызывают каскадное обновление что тормозит реконсиляцию.

Ну вот видишь

Хотя наверное можно придумать какую-нибудь магию для схлопывания этой конструкции в один компонент

Да, лучше не делать HOC внутри HOC внутри HOC и так далее.

Но это основной подход, который предлагает recompose.

но это на самом деле надо на практике изучать

как это влияет на производительность

Да, лучше не делать HOC внутри HOC внутри HOC и так далее.

Почему?₽

Я думаю, что все портит React.createElement. Без него HOC-и это просто чистые функции которые могут быть очень быстро вызваны и их умеет оптимизировать компилятор.

Рекомпоуз куча народа юзает

Почему?₽

Ну интуитивно кажется, что на производительность негативно повлияет. Точнее точно повлияет, но вот насколько - это большой вопрос

Я думаю, что все портит React.createElement. Без него HOC-и это просто чистые функции которые могут быть очень быстро вызваны и их умеет оптимизировать компилятор.

Это проблема архитектуры реакта кмк

Это проблема архитектуры реакта кмк

Ну, это не то, чтобы проблема прям. Просто провод для улучшения.

А кто знает что именно делает React.createElement? Просто констурирует plain js object?

а зачем тебе динамическая? и что тебе мешает в любом компоненте делать const MyFormHoc = withForm()(MyForm); и юзать как компонент, если уж так надо

с телефона до этого был Короче Каждый раз когда кто-то пишет export withStuff(Component) он теряет весь смысл разделения компонентов на презентейшнл и контейнеры Теперь навсегда Component привязан к определённой логике / конфигурации (смотря что хок делает). Иногда это оправдано. Чаще — нет. Но так или иначе мы потеряли возмножность "предоставить" функционал там, где он внезапно понадобился представим, что мой мегаполезный hoc withStuff() действительно делает че-то полезное, что может пригодиться очень часто. Пишу-пишу я лейаут типа <div><h1>stuff info</h1></div> и вдруг понимаю, что в заголовке мне было бы так здорово иметь те данные, которые даёт withStuff. Что делать? Создавать новый файл с компонентом, оборачивать его в withStuff, импортить, вставлять в h1 А имея умный компонент, который представляет данные через render prop, у нас получится живая композиция: <div> <h1> stuff info: <WithStuff render={data => <span>{data.info}</span>} /> </h1> </div> это мегаудобно

А кто знает что именно делает React.createElement? Просто констурирует plain js object?

возвращает объект-описание элемента

А кто знает что именно делает React.createElement? Просто констурирует plain js object?

afaik да, элементы это просто js объект у которых поле тип, пропсы и тд

А кто знает что именно делает React.createElement? Просто констурирует plain js object?

Ну, в этом ведь месте создаётся элемент. Суть HOC-а в том, что он оборачивает в себя ещё один элемент и их становится аж два. Хотя по факту, это должна быть не объектная композиция а простая функциональная.

тогда да, надо запилить компилятор jsx в те самые объекты

Ну, в этом ведь месте создаётся элемент. Суть HOC-а в том, что он оборачивает в себя ещё один элемент и их становится аж два. Хотя по факту, это должна быть не объектная композиция а простая функциональная.

Спорно

В фп для таких кейсов chainRec и он вполне себе объект

Потому что стек не резиновый

Ну, в этом ведь месте создаётся элемент. Суть HOC-а в том, что он оборачивает в себя ещё один элемент и их становится аж два. Хотя по факту, это должна быть не объектная композиция а простая функциональная.

если на выходе объект это не значит что у нас "объектная композиция" (это что за термин вообще)

Потому что стек не резиновый

Оптимизацию хвостовых вызовов вроде обещали.

Оптимизацию хвостовых вызовов вроде обещали.

Кто обещал?

ERROR: S client not available

Оптимизацию хвостовых вызовов вроде обещали.

Не скоро ещё будет, авторам движков не нравятся текущие предложения

Кто обещал?

Хз. Вроде было что-то.

Формально в es6 уже есть оптимизация, но все её вертели

с телефона до этого был Короче Каждый раз когда кто-то пишет export withStuff(Component) он теряет весь смысл разделения компонентов на презентейшнл и контейнеры Теперь навсегда Component привязан к определённой логике / конфигурации (смотря что хок делает). Иногда это оправдано. Чаще — нет. Но так или иначе мы потеряли возмножность "предоставить" функционал там, где он внезапно понадобился представим, что мой мегаполезный hoc withStuff() действительно делает че-то полезное, что может пригодиться очень часто. Пишу-пишу я лейаут типа <div><h1>stuff info</h1></div> и вдруг понимаю, что в заголовке мне было бы так здорово иметь те данные, которые даёт withStuff. Что делать? Создавать новый файл с компонентом, оборачивать его в withStuff, импортить, вставлять в h1 А имея умный компонент, который представляет данные через render prop, у нас получится живая композиция: <div> <h1> stuff info: <WithStuff render={data => <span>{data.info}</span>} /> </h1> </div> это мегаудобно

Понял. Тогда в своей """идеальной""" библиотеке для форм запилю такую возможность.

Понял. Тогда в своей """идеальной""" библиотеке для форм запилю такую возможность.

;) формик без труда это добавил, изначально сделав только хоки

если на выходе объект это не значит что у нас "объектная композиция" (это что за термин вообще)

Ну, объект внутри объекта внутри объекта.

да и вообще из хока сделать компонент с рендер-пропсом легко

Хотя наверное можно придумать какую-нибудь магию для схлопывания этой конструкции в один компонент

recompact

@ZeroBias Бань вадима

recompact

Кстати, вроде бы его когда-то находил

да и вообще из хока сделать компонент с рендер-пропсом легко

я собственно результаты recompose'а так перевоплощаю в удобные компоненты которые можно где угодно "на месте" использовать

Может кто объяснить разницу работы проимисов с await и через then? 1) const response = await fetch(...) const { errors, data } = await response.json(); return { errors, data } 2) fetch(...).then(data=>).errors(...)

вроде никакой - первый вариант разворачивается в тот же промис

Может кто объяснить разницу работы проимисов с await и через then? 1) const response = await fetch(...) const { errors, data } = await response.json(); return { errors, data } 2) fetch(...).then(data=>).errors(...)

в одном случае then, в другом await :)

Дополню вопрос. Почему надо писать await data.json()?

задай вопрос точнее

Дополню вопрос. Почему надо писать await data.json()?

потому что data.json() возвращает промис

потому что data.json() возвращает промис

Хм... А вот это новость. А зачем так сделали?

задай вопрос точнее

Для чего используется первый тогда?

Может кто объяснить разницу работы проимисов с await и через then? 1) const response = await fetch(...) const { errors, data } = await response.json(); return { errors, data } 2) fetch(...).then(data=>).errors(...)

че за .errors кстати oO

Для чего используется первый тогда?

первый это кто?)

Хм... А вот это новость. А зачем так сделали?

ну как есть) спека

первый это кто?)

await

await

синтаксис более удобный по мнению части людей

(иными словами большинства)

(иными словами большинства)

и только?

че за .errors кстати oO

ну я забыл как там после .then )))

по сути да но это не "и только", это даёт способы вообще многое по-другому записать

ну я забыл как там после .then )))

.catch

.catch

о точно спс

по сути да но это не "и только", это даёт способы вообще многое по-другому записать

спс

Всем привет кто сможет помочь по реакту? https://codepen.io/vsevolodkurochka/pen/KXxvbb Работает только первый селект и то не правильно, не могу понять в чем проблема