Download to read offline
Uploaded byFwdays
Катерина Лизогубова "React: дорога к просветлению"
Документ обсуждает технологии React и их особенности, включая компоненты, управление состоянием и обновления. В нем также рассматриваются вопросы, связанные с общественными ожиданиями и реальным использованием технологий, такими как Redux. Кроме того, акцентируется внимание на современных подходах к разработке, таким как обработка ошибок и использование контекста.
Катерина Лизогубова "React: дорога к просветлению"
- 1. React: дорога кпросветлению Екатерина Лизогубова, AltexSoft
- 5.
- 6. Есть три видалжи: ложь, наглая ложь и статистика (с) Марк Твен
- 7. 0 1 2 3 4 5 fwdays'14 fwdays'15 a&rdays'15fwdays'16 mostjs'16 fwdays'16 fwdays'17
- 9. 0 1 2 3 4 5 fwdays'14 fwdays'15 a&rdays'15fwdays'16 mostjs'16 fwdays'16 fwdays'17
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. * React.Fragment * Portals *Error Boundaries * Fibers
- 18. “to fall intothe pit of success”
- 19.
- 20. const ThemeContext =React.createContext('light');
- 21. const ThemeContext =React.createContext('light'); class ThemeProvider extends React.Component { state = { theme: 'light’ }; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } }
- 22. const ThemeContext =React.createContext('light’); class ThemeProvider extends React.Component { … } const App = () => ( <ThemeProvider> <ThemeContext.Consumer> {val => <div>{val}</div>} </ThemeContext.Consumer> </ThemeProvider> );
- 23. const ThemeContext =React.createContext('light’); class ThemeProvider extends React.Component { … } const App = () => ( <ThemeProvider> <ThemeContext.Consumer> {val => <div>{val}</div>} </ThemeContext.Consumer> </ThemeProvider> );
- 24.
- 25.
- 26.
- 27.
- 28. const App =() => ( <StrictMode> <Header /> <Content /> </StrictMode> );
- 31.
- 32. const AsyncComponent =React.unstable_AsyncComponent; const App = () => ( <AsyncComponent> <Header /> <Content /> </AsyncComponent> );
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41. You Might NotNeed Redux (с) Dan Abramov
- 42.
- 43.
- 44.
- 45.
- 47.
- 49.
- 50.
- 51.
- 53.
- 56.
- 57.
- 58.
- 59.
- 60.
- 62.
Editor's Notes
- #3 Кто я?
- #4 Все вы конечно знаете, что сейчас у нас три основных лидера в мире фреймворков
- #5 И чтобы узнать какое реальное соотношение сторон, давайте посмотрим на результаты опроса state of js 2017.
- #7 Но как говорится. Есть три вида лжи…. Давайте поговорим о последней
- #8 У меня есть такой график, но без подписей, он напоминает мне вот эту картинку из маленького принца
- #9 Но так как конференция у нас не про питон и даже не про пхп, то давайте добавим подписи к графику
- #10 Это график количества докладов в названии или описании которых упоминалось слово реакт с сайта fwdays за последние 4 года. Согласитесь, интересная тенденция.
- #11 Давайте попробуем немного сжать этот график
- #12 И наложить на него многим знакомую кривую.
- #13 Для тех кто не в курсе – это так называемый цикл хайпа. Технолоигя появляется, черз некоторое время про неее все говорят и всячески ее хайпят, но затем вы находите все больше граблей и послепенно разочаровываетесь в технологии, попадая в ущелье разочарования.
- #14 И сейчас наше место у таймлайна именно здесь. На данном этапе многие бросают технологию, но чаще всего в этот момент все только начинается. Судя по этому графику сейчас нас ожидает очередной стремительный рост реакта, который приведет нас на плато продуктивности.
- #15 Давайте проведем декомпозицию и рассмотрим реакт с трех сторон и начнем с самого главного – самой библиотеки.
- #16 За что мы все любим реакт? За то что он очень простой. Получаем на вход пропсы, добавляем щепотку стейта и получаем виртуал дом.
- #17 Но не менее важной частью является то что реакт, несмотря на свою простоту, способен изменяться и улучшаться. Одним из самых крупных изменение последнего времени, стал реакт 16. Помните ли вы хоть еще одно такое серьезное изменение между версиями реакта?
- #18 И многие из вас наверняка уже в курсе про изменения вреакте 16.0. Там появились …, но сейчас немного не об этом
- #19 Команда реакта на этом не остановилась и в английском языке для этого есть отличная фраза «to fall into the pit of success». Поэтому скоро нам грозят еще интересные изменения и давайте посмотрим на них
- #20 Что нас ждет в ближайшем будущем? Наример, новый context API. Несмотря на то что многие из вас про него уже слышали, я все равно упомяну о том что это и как будет работать
- #21 Теперь существует специальная функция createContext , которая
- #22 Которая предоставляет компонент provider в котороый можно передать актуальный конткест и завернуть все приложение или любой другой
- #24 Кстати обратите внимание, что новый контекс API использует так называемые render props. Не то чтобы это новая штука, но в последнее время все больше людей предпочитают их вместо HOC’ов
- #25 Дальше давайте вспомним уже всем приевшуюся картинку, про которую все спрашивают на каждом собеседовании на реакт разработчика. Это lifecycle реакта. Запоминать много, при этом несколько из них, регулярно забываются. Например поднимите руку те, например, за последний месяц писал componentWillUpdate или componentWillMount
- #26 У меня за полгода текущего проекта – ни разу Реакт команда решили так же и выпилил их.
- #27 Но и на этом реактовцы не остановились. Они собираются выпилить и cWRP. Потому что то что вы обычно пишете в cwrp Если поменялись пропсы, то давайте обновим стейт. А раз так, то появляется getDrivedStateFromProps. Это статический метод, который позволяет вернуть новое состояние, полагаясь на пропсы и стетй.
- #28 Так же появится так называемый StrictMode
- #37 Первое что приходит в голову при упоминании экосистемы это конечно-же redux. Количество загрузок в месяц
- #38 Прирост загрузок. Если посмотреть внимательно, то тут есть несколько резких проседаний.
- #39 Два из них понятны
- #40 Что происходило в апрее 17 года, понятия не имею. Может кто-то из зала потом расскажет И вообще чтобы этот график стал еще более показательным,
- #41 давайте построим сткользящее среднее по трем месяцам. Так мы немного сгладим пики и увидим еще более реальную картину. И если раньше народ выходил праздничных отпусков и продолжал качать редакс, то в этот раз как то не очень выравнивается.
- #42 И это обусловлено многими факторами. Сам ден абрамов неоднократно писал о том что чаще всего редакс вам и не нужен
- #49 Перед вами слайд из презентации дэна абрамова. братите внимание – перед вами функциональный компонент, картинка в котором подгружается постепенно. Раньше нам бы для этого понадобилось состояние. Сейчас же перед нами по сути своей первый функциональный РЕАКТИВНЫЙ компонент. Как это работает?
- #50 А работает это благодаря тому что уже сейчас есть в Реакте + немного клея
- #51 В процессе рендеринга мы смотрим есть ли у нас уже готовые данные. И если их нет – мы выкидываем промис. Да. С помощью throw. С помощью механизма границ ошибок в реакте мы ловим этот промис и можем по его резолву знать. Какой компонент надо обновить и перерисовать Here's how suspending works: - in the render method, read a value from the cache. - if the value is already cached, the render continues like normal - if the value is not already cached, the cache throws a promise - when the promise resolves, React retries where it left off
- #55 Упомянуть evan you про проблемы типизации vue