Дэн Абрамов рассказывает о "будущем" API — Suspense. По ходу презентации он описывает две проблемы:
- проблема производительности устройства пользователя;
- проблема его "коннекта" (скорости и стабильности соединения);
которые позволяет решить новое API.
P.S. Видео под катом, не забудьте включить субтитры.
Пулл-реквест намечающейся фичи.
Разработчики React обещают добавить новое API до конца года, но думаю у них получится сделать это быстрее.
Комментарии (8)
redyuf
11.03.2018 13:25+3Суть примерно такая: в реакт добавили 2 спец компонента: Timeout и Loading.
1. если код оборачиваешь в Timeout, то он во время асинхронной подгрузки любого дочернего — покажет крутилку
2. если какой-нить дочерний тоже обернут в Timeout, то он будет иметь приоритет и верхний Timeout его проигнорирует
3. если код обернуть в Loading, то он вытащит статус загрузки isLoading со всего поддерева дочерних компонент
4. В рендере можно сделать throw new Promise и реакт перехватит исключение, проверит что пришел промис и перерендерит компонент при ресолве промиса. Если к этому прикрутить кэш, то код выглядит как синхронный.
Печально, что это все сильно реакт усложняет. Команде реакта можно было, например, сделать свой аналог mobx-а, запихнуть туда файберы, обработку асинхронности на исключениях и работу со стейтом.
Такое разделение ответственности позволило бы использовать эти фичи в клонах, вроде preact/inferno и других vdom и real dom библиотеках. Даже отдельного пакета можно не выкладывать, держать в проекте, а сейчас это все прибито к react-dom.
Добавив эту функциональность, они вступили на путь из граблей, по которым уже прошел vintage со своими атомами за последние года 2, есть множество проблем такого подхода. Например:
Что делать, если не promise, а observable?
Как сделать в реакте параллельную загрузку, если бросание эксепшена в render приостанавливает выполнение, а за ним может быть еще один асинхронный запрос.
Как делать retry в случае ошибки?
Как автоматизировать инвалидацию кэша, который в демках скорее всего достаточно примитивный, на каком-нибудь simple-cache-provider?
unel
12.03.2018 14:11ЕМНИП, в этом докладе говорилось, что будут предтавлены абстракции разных уровней, как высокого (типа createFetcher, ), так и низкого уровня.
Возможно, что с их помощью можно будет решить и предложенные Вами сценарии =)unel
12.03.2018 14:20типа createFetcher и <Placeholder> я имел в виду
(постоянно забываю, что тут комментарии поддерживают HTML :-))redyuf
12.03.2018 14:55Я пробовал обобщить, исходя из анализа доклада и доступных на текущий момент исходников: react-suspense-demo, бандла react-dom@16.4.0-alpha.0911da3, который собирался видимо из этого pr.
Там пока не видно решений этих проблем. Конечно, что-нибудь придумают, может где-то даже лучше чем в атомах. Просто это путь проб и ошибок, который им придется отчасти повторить за винтажем.
mariner
так о чем фича то? видео не смотрел.
upd: кому интересно и текстом — medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6
vintage
Это аналог $mol_fiber, но в 10 раз большим кодом, ибо реакт :-)