React Today and Tomorrow I — статус и проблемы

внешний интерфейс JavaScript Программа перевода самородков React.js
React Today and Tomorrow I — статус и проблемы

Обновлено 30 ноября 2018 г., обновлена ​​часть вторая:Реагируйте сегодня и завтра (графика) — часть 2. Вышли первые две части видео с китайскими и английскими субтитрами:【React Conf 2018】Реагируйте сегодня и завтра с китайскими и английскими субтитрами.

React Today and Tomorrow I — статус и проблемы

2018-11-08 4 20 29

Доброе утро. Привет всем и добро пожаловать на конференцию React. Я очень рад быть здесь сегодня. Я очень рад, что могу произнести вступительную речь.

Я Софи Альперт, мой профильsophiebits.com. Я менеджер по разработке основной команды React в Facebook.

2018-11-08 4 20 59

Реагировать сегодня

Реакция, которую вы используете, очень хорошо. Мы добавляем 70% в NPM загрузки. Инструменты RACT DE V достигли 1,25 миллиона установок в расширении инструмента разработчика Chrome.

2018-11-08 4 21 47

Вот список компаний, использующих React. На данный момент список настолько длинный, что трудно сказать, как компании, использующие React, меняются каждый год.

2018-11-08 4 22 08

Давайте посмотрим на другой набор данных, давайте посмотрим наGoogle Тренды, что может отражать трафик веб-поиска. Как видите, объем поиска React увеличивается. Надеюсь, эти данные указывают на то, что все больше людей используют React, а не на то, что React стал более запутанным. (смех)

2018-11-08 4 22 28

Ну, для сравнения, мы сравнили объем поиска для jQuery, и наш объем поиска просто впервые в истории превзошел его.jQuery. (Приветствия и аплодисменты.) Но это также показывает, что нам еще есть куда расти.

2018-11-08 4 23 05

Я задержался на некоторое время, пока писал эту речь. Потому что мне больше любопытно, чем популярнее React. Упс. (Смех) Когда я пошутил. Что ж, я считаю, что React более популярен, чем возобновляемые источники энергии. (смех)

2018-11-08 4 32 14

React также более популярен, чем апельсиновый сок. (Смех) Подумайте о том, насколько распространен апельсиновый сок, ха.

2018-11-08 4 32 32

А React более популярен, чем возобновляемая энергия и апельсиновый сок вместе взятые. Так что я думаю, у нас есть повод для большой гордости.

2018-11-08 4 32 56

Миссия Реакта

Но помимо этих цифр, сегодня я действительно хочу поговорить о миссии React. Что ж, с момента выпуска React в 2013 году наша главная цель и миссия заключались в том, чтобы упростить разработчикам создание отличных пользовательских интерфейсов.

2018-11-08 4 35 26

Поэтому, когда мы хотим добавить новые функции, нам обычно приходится тщательно все обдумывать. Когда мы решаем, добавлять ли новый API, нам нужно учитывать множество вещей. Если добавление нового API позволяет делать то, что раньше было невозможно, если оно может значительно упростить код и библиотеки классов в компонентах, снизить нагрузку и позволить пользователям загружать меньше кода, то новый API ценен. Или, если добавление новых API-интерфейсов может помочь нам с передовыми методами разделения кода, если проще разделить код в вашем приложении на несколько пакетов, мы надеемся, что ваше приложение в конечном итоге будет работать быстрее. Это также то, о чем мы объявили две недели назад, чтобы добавить что-то вродеReact.lazyПричина такого API. Вы могли заметить этот API.

2018-11-08 4 52 47

Но подумайте о миссии React — помочь разработчикам легче создавать отличные пользовательские интерфейсы. У нас есть много способов достичь этой цели. Один из них заключается в том, что мы пытаемся упростить что-то сложное. Если вы смотрели выступление Дэна Абрамова на JS Conf в Исландии, вы можете получить краткий обзор"Suspense", «Приостановка» — это то, что мы используем, чтобы значительно упростить проблемы получения запросов данных, разделения кода и асинхронных зависимостей данных в нашем приложении.

2018-11-08 4 54 19

Еще один способ улучшить React — повысить производительность. Если ваше приложение работает быстрее, ваши пользователи будут использовать его более активно. И наоборот, если ваше приложение медленно реагирует и тормозит, у ваших пользователей точно не будет хорошего опыта. Поэтому мы пытаемся сделать React быстрее, и если React работает быстро из коробки, вы сэкономите много времени, оптимизируя собственный код.

2018-11-08 4 54 56

Недавно Дэн также упомянул об улучшении производительности на конференции JS Conf в Исландии, которую мы называем «Time Slicing». "Time Slicing" гарантирует, что самые важные отрисовки в вашем приложении выполняются в первую очередь, разблокируя основной поток и ускоряя работу вашего приложения.

2018-11-08 4 55 44

Третий способ — использовать инструменты разработчика, которые помогут вам отладить приложение и узнать больше о нем. С самого начала React включал удобные для разработчиков предупреждения, чтобы помочь разработчикам указать на проблемы, если они их не заметили.

2018-11-08 4 56 24

А наше расширение React Dev Tools позволяет вам проверять и отлаживать дерево компонентов. В React 16.5 мы представили метод под названиемProfilerновые особенности. Это второй... (я не знаю, что не так с этим пультом)... Вторая вкладка на картинке - это вкладка профилировщика, и она помогает нам понять, что происходит в вашем приложении, а затем лучше оптимизировать его. .

2018-11-08 4 57 03

Итак, три новые функции: Suspense, Time Slicing и Profiler — это то, над чем мы работали последний год. Мы действительно хотели сказать немного больше об этих трех функциях. Но не об этом я хочу сегодня поговорить. Вы можете подождать до завтра, Эндрю и Брайан расскажут вам об этом завтра утром.

2018-11-08 9 08 56

Какие ямы еще существуют в React?

Теперь я хочу сделать шаг назад и давайте сосредоточимся на некоторых других вопросах. Я хочу спросить, какие ямки сейчас есть в React? Я придумал три вопроса, которые я хотел бы обсудить с вами здесь.

2018-11-08 9 10 04

логическое мультиплексирование

Первая проблема — это проблема повторного использования логики между несколькими компонентами.

2018-11-08 9 10 29

В React мы в основном используем компоненты для создания наших приложений.Есть два основных шаблона компонентов для повторного использования кода:компоненты более высокого порядка(компоненты более высокого порядка) исвойства рендеринга(оформление реквизита).

2018-11-08 9 11 44

Эти два режима отлично подходят для некоторых сценариев, но они также представляют собой огромный недостаток. В более сложных сценариях вы должны абстрагироваться от них и реорганизовать свое приложение. Это приводит к проблеме, которую я называю "адом обертки".

2018-11-08 9 15 54

Что ж, мы часто видим такие деревья компонентов. (крики и смех) И это вложение может затруднить отслеживание потока данных приложения. Было бы неплохо иметь возможность повторно использовать такую ​​логику с отслеживанием состояния без изменения иерархии компонентов, верно?

Мега компоненты

Вторая проблема, о которой я хочу рассказать, это мегакомпонент, его логика загромождена. Давайте взглянем на компонент React с тысячами строк кода, и мы увидим, что логика разбросана по множеству различных функций жизненного цикла, которые может быть очень сложно отслеживать.

2018-11-08 9 19 58

Давайте посмотрим на пример. Вот компонент класса, в егоcomponentDidMountметод, который делает несколько вещей: подписывается на хранилище данных, затем отправляет сетевой запрос и, наконец, запускает таймер.

2018-11-08 9 20 50

Ну, если мы посмотрим наcomponentWillUnmountметод, мы увидим в основном прямо противоположный код: сначала нужно отписаться от магазина, затем отменить сетевой запрос и, наконец, остановить таймер.

когда мы хотим достичьcomponentDidUpdateметод, логика внутри будет более сложной. Потому что вам нужно сравнить старые и новые свойства, а затем снова повторить ту же логику задачи внутри других функций жизненного цикла.

Что ж, в этом примере на запрос приходится только одна строка, так что этот пример на самом деле намного проще, чем компоненты, которые вы обычно видите. В реальных компонентах логика имеет тенденцию быть более сложной, поскольку каждая отдельная задача распределена по В разных функциях жизненного цикла это может вызвать трудности, например, при размонтировании компонентов вы можете забыть очистить ресурсы, из-за чего очень сложно найти проблему по коду.

Запутанный класс

Третья яма — Класс. Понимание классов в JavaScript может быть сложным, и чтобы иметь возможность использовать состояние и жизненные циклы, мы просим вас использовать для этого компоненты класса.

2018-11-08 9 22 30

Если вы когда-либо использовали функциональный компонент и превратили его в компонент класса и добавили некоторое состояние, вы знаете, что этот процесс требует большого количества шаблонов, но его роль заключается только в определении компонента класса. Большинство новичков, а также многие опытные разработчики жаловались нам на то, что привязки и преобразования внутри классов довольно запутаны. Мы должны обратить внимание на этот вопрос.

И мы часто слышим, что люди не очень понимают, когда использовать функциональные компоненты, отчасти потому, что они всегда беспокоятся о том, что рано или поздно им нужно будет преобразовать этот компонент в компонент класса. Так что у вас может быть такое замешательство: я не знаю, должен ли я делать это сейчас.

Поэтому я сказал, что классы сложны для людей, но не только для людей, я думаю, что классы одинаково сложны для машин.

2018-11-08 9 23 52

Если вы посмотрите на сжатый файл компонента, вы увидите, что все имена методов не сжаты. И если у вас есть метод, который вообще не используется, он также не отбраковывается. Это связано с тем, что трудно точно сказать, используется ли метод во время компиляции.

Мы также обнаружили, что классы затрудняют надежную горячую перезагрузку. Наконец, когда мы разработали прототип оптимизирующего компилятора для повышения производительности компонентов React, мы обнаружили, что некоторые шаблоны компонентов класса усложняют оптимизацию компилятора.

Суммировать

Итак, у нас теперь есть три проблемы: повторное использование логики, огромные компоненты и классы. Проблема повторного использования логики может привести к тому, что вы часто будете сталкиваться с «упаковочным адом». Причина громоздких компонентов заключается в том, что логика распределена по разным жизненным циклам. А запутанные классы — проблема как для людей, так и для машин.

2018-11-08 9 22 30

Мы думаем, что у нас есть решение, которое решает три вышеупомянутые проблемы. Мы особенно хотим поделиться этой программой с вами. Позвольте мне попросить Дэна Абрамова привести нам следующий доклад.

портал

Студенты, которые хотят посмотреть видео этой статьи, могут проверить эту мою статью:React Conf 2018 Feature — React Today and Tomorrow, ЧАСТЬ I, видео с китайскими и английскими субтитрами, китайские и английские двуязычные субтитры были подготовлены для всех. Наш демонстрационный мальчик -Dan AbramovПереводятся следующие замечательные выступления на React Hooks. Заинтересованные студенты могут связаться со мной, чтобы перевести вместе, чтобы больше друзей могли увидеть замечательный контент React Conf 2018 раньше.

Категории