Примечание переводчика: этот перевод представляет собой перевод исходного текста, основанный на полуторачасовой прямой трансляции «Онлайн-диалога с разработчиками ядра React.js». Он включает в себя весь контент вопросов и ответов в прямой трансляции и максимально сохраняет центральную семантику ответа Дэна Выражение Чтобы сделать предложения ясными и легкими для понимания, вместо них уместно использовать идиомы или фразы. В статье более 1,5 слов, много профессиональных концепций и вдохновляющих идей, на прочтение уходит около 30 минут. Рекомендуется сначала сохранить его и читать медленно. Наконец, я желаю вам всем удачи!
Стук по доске
Сосредоточьтесь на своем сердце.
- Об управлении состоянием
💡 Действительно важный вопрос заключается не в том, какую библиотеку управления состоянием выбрать, а в понимании того, с каким типом состояния вы имеете дело.
💡 React может быть не похож на библиотеку, вы можете думать о нем как о языке программирования для пользовательского интерфейса, компонент соответствует функциям в языке программирования, а хуки соответствуют переменным.
- О сложности старта
💡 С некоторыми фреймворками пользовательского интерфейса вы начинаете с изменения шаблона HTML и постепенно учитесь программировать. С React вы начинаете с языка программирования. У React действительно крутая кривая обучения, если вы не знаете, как программировать.
💡 Фреймворки, такие как Next.js, — хорошее место для начала.
- О парадигмах программирования
💡 Очень важно понимать парадигму «UI — это расчет».
💡 Для React я предпочитаю концепцию «функционально-облегченного/функционально-легкого программирования».
- О свойствах
💡 Некоторые проблемы, которые относятся к разным областям и имеют разные решения в глазах других библиотек, связаны друг с другом в глазах React, и они будут решаться более теоретически и систематически, что делает React по своей сути превосходящим сторонние библиотеки. и другие решения.
💡 Первоначально запланированный параллельный режим больше не существует, но эти небольшие идеи, лежащие в его основе, привносят в React множество функций, по сути предоставляя React возможность делать рендеринг «асинхронным», а в мире есть много вещей, которые рождаются асинхронными. .
💡 В большинстве сценариев мы ожидаем, что пользователи будут использовать функциональность серверного компонента через такие фреймворки, как Next.js.
💡 В большинстве случаев следует использовать фреймворк. Фреймворки — это инфраструктура для всего проекта, соединяющая и организующая для вас различные части проекта.
- О Vue
💡 Vue постоянно исследует, что мы можем сделать с изменчивостью, а React постоянно изучает, что может сделать неизменность.
💡 Мы очень уверены в своем направлении, поскольку у нас за плечами почти 50 лет исследований в области функционального программирования.
💡 Vue отдает приоритет некоторым наиболее востребованным функциям. React может быть более осторожным, мы хотим убедиться, что каждое решение, предоставляемое React, является полностью надежным и заслуживающим доверия, и вы сможете реализовать только некоторые сторонние библиотеки, прежде чем мы решим выпустить определенные функции.
💡 Vue и React, как на Android и iOS.
- О конкурентоспособности
💡 Мне не очень нравится термин Virtual DOM. Мы стараемся не использовать это слово, потому что у всех разное его понимание. Виртуальный DOM не имеет ничего общего с производительностью, он существует только для того, чтобы сделать возможными некоторые функции.
💡 Некоторые тесты могут отображать разницу в производительности только в 2% в реальных сценариях, мы собираемся поддерживать больший масштаб пользовательского кода вместо того, чтобы пытаться выиграть соревнования по тестированию, они не стоят нашего времени и усилий.
💡 Мы стремимся начать с общей картины, использовать более общий способ решения тех проблем, которые трудно решить из одной точки, и упростить их реализацию — думаю, в этом источник конкурентоспособности React.
💡 Даже если у React не будет новых функций в ближайшие пять лет, способ описания пользовательского интерфейса React все равно не устарел.
- О раме
💡 SSR, CSR, NSR, ESR, эти задачи должен делать фреймворк, я все же рекомендую вам использовать фреймворк, например Next.js хороший выбор, фреймворк поможет вам получить эти части, так что вам нужно только используйте ту же парадигму для написания кода.
💡 React сам по себе не фреймворк, а просто библиотека, потому что он не ограничивает то, как вы работаете, не ограничивает структуру вашего проекта. React — это просто способ создания пользовательского интерфейса, а фреймворки могут строиться на его основе.
- О техническом обслуживании
💡 Другие фреймворки часто не могут этого сделать, им нужно сначала выпустить версию, а потом может пройти год, прежде чем кто-то найдет в ней ошибку и сообщит о ней.
💡 В компании размером с Facebook даже ухудшение показателей на 1% может затронуть миллионы людей. Так что, если есть большая проблема, ее будет легче найти.
- о росте
💡 Не говорите, что «внешний интерфейс постоянно меняется» только потому, что вы не знаете всей картины внешнего интерфейса. Я не думаю, что это так.
💡 Нет необходимости читать исходный код React.
Say Hi
Модератор: Привет, Дэн, заходи поздороваться с друзьями, которые смотрят прямую трансляцию!
Дэн: Всем привет!
Модератор: Большинство людей на сцене уже знают вас, можете представиться?
Дэн: Спасибо, меня зовут Дэн, я один из основных сопровождающих React, и последние 5 лет я работаю в команде React. Это в значительной степени мое самопредставление.
Начал программировать в 12 лет
Модератор: Я прочитал в вашем блоге, что вы занимаетесь программированием с 12 лет, это удивительно, как вы заинтересовались программированием?
Дэн: Надо сказать, что это совпадение, я на самом деле не проявлял инициативы в изучении программирования. В то время, когда я делал домашнее задание в школе, мне нравилось проводить презентации. Не знаю, используете ли вы сейчас PPT.PowerPoint 2003, язык программирования, встроенный в PPT. Если щелкнуть правой кнопкой мыши, чтобы открыть меню, можно выполнить некоторые операции записи макросов. Эти операции будут генерировать множество небольших программ, я сначала не знал, что это такое, но мне было очень интересно, а потом я купил несколько книг и начал изучать программирование.
Инструмент управления состоянием React
Модератор: Это ваша первая встреча с китайским инженером. Мы подготовили здесь много вопросов. Готовы ли вы ответить на вопросы восторженных пользователей сети?
Дэн: Я готов.
Модератор: Что вы думаете об инструментах управления состоянием React?
Дэн: Я думаю, что разные люди могут использовать разные библиотеки, и если бы я рекомендовал, я бы, вероятно, не рекомендовал какую-то конкретную библиотеку. Действительно важный вопрос заключается не в том, какую библиотеку управления состоянием выбрать, а в понимании типа "состояния" и понимании "условие"Что это такое. потому что"условие" - это относительно общее и относительно большое понятие. Я думаю, что мы должны не обсуждать, какая библиотека лучше на поверхности, а посмотреть, с каким состоянием вы хотите иметь дело, и какова цель использования этих библиотек. В чем разница между выбором различных вариантов. Например, некоторые состояния пользовательского интерфейса нацелены на отображаемые компоненты пользовательского интерфейса. Для поля ввода текста, что такое текстовое содержимое, выбран ли текст и находится ли он вfocus / hoverСтатус или запись выбрана текущая страницаTabИ так далее, это состояния пользовательского интерфейса. Другое состояние больше похоже наcache, кеширует возвращаемые с сервера данные, это наверное больше похоже на какой-то черновик. Следовательно, нам нужно выбрать инструмент управления состоянием, исходя из реальных потребностей. Для состояния пользовательского интерфейса я лично не рекомендую использовать какую-либо библиотеку, просто используйте состояние, которое поставляется с React. Вы можете использовать React State или React Context для передачи состояния вниз по дереву компонентов. Для сценариев кэширования данных я не рекомендую решения, связанные с «управлением состоянием» (где Дэн использует цитату ✌️✌️). Я бы порекомендовал вам использовать какую-нибудь библиотеку, предназначенную для обработки кэширования данных, напримерReact Query,Apolloа такжеReact Relay.
Модератор: теперь многие хотят использовать React Hooks и Context вместо этогоRedux, в вашем предыдущем ответе также упоминался аналогичный момент, можете ли вы поделиться некоторыми философиями дизайна, лежащими в основе React Hooks?
Дэн: СейчасReact HooksМожно использовать только для функциональных компонентов, и мы не планируем делать их совместимыми с классовыми компонентами, потому что это две разные парадигмы и путать их не имеет смысла.
Я думаю, что это больше вопрос о философии дизайна Hooks, и я не знаю, как на него ответить. В целом, хуки в некоторой степени отражают наше представление о компонентах React. Концептуально компонент — это функция, которая принимает некоторые реквизиты и возвращает пользовательский интерфейс. Хуки — это расширение этой функции. В дереве компонентов есть место для состояния. Вы можете использовать хуки для записи состояния или поведения и т. д. Это общая идея. Продолжая эту мысль, React может быть не библиотекой, вы можете думать о нем как о языке программирования для пользовательского интерфейса. В языках программирования у нас есть такие понятия, как функции, переменные. Если вы думаете о React как о «псевдо» языке программирования, Компоненты соответствуют функциям в языке программирования, а Хуки соответствуют переменным. Это моя собственная идея, я не знаю, смогут ли ее понять другие студенты.
Быстро начать работу с React
Модератор: Многие разработчики считают, что начать работу с React очень сложно, так есть ли способ для новичков быстро начать работу?
Дэн: Я думаю, это зависит от того, почему людям трудно начать, и у всех могут быть разные проблемы. Одним из них является то, что React требует от вас базовых знаний программирования на JavaScript. Это действительно сложно, если вы новичок в программировании, потому что это не веб-сайт, созданный с использованием HTML и шаблонов. Для некоторых библиотек и фреймворков вы начинаете с шаблона, добавляете в шаблон некоторые условные суждения или циклы и, постоянно возясь, постепенно учитесь программировать. Но здесь, в React, вы начинаете с языка программирования и пишете код, как только появляется. У React более крутая кривая обучения, если вы не знаете, как программировать. Некоторые люди считают, что трудно начать работу с React, когда они плохо знакомы с ним.После изучения JavaScript некоторое время будет не так сложно вернуться, чтобы увидеть React.Это порог, установленный JavaScript. С другой стороны, я думаю, что важно иметь хорошую среду разработки. НапримерNext.jsилиcreate-react-appЭтот тип инструмента поможет вам подготовить конфигурацию, необходимую для разработки проекта. Иногда людям трудно начать работу просто потому, что они не понимают, как создать одностраничное приложение (SPA). Это не проблемы React, но люди склонны винить в них React. если вы положитеNext.jsВ качестве отправной точки для проекта, я думаю, это было бы хорошим началом.
React избегает ям
Модератор: Следующий вопрос. Для тех, кто начал использовать React, можете ли вы дать несколько советов, которые помогут избежать некоторых подводных камней?
Дэн: Важно отметить, что если вы используете React Hooks, вы обычно используете сопутствующие правила lint. У нас есть два рекомендуемых правила для хуков, которые можно интегрировать в ваш проект с помощью плагинов. Кроме того, я считаю важным понимать две концепции React. Один из них — неизменность, вам нужно знать, как обновить состояние, не изменяя его. Вы можете сделать это с помощью оператора распространения (...) или другого синтаксиса. Здесь можно порекомендовать отличную библиотеку — immer, которая позволяет вам использовать операции изменения стиля Vue/Svelte в вашем программировании, но в то же время поддерживать неизменность. Если вас это беспокоит, попробуйте. Еще один момент — нужно понимать, что процесс рендеринга React должен быть чистым (рендеринг должен быть чистым), когда компонент рендерится, он просчитывает, как должен выглядеть следующий UI, не стоит смешивать его в процесс рендеринга Разные прочие операции. Я думаю, важно понимать парадигму, согласно которой пользовательский интерфейс — это расчет.
функциональное программирование
Модератор: React все больше и больше приближается к функциональному программированию, но некоторые люди говорят, что JavaScript — это не тот язык, который фокусируется на функциональном программировании Как вы видите это противоречие?
Дэн: Возможно, React более функционален, чем другие библиотеки пользовательского интерфейса, но я не думаю, что это фреймворк, ориентированный на функциональное программирование. На самом деле существует консенсус в отношении того, что все люди, которым нравится функциональное программирование, не считают React функциональным, потому что он не «чистый» или по какой-то другой причине. Для React я предпочитаю "functional-lite / functional-light programming"Концепция. Очень важная идея, которую React заимствует из функционального программирования, заключается в том, чтобы разлагать сложные вещи на несколько компонуемых функций, например максимально использовать неизменяемость. Но код React не похож на традиционный код функционального программирования, потому что React имеет тенденцию использовать более прямой стиль кодирования. Например, если вам нужен цикл, вы можете написать его прямо в коде, не записывая функции более высокого порядка и не комбинируя их сложным образом. Вы пишете React так же, как пишете JavaScript, поэтому код не выглядит «функциональным», как Ramda или Lodash FP. Так что React должен быть своего рода золотой серединой. Он не только объединяет идеи и концепции функционального программирования, но и позволяет вам использовать основные методы программирования JavaScript для кодирования большую часть времени Я думаю, что это не должно быть противоречием.
Front-end разработка слишком быстрая?
Модератор: Нынешний фронтенд — это бурно развивающаяся область, как вы постоянно совершенствуетесь и следите за темпами технического прогресса?
Дэн: Интересный вопрос, на самом деле я не думаю, что фронтенд-разработка идет так быстро. Я не видел слишком много нового за эти годы, может быть, я не смотрел достаточно внимательно. Но большинство результатов, которые я вижу, — это итерации и уточнения существующих функций. Некоторые вещи получают новую версию каждый год или два, но по большей части, будь то новый выпуск или новая библиотека, используются одни и те же идеи. Итак, если вы достаточно знакомы с тем, что уже есть, и достаточно хорошо понимаете это, вы, вероятно, не будете новичком в том, что новое, потому что они в некотором роде однородны. Поэтому я думаю, что лучший способ подготовиться к чему-то новому — это ознакомиться с тем, что у вас уже есть, а когда вы достаточно знакомы, вы можете видеть только сходство.
Модератор: Какова будущая тенденция развития React?
Дэн: Это большой вопрос, как дорожная карта на следующие десять лет, и многие функции, которые мы делаем прямо сейчас, на самом деле связаны с этим.
Главная проблема
Модератор: Итак, каковы наиболее важные вопросы в настоящее время?
Дэн: Это интересно, на самом деле мы сталкиваемся с множеством разных проблем, и разные команды решают их по-разному. Я могу привести несколько примеров, таких как выборка данных. Как спроектировать схему сбора данных с хорошей масштабируемостью, чтобы количество компонентов не вызывало запроса на Waterfall, чтобы обеспечить согласованность пользовательского интерфейса. Вы можете написать логику ближе к тому месту, где она вызывается, чтобы данные и код могли загружаться параллельно. Извлечение данных — довольно сложная проблема, и вам также необходимо подумать о том, как сделать ее более удобной для пользователей.В настоящее время получение данных на самом деле довольно раздражает. Это большая проблема, которую нужно решить на данный момент.Еще большая тема - различные оптимизации, про разделение кода, рендеринг на стороне сервера (Server Side Rendering), как убрать лишнее из JavaScript-упаковки Выход, как сделать Hydration меньше дорого и т.д. Это может показаться совершенно другой областью, но есть много общего, и с помощью этих оптимизаций мы можем сделать React изначально превосходящим сторонние библиотеки и другие решения. Еще одна большая тема — анимация, но мы еще не начали работу в этом направлении. Но для всех вышеперечисленных направлений мы попробуем разные решения из прошлого. Многие фреймворки или библиотеки пользовательского интерфейса, как правило, решают отдельные проблемы независимо друг от друга, предоставляют разные решения для одной проблемы и обеспечивают лучший опыт разработки, предоставляя некоторые удобные API. Но мы видим, по нашему мнению, что некоторые вопросы взаимосвязаны. Мы постараемся связать связанные проблемы более теоретически и систематически, а затем решить их. Поэтому, если я хочу поговорить о будущем React, я хочу, чтобы это был инструмент, инструмент, помогающий мне писать компоненты, который интегрирует выборку данных, разделение кода, рендеринг анимации и т. д. Все функции, и эти функции бесшовные. объединены вместе. Поскольку центральная идея React состоит в том, чтобы собрать вместе элементы функциональности, такие как Lego, мы надеемся поддерживать эти функции в будущем.
Concurrent Mode
Модератор: Некоторые друзья спрашивали о параллельном режиме. Параллельный режим React был предложен с версии 16, но, наконец, он был выпущен в React 18. С какими проблемами и сложностями столкнулась команда React при разработке этой функции и каковы ваши планы на будущее?
Дэн: Хорошо, позвольте мне начать с того, что React 18 еще официально не выпущен, мы выпускаем только альфа-версию для сопровождающих библиотеки. Если вы посетите reactjs.org/blog, вы увидите статью под названием «План для React 18». Если друзья хотят узнать о новых функциях React 18 или плане времени выпуска, вы можете взглянуть. Мы также создали рабочую группу и пригласили около 50 разработчиков из сообщества, чтобы помочь нам с некоторыми работами, связанными с выпуском React 18, например, обеспечить совместимость библиотек в экосистеме React с новой версией. Соответствующая информация находится в обсуждении GitHub, Хотя не члены группы не могут комментировать, они могут ее прочитать. Вы можете найти много информации о релизах, включая параллельный режим, о котором вы спрашивали.
Как вы сказали, мы объявили, что собираемся быть настоящим конкурентным режимом много лет назад, но в этот период произошло большое изменение в стратегии, то есть он больше не представлен как отдельный режим (mode). Так что в итоге мы добавили в React не параллельный режим, а механизм параллельного рендеринга. По сути, параллелизм означает, что React может обновлять несколько состояний одновременно. Например, при обновлении состояния некоторые обновления состояния для получения данных будут занимать много времени, а временные затраты на отрисовку сложной страницы будут очень высокими. React не будет блокировать браузер в этих сценариях, если используется параллельный рендеринг. Это означает, что пока страница выполняет долгосрочные обновления статуса, вы по-прежнему можете вводить текст, а обновление статуса в фоновом режиме не будет блокировать ваше взаимодействие. По сути, вы можете думать о параллельном рендеринге как о работе в фоновом режиме.setState(). Это действительно то, что мы всегда хотели реализовать в React, но важно то, что это больше не отдельный шаблон. Когда вам нужно использовать возможности параллелизма, мы предоставляем функцию Transition, которую вы можете обернуть с помощью Transition.setState()чтобы React отображался одновременно при вызове API. Таким образом, это будет функция, которую можно будет вызывать в любое время в будущем, а не глобальный шаблон для веб-приложения, который действует только для операций, которые вы оборачиваете.
Что касается проблем, то у нас действительно было немало проблем. Поскольку мы начали с теории, у нас появилось много теоретических идей, например, мы думаем, что «параллелизм — это хорошо», «блокировка браузера на долгое время неразумна», «рендеринг должен быть прерываемым» и т. д. Затем мы начали развивать эти идеи, завершили прототип в 2015 году, а затем переписали React, чтобы реализовать эти идеи, то есть React 16. После этого мы потратили несколько лет на размышления о том, как мы могли бы внедрить эти возможности в производство. Новый веб-сайт Facebook facebook.com использует функции параллелизма React. такие как "рендеринг должен быть прерываемым", "setState()Это должно быть параллельным» и «рендеринг должен выполняться в фоновом режиме» на самом деле имели много последствий, и нам потребовалось некоторое время, чтобы понять. Эти функции приводят к лучшему серверному рендерингу, лучшему разделению кода и лучшей выборке данных, и мы будем использовать ту же идею в будущем. Улучшение анимации. Эта идея отражена во многих местах, потому что она, по сути, предоставляет React возможность сделать рендеринг «асинхронным», мир, в котором многие вещи по своей сути асинхронны, например те, которые я упомянул выше. Нам потребовалось много времени, чтобы разобраться с этими функциями и выяснить, как заставить их работать вместе. Но в основном мы закончили, и эти функции будут интегрированы в React 18. Итак, еще раз, я рекомендую заинтересованным друзьям зайти в блог официального сайта React, чтобы проверить план выпуска React 18, и щелкнуть соответствующую область обсуждения, чтобы просмотреть соответствующие подробности.
Испытайте альфа-версию React 18
Модератор: Итак, теперь слушатели могут использовать React 18 Alpha, чтобы испытать связанные функции, верно?
Дэн: Да, но есть две вещи, на которые стоит обратить внимание. Один из них — зайти в блог и посмотреть инструкции для новой версии. Например, после обновления проекта может потребоватьсяReactDom.render()метод заменен наReactDom.createRoot()методы и т. д. Будут появляться новые API, и если вы не сделаете замену, программа может выдать предупреждение, но именно так вы начнете использовать новые функции. Другой моментstrict modeпользователи должны обратить внимание, новая версияstrict modeОн будет более строгим, а значит, оригинальные вещи в новой версии могут сломаться. Поэтому, если ваша программа вообще не запускается в новой версии React, вы можете попробовать ее удалить.strict mode, что может быть причиной. Еще одна вещь, о которой следует помнить, это то, что альфа-версия React — это в основном версия для разработчиков библиотек, и есть много библиотек, таких как Redux и т. д., которые не были обновлены для поддержки самих себя. Поэтому, если ваш проект зависит от множества сторонних библиотек, ваш проект, скорее всего, рухнет после обновления React 18, но цель этого выпуска — дать авторам библиотек достаточно времени для обновления. Так что не расстраивайтесь, если обнаружите, что ваш проект вообще не работает в новой версии React, особенно у тех пользователей, у которых произошел сбой их программ из-за внедрения сторонних библиотек. выпущена, большинство популярных библиотек уже должны быть доступны.Исправлены ошибки и совместимость.
React Lane
Модератор: Не могли бы вы вкратце описать, как проектировался React Lane?
Дэн: Это довольно технический вопрос. На самом деле мы не хотим, чтобы люди знали, что существует React Lane, потому что это не общедоступный API, а то, что включает внутреннюю реализацию React. Но я могу кратко объяснить, что это такое. Как я уже сказал выше, мы добавили в React параллелизм, а это означает, что в любой момент времени может быть несколько синхронизированных обновлений состояния. Параллелизм особенно важен для нашей функции перехода. Например, если вы вводите в поле ввода, а страница обновляется после нажатия Enter, это обычная операция обновления страницы. Но если вы хотите использовать автозаполнение по мере ввода или хотите получить список кандидатов из сети, вам необходимо подключиться к серверной части.useEffectУправляйте этими процессами асинхронного рендеринга самостоятельно. Но теперь этот процесс будет встроен в React, и вы сможете использовать синхронный код для обработки асинхронных операций с данными. Я всегда думал о пользовательском интерфейсе как о состоянии во времени или моменте времени, поэтому, чтобы выразить это, вы должны создать переход для результата списка, поэтому запрос браузера может занять некоторое время, но когда данные вернутся React позаботится о правильном отображении результатов.
Дорожки — это внутренний механизм React, помечающий, какие обновления состояния React обрабатывает в данный момент. Вы можете себе представить, когда вы звонитеsetState()Когда это произойдет, React добавит его к битовой маске, подобно многим переключателям или флажкам. Что-то вроде списка задач, если вы когда-либо использовали список задач, вы знаете, что задачи имеют высокий приоритет и низкий приоритет. Или Label на Github, Label можно использовать для обозначения высокого приоритета, а также для отметки ошибок, функций и обсуждений. то же самое дляsetState()Например, React также предоставляет набор тегов, чтобы отметить, является ли это переходом, является ли это срочным обновлением и т. д. Этот тег — Lane. Когда React выполняет рендеринг, выбор того, какие обновления состояния необходимо выполнить, зависит от дорожки. При наличии срочного обновления состояния, требующего срочного повторного рендеринга страницы, будет выполнено только обновление состояния в разделе «Срочный переулок». Позже, если все срочные операции обновления выполнены, я иду проверять обновление статуса в Transition Lane, и если в это время данные возвращаются из сети, я их визуализирую, например, для загрузки списка кандидатов автодополнения. Итак, Lane — это внутренний механизм React, который использует битовые маски для связывания обновлений состояния с приоритетами, а React затем обновляет состояние в соответствии с ним.
React Server Component
Модератор: В конце прошлого года был выпущен RFC-проект серверного компонента Какова основная цель серверного компонента?
Дэн: Да, мы выпустили предварительную техническую версию серверного компонента в декабре прошлого года, но это еще относительно рано. Это следует считать функцией, которая все еще находится на стадии исследования, более экспериментальной, чем React 18, и не будет включена в функцию React 18 и может быть выпущена после нее. Но, вообще говоря, это не то же самое, что SSR, что также часто вызывает путаницу. Самая большая разница в том, что серверный компонент работает только на сервере, он не загружается. Вы можете думать о них как о своего рода API. В прошлом клиентское приложение могло запрашивать JSON API для получения данных. Серверный компонент аналогичен, но API заменен компонентом, который работает на стороне сервера. Преимущество этого заключается в том, что вам не нужно загружать какой-либо код, и вы можете добиться оптимизации производительности. Еще одно преимущество заключается в том, что, поскольку эти компоненты работают на стороне сервера, они могут напрямую взаимодействовать с базами данных, микросервисами или любыми другими ресурсами на этом сервере. Вам не нужно предоставлять эти ресурсы клиенту, просто оставьте их на сервере.
Модератор: Некоторые пользователи уже пробовали использовать серверный компонент, поэтому, когда нам нужно использовать серверный компонент в проекте, нам нужно поддерживать три компонента вместо одного, что создает дополнительную сложность, не так ли?
Дэн: Хорошо, лично я не совсем согласен с этим утверждением по этому вопросу. Я не хочу определять проблему, поскольку нам нужно поддерживать три компонента вместо одного. Я думаю, правильнее будет сказать, что в традиционном React у нас есть только один тип компонента; в серверном компоненте мы делим их на серверный компонент, клиентский компонент и общий компонент. Эта проблема как будто у вас изначально был только мобильный телефон, а теперь у вас есть мобильный телефон, часы и телевизор, но это не значит, что вы должны использовать все три вещи одновременно, у вас просто больше возможностей . Так что в этом вопросе дело не в том, что ваши компоненты будут существовать в трех формах в будущем, а в том, что сейчас вы можете использовать только компоненты клиентских компонентов. Замечательно, если только клиентский компонент может удовлетворить ваши потребности, но когда будет реализована функция серверного компонента, у вас будет больше возможностей делать то же самое. На этом этапе, если вы хотите вести блог с помощью React и хотите читать файловую систему, вам не нужно для этого много сложных фреймворков. Если вы просто хотите использовать традиционный стиль веб-программирования, такой как PHP или Rails, для выполнения некоторых операций чтения базы данных, серверный компонент также может сделать это за вас. В большинстве сценариев мы ожидаем, что пользователи будут использовать функциональные возможности серверного компонента через инфраструктуру, например, используяNext.js. Так что, если вам повезет, вам не нужно слишком много думать или создавать какой-либо API, вам просто нужно добавить .server.js к имени файла, этот файл может быть запущен на стороне сервера, и вы можете использовать все серверные Функция компонента.
Модератор: Значит, мы можем использовать эту функцию напрямую через какой-то фреймворк?
Дэн: Да, я думаю, что так и должно быть в большинстве случаев. Потому что фреймворк похож на инфраструктуру всего проекта, соединяющую и организующую для вас различные части проекта. Хотя вы также можете настроить его вручную, это определенно не так удобно, как использование фреймворка. В частности, фреймворк также может включать эти функции без настройки, и если вы хотите сделать это самостоятельно, вам придется самостоятельно подключать различные части проекта. В настоящее время у нас нет рекомендаций по использованию серверного компонента, но, учитываяNext.jsСерверный компонент уже поддерживается.Если вы хотите развернуть свой собственный серверный компонент, вы можете пойти и посмотреть, как они реализованы, и скопировать их практики. Или вы можете напрямую использоватьNext.jsили другие подобные рамки.
Реагировать и Вью
Модератор: Люди часто сравнивают React с Vue. Как вы лично сравниваете их? Надеюсь поговорить о дизайне, производительности и целях использования.
Дэн: Прежде всего, я лично не использовал Vue, поэтому, возможно, я не смогу провести особенно подробное сравнение. С технической точки зрения они могут быть реализованы по-разному. Vue построен на изменчивости и может напрямую изменять состояние. Это приносит некоторые преимущества, его проще писать, можно писать код в мутативном стиле, который тоже любим многими разработчиками. Но у него также есть некоторые недостатки, например, на более высоком уровне некоторые функции могут быть заведомо трудными для реализации или вообще невозможными для реализации. Например, функция перехода, которую мы делаем, или новая функция анимации, которую мы хотим сделать. Разница между ними слишком велика, как будто они разделены глубоким техническим разрывом, Vue постоянно исследует, что мы можем сделать с изменчивостью, а React постоянно исследует, что может сделать неизменность. Но мы очень уверены в своем направлении, потому что у нас за плечами почти 50 лет результатов исследований функционального программирования, поэтому мы понимаем, что хотя мы можем столкнуться с некоторыми трудностями в реализации, с точки зрения теоретического анализа наш метод разумен. Vue и React просто исследуют два разных направления, и это нормально, вы просто выбираете то, что вам нравится. Когда дело доходит до дизайна, я думаю, что самая большая разница между ними заключается в том, что Vue более склонен идти на какие-то компромиссы и компромиссы, и уделяет больше внимания тому, может ли он решить практические проблемы. Например, он предоставит некоторые востребованные функции, в том числе более удобные анимации, более удобный условный рендеринг, шаблоны компонентов и многое другое. Но React может быть другим, и мы хотим убедиться, что каждое решение, предоставляемое React, полностью надежное и заслуживающее доверия. Поэтому к некоторым функциям, которые существуют только для удобства, мы относимся довольно неадекватно и скорее не будем их реализовывать. Например, если React хочет переделать функцию анимации, функция, которую мы наконец доставим пользователю, должна быть в несколько раз быстрее, чем существующее решение. Мы не собираемся стандартизировать часть существующих решений, потому что у нас есть свое представление о том, как реализовать анимацию, которая будет глубоко интегрирована с библиотекой React, и она будет отличаться от всех фреймворков, которые мы видим сейчас. Итак, во Vue вы можете получить нужные функции быстрее, а в React вы можете не найти нужных функций, и вы можете полагаться только на сторонние библиотеки для их реализации, пока мы не придумаем, как решить проблему. , зная, как правильно реализовать этот функционал, мы интегрируем его в React. Это немного похоже на разницу в философии дизайна между Android и iOS. По сравнению с Android, в iOS часто не хватает некоторых функций, например, первые несколько версий iOS не имели даже функции копирования и вставки, пока не появился центр уведомлений, не было функции копирования и вставки. Возможности iOS действительно могут немного отставать, но когда она решает что-то сделать, она очень хорошо это реализует, и я думаю, что это то, над чем мы работаем. Я думаю, что оба подхода имеют свои плюсы и минусы.
Поток и TypeScript
Модератор: Vue 3 больше не использует Flow, а React все еще использует его, что вы об этом думаете?
Дэн: Я не думаю, что это важно. Это больше зависит от того, как написана сама библиотека, нам все равно нужно сделать некоторую статическую проверку типов. Однако это не имеет никакого отношения к типу использования React пользователями, а только к разработке самой библиотеки React. Мы используем Flow только потому, что мы использовали его в первую очередь, и он также служит нашим последующим потребностям. Мы могли бы также использовать Typescript, но я не думаю, что это критично. Это никак не влияет на пользователей React, потому что наши внутренние типы отличаются от открытых типов. Так что этот вопрос не очень важен, нам все равно. Мы, конечно, могли бы перейти на Typescript, но стоимость перехода высока, и оно того не стоит.
Конкурентоспособность React
Модератор: В последнее время некоторые новые интерфейсные фреймворки, такие как Svelte и Solid-js, больше не используют Virtual-DOM и утверждают, что превосходят React с точки зрения производительности и размера пакета Что вы думаете об этом?
Дэн: Опять же, я не испытал эти рамки в глубине, так что я не очень хорошо делать суждение. Но опять же, всегда кажется, что-то новое выходит, но это не так. Там не много дизайнерских идей, которые действительно могут пройти. React принимает путь неизменного, Vue и стройный берут дорогу изменяемые, а затем могут быть некоторые различия в реализации конкретного между стройной и Vue и Solid-JS должны быть также филиал на этой дороге. Говоря о Virtual-DOM, я на самом деле не очень нравится термин. Мы стараемся не использовать это слово, потому что у каждого есть разное понимание этого. Но я не думаю, что это родственная производительность вещи. Я хотел бы подчеркнуть, что я не хотел бы использовать термин Virtual-DOM, потому что это очень запутанная концепция. Когда мы упоминали слово «Virtual-DOM», мы говорили о представлении в памяти пользовательского интерфейса. Это должно быть то, что вы ожидаете, так как она дает разработчикам больше возможностей. Например, сервер компонент работает на стороне сервера, но для этого нужно определить формат данных для передачи выходных данных на сервере, а затем получить его на стороне клиента. При использовании сервера компонент, чтобы сделать страницу эффект перехода, вы определенно хотите, чтобы объединить его с существующим интерфейсом. Но это отличается от традиционной стороны клиента визуализации, как PHP или Rails. Когда традиционный метод делает, старая страница исчезнет, а затем новая страница будет постепенно загружать, она не сохраняет какое-либо государство. Если у вас есть окно поиска, вы что-то типа, нажмите кнопку поиска, чтобы перейти на новую страницу, и окно поиска будет очищен. Но компоненты сервера нечто подобное не произойдет, мы посылаем компонент дерева обратно к клиенту, мы можем дифф его с существующим UI на клиенте, а затем сделать разницу, так что состояние окна поиска может быть сохранено. Компонент, который должен быть заменен заменен, и это возможно потому, что интерфейс имеет промежуточное представление в памяти, которая является то, что люди называют Virtual-DOM. Это пример используется для иллюстрации роли Virtual-DOM. Другим примером является то, что я должен делать, если теперь мы хотим, чтобы интегрировать полную систему анимации в React. Например, если мы хотим сделать анимацию, спровоцированный жестом перетаскиванием, мы определенно не хотим, чтобы сделать каждый кадр, мы хотим вычислить лишь несколько версий интерфейса. Если предположить, что крайняя левую версия 0%, а крайняя правая версия 100%, мы рассчитываем несколько подобных ключевым кадров, и мы можем использовать интерполяцию для вычисления текущего внешнего вида пользовательского интерфейса во время перетаскивания. Но здесь возникает вопрос, как вы генерировать эти ключевые кадры? Вам нужно представление в памяти пользовательского интерфейса, так что вы можете интерполировать между ними. Этот пример также иллюстрирует значение Virtual-DOM, некоторые функции не могут быть достигнуты без него. Таким образом, Virtual-DOM не имеет ничего общего с производительностью, она существует только чтобы сделать некоторые особенности это возможно, и мы считаем, что представление этого интерфейса в памяти все еще очень важно. Хотя в некоторых синтетических тестах мы можем быть около 10% медленнее, чем другие, вы должны понимать, что это не проблема. По крайней мере, в наших тестах, когда мы проанализировали некоторые сложные отображения страниц на Facebook. То, что мы видели своими собственными глазами, что React занимает 10% времени, а другой 90% времени над головой из-за кода приложения. Рамки могут быть оптимизированы, может быть только 2% от скорости. Поэтому, когда вы смотрите на этих тестах, может быть 1000 строк тестового кода, но есть только один компонент. Вы можете быть заинтересованы только в разнице в 2%, но это не отражает реальную производительность приложения. Так что на самом деле влияет на производительность, как весь приложение работает и как мы можем сделать пользовательский код работать лучше. Вот что Параллельное Rendering, компоненты сервера и все новые возможности для. Вместо того, чтобы пытаться выиграть эти соревнования тестов, мы будем поддерживать больший масштаб кода пользователя, а некоторые тесты имеют маленькие компоненты, которые меньше, чем 10 строк длиной, и они не стоят нашего времени и усилий.
Модератор: В последнее время появилось много новых библиотек, и люди хотят знать, как React может не отставать и оставаться конкурентоспособным.
Дэн: Да, думаю, я в некотором смысле ответил на этот вопрос. Мы пытаемся начать с общей картины и использовать более общий способ решения проблем, которые трудно решить из одной точки, таких как выборка данных, разделение кода, анимация и другие функции в будущем, и React сделает они возможны в будущем. Думаю, именно в этом кроется конкурентоспособность React. Но лично я не думаю, что React нуждается в определенных функциях, чтобы «оставаться» конкурентоспособным. Например, когда я использую React для создания некоторых прототипов, я хочу нарисовать некоторый пользовательский интерфейс, React будет очень естественным и простым в использовании. Даже если в ближайшие пять лет в React не появится новая функция, мне кажется естественным выражать пользовательский интерфейс с помощью вложенных функций. Я думаю, что такой способ разработки имеет смысл, и мне нравится React таким, какой он есть, поэтому я не думаю, что React должен стать более «конкурентоспособным» (Дэн цитирует обеими руками), чтобы люди могли его использовать. Но я повторю, что я взволнован наличием множества функций, над которыми мы работаем прямо сейчас, которые могут упростить то, что в настоящее время является сложной задачей разработки.
ССР, КСО, СМП, СОЭ
Модератор: И Vue, и React решают проблему рендеринга веб-страниц, но в настоящее время существует множество способов рендеринга веб-страниц, таких как SSR (рендеринг на стороне сервера), CSR (рендеринг на стороне клиента), NSR (рендеринг на стороне пользователя), ESR. (Edge Side Rendering) Рендеринг), как бы вы описали развитие интерфейса в течение следующих пяти лет?
Дэн: Вопрос в том, что у вас есть много разных способов запуска вашего кода, вы можете запустить его на стороне клиента, на стороне сервера или где-то еще, вопрос в том, как вы их организуете. Но я думаю, что большую часть работы здесь должен делать фреймворк, поэтому еще раз рекомендую вам использовать фреймворк. картинаNext.jsэто хороший вариант, чтобы дать вам общее представление о том, как реализована эта часть.Next.jsЭту часть операции можно упростить, обернув существующие концепции в React, например, если вы хотите использовать серверный компонент,Next.jsС собственным API, getServerSideProps() или подобными методами вам не нужно использовать родной способ React для организации проектов,Next.jsОн будет управлять вашим проектом с помощью собственного API, позволяя вступать в силу серверному компоненту и другим подобным функциям. Итак, я думаю о будущем... О, я вдруг подумал, что если вы заинтересованы в серверных компонентах, вы могли бы также взглянуть на новый фреймворк, недавно выпущенный Shopify,Hydrogen. Недавно они выпустили демонстрационную демонстрацию, если вы ищете «Shopify Hydrogen Demo» или аналогичные ключевые слова, вы можете увидеть ее, которая демонстрирует, как они используют серверный компонент, что также является перспективой для будущих сценариев. Если у вас есть только одно дерево рендеринга, скажем, вы пишете страницу или сайт блога, вам нужно только прочитать некоторые файлы Markdown в файловой системе на стороне сервера, затем отрендерить их в соответствующую позицию компонента и, наконец, отрендерить. Компонент передается клиенту, вам нужно только рассмотреть компонент и все в порядке. Что касается того, где выполнять логику кода, это полностью зависит от вас. Некоторые из них могут быть выполнены во время сборки, некоторые страницы также могут быть запущены на стороне сервера, если вы хотите, и только код, связанный с фактическим взаимодействием, будет отправлен на сторону клиента, а затем запущен на стороне клиента. В идеале весь этот пайплайн по-прежнему представляет собой единое дерево рендеринга, и вам не нужно обращать внимание на различия в этой части в реальном времени. Вам нужно только дать несколько небольших подсказок, таких как изменение расширения файла, и код будет автоматически выполняться в наиболее подходящей позиции. Так что вам не нужно так много думать: вы хотите выполнять рендеринг на стороне сервера, рендеринг на стороне клиента и, возможно, рендеринг на другой стороне. Фреймворк позаботится об этой части за вас, вам просто нужно использовать одну и ту же парадигму для написания кода, и она будет работать везде.
React и фреймворки
Модератор: Как вы оцениваете утверждение, что «React больше похож на систему, чем на фреймворк»?
Дэн: Я бы не сказал, что React сам по себе является фреймворком, я не думаю, что это справедливо. Прежде всего, я думаю, что React — это просто библиотека, потому что она не ограничивает ваш способ работы, не ограничивает структуру вашего проекта, а просто дает вам инструменты для создания компонентов. Но я чувствую, что React становится архитектурой, но отличается от фреймворка. Потому что на самом деле есть много способов создать новый фреймворк React, но теперь React также имеет свои собственные «представления» для реализации определенных технологий, таких как выборка данных, маршрутизация и серверная обработка. side rendering, как эти функции должны сочетаться. React — это просто способ создания пользовательского интерфейса, и на его основе различные фреймворки могут предоставлять пользователям возможности более высокого уровня.
Привлекайте черты фронтенд-разработчика
Модератор: Как вы думаете, какие качества хорошей технологической компании наиболее привлекательны для фронтенд-разработчиков? Можете ли вы просто перечислить два или три?
Дэн: Хорошо, я подумаю об этом. Я думаю, что наиболее важным моментом является «умение учиться у окружающих вас людей». Для меня самым важным является наличие среды, в которой я могу все время узнавать что-то новое. Конечно, это не означает, что вы должны постоянно изучать новые библиотеки, не говорите «интерфейс всегда меняется» только потому, что вы не знаете всей картины интерфейса. Я не думаю, что это так. Как я уже сказал, большинство новых вещей просто наследуют старые идеи, и хотя они бесконечны, но суть у них одна и та же. Если вы копнете глубже, то обнаружите, что это одно и то же. Но я считаю, что идеальная среда — это когда компания/команда поощряет вас к получению новых знаний, а в команде есть старшие с 10-15-летним стажем работы, и вы можете у них учиться. Высокий уровень автономии внутри группы также хорош, вас не назначают для выполнения конкретной работы, вы можете делать то, что хотите, из списка дел, что также делает работу более увлекательной. Пассивная мотивация, естественно, важна, но она также очень ценна, если вы можете проявлять собственную инициативу и делать собственный выбор. Я не знаю, отвечает ли это на ваш вопрос.
Как изучить React-код
Модератор: Многих друзей интересует ваш личный опыт.Когда вы впервые присоединились к Facebook, как вы узнали структуру и концепции React и постепенно начали писать код?
Дэн: React имеет довольно сложную кодовую базу с таким количеством сложных контекстов, что трудно начать. Как правило, когда к команде присоединяются новые члены, мы проводим с ними много времени за просмотром кода. Сначала они могут исправлять небольшие ошибки или относительно независимые небольшие особенности, чтобы медленно ознакомиться с кодом. Ключ ко всему процессу — знакомство с архитектурой.Как только у вас будет полное понимание архитектуры всего проекта, вся последующая работа будет логичной. Одна из вещей, которая мне очень помогла, — это смотреть на проблемы людей и решать их. В разные моменты времени я пройдусь по всем проблемам, которые в данный момент находятся в состоянии «Открыто», чтобы посмотреть, смогу ли я решить эти проблемы, подумать, смогу ли я понять, о чем они говорят, и научиться, если нет. контекст. Я думаю, что я лично прочитал тысячи выпусков, и я думаю, что это отличный способ узнать, если вы хотите быстро приступить к работе. Вы можете щелкнуть, чтобы просмотреть выпуски в состоянии «Открыть». Всего должно быть около 500 выпусков. Вы можете начать с самого начала или перейти на последнюю страницу, чтобы начать с самого старого. Глядя на задачу, вы можете постепенно понять, какие проблемы в настоящее время, медленно разбираться в коде, понимать историю обновлений проекта и т. д., так что это способ учиться через проблему. Помочь людям, которые придумали проблему, на мой взгляд, это лучший способ внести свой вклад, честно говоря, нам не нужны люди, которые вносят столько кода, обычно нам требуется много времени, чтобы просмотреть код, и это на самом деле людям сложно поставить функцию Write it right. Поэтому, когда мы получаем код от сообщества, мы мало что из этого получаем. Но это помогает нам отвечать на вопросы людей за нас, иногда пользователь отправляет отчет об ошибке, но на самом деле это ошибка в коде, который они написали сами. Если кто-то в сообществе помогает им находить проблемы и находить ошибки, нам больше не нужно тратить время на эти проблемы, и это мой самый желанный способ внести свой вклад.
Поддерживать реакцию
Модератор: React имеет очень большую кодовую базу, как команда разработчиков React и сообщество поддерживают такую сложную кодовую базу?
Дэн: Репозитории кода создают некоторые проблемы, но проблема не в том, что репозиторий кода большой, а по некоторым другим причинам. Прежде всего, вы должны знать, как разрабатывать и как запускать код. Например, мы полагаемся на множество автоматических тестов, вероятно, нужно запустить тысячи тестов, я думаю, что число может быть больше 5000. На данный момент мы, вероятно, пишем больше тестового кода, чем исходного кода, и мы сильно на это полагаемся. Один из выводов, который мы усвоили, заключается в следующем: обязательно напишите тесты для общедоступного API React. Наш предыдущий подход заключался в модульном тестировании отдельных модулей, но это очень плохая идея для такого проекта, как React, потому что, как только вы перепишете React, эти тестовые примеры для старого кода станут бесполезными. Когда мы переписывали React, мы продолжали осознавать, что «о, есть еще одна куча тестового кода, который не работает, потому что предыдущего кода больше не существует». Поэтому мы изменили все тестовые примеры, чтобы протестировать только общедоступный API для имитации фактического поведения пользователя. Тестовые примеры могут использовать только ReactDom.render() или аналогичные методы и не могут получить доступ к внутреннему API. В случае тестирования только для публичного API, даже если мы заменим исходные файлы, тестовые образцы все равно могут пройти, и мы также можем проверить правильность нашей перезаписи. Это наш опыт, обобщенный из практики. Еще один интересный момент, и, возможно, немного более спорный, это то, что у нас много файлов в двух версиях. Если вы посмотрите на исходный код, то увидите, что у нас есть такие файлы, как .old.js или .new.js. Эти файлы в основном скопированы, и их содержимое в основном одинаково. Мы используем их для тестирования некоторых потенциально опасных обновлений, а для сайта Facebook мы можем развернуть несколько версий одновременно. Мы иногда записываем эти экспериментальные обновления в файл .new, а затем проводим регрессионное тестирование в экспериментальной среде Facebook.Если показатели теста не ухудшаются, то копируем эти обновления в файл .old, так скажем, у нашего сайта две версии на любой время. В процессе экспериментального тестирования другие люди также могут выполнять другие части отправки кода. Это может показаться странным, но на самом деле это работает очень хорошо.
Модератор: Так в этом ваш секрет поддержания качества кода React в процессе разработки?
Дэн: Да, я думаю, что среда тестирования Facebook действительно хороша, у нас есть не только тесты для самого репозитория React, но и много тестов для Facebook. Иногда мы нарушаем функции во время разработки React и можем найти проблемы во время тестирования. В производственной среде или даже после нее мы можем развернуть экспериментальные тесты и посмотреть, какие метрики упадут. Например, мы провели рефакторинг в октябре прошлого года, и нам пришлось приостановить то, что мы делали, на два месяца после этого, потому что мы увидели падение некоторых показателей на 1%, я думаю, это было низкое количество отзывов на сайте или что-то в этом роде. %. Нам нужно выяснить, является ли это проблемой производительности, ошибкой или чем-то еще. Вы должны знать, что другие фреймворки часто не могут этого сделать, им часто нужно сначала выпустить версию, а затем может пройти год, прежде чем кто-то найдет в ней ошибку и сообщит о ней. Но мы этого не делаем, мы хотим убедиться, что React имеет высокое качество, поэтому мы потратили месяцы на изучение этого вопроса. Используйте метод дихотомии, чтобы постоянно разделять отправленные коммиты, и постоянно проводите экспериментальные тесты, даже чтобы быть точными для каждого коммита. В конце концов, мы нашли ошибку, и у нас действительно была ошибка в тестовой среде, которую мы развернули. Когда мы это исправили, показатели снова пришли в норму, и этот результат тоже придал нам уверенности. Вы знаете, в компании размером с Facebook даже ухудшение показателей на 1% влияет на миллионы людей. Так что, если есть большая проблема, ее будет легче найти.
Читать исходный код React?
Модератор: Как фронтенд-разработчику, использующему React, нужно ли нам читать исходный код библиотеки React? Есть ли хороший способ прочитать код, если это необходимо?
Дэн: Я не думаю, что это необходимо, это может быть довольно сложной работой, потому что мы нигде больше не упоминаем, как спроектирован сам React. Если вы подойдете и начнете читать код, вы можете сильно запутаться и не понять, почему он так устроен. Это также может быть момент, который нам нужно улучшить в будущем.В определенный момент в будущем мы можем объяснить здесь принцип реализации. Но я не думаю, что процесс должен быть болезненным, если вы просто хотите повеселиться. Например, мне нравится делать что-то самому, использовать пошаговую функцию отладчика, чтобы запускать код построчно, смотреть, к какой функции будет выполняться код, и какие разные файлы будут использоваться для запуска кода. Еще одна вещь, которую вы можете сделать, это использовать Chrome Performance Tools, вы можете открыть вкладку производительности Chrome, нажать «Запись», затем сделать что-то в своем приложении, затем нажать «Стоп», и вы увидите график пламени или таблицу пламени. Этот результат профилирования очень полезен, это как какой-то стек, вы можете видеть порядок, в котором вызываются функции, вы можете видеть, что происходит в коде. Он часто используется для проверки производительности, и вы можете увидеть, какая часть вашего кода работает медленнее, но вы также можете использовать его для получения обзора текущей функции, поскольку он показывает имя функции выше. Вы можете видеть, какие разные вещи могут быть вызваны изменениями состояния. Вы можете найти «О? Эта функция вызывается везде, что она делает?». Затем вы можете нажать и посмотреть, что происходит внутри. Я думаю, что это также хороший способ научиться шаг за шагом исследовать код в этом тесте производительности, чтобы понять, на что React тратит свое время, какие функции являются его ядром и так далее.
Оставайтесь увлеченными React
Модератор: Как вы сохранили свою страсть к React?
Дэн: Мне это просто нравится. Не знаю почему, но если подумать, то, вероятно, это потому, что React очень хорошо соответствует моему видению кода пользовательского интерфейса. Я начал использовать React до того, как попал в Facebook, когда был небольшим стартапом. Мы работали над очень сложным приложением и пытались перенести его с Backbone на React. Мы мигрировали не потому, что React был большой тенденцией в то время, а потому, что в то время было действительно сложно разработать сложный пользовательский интерфейс с помощью Backbone, и его было слишком просто реализовать с помощью React. Основная идея состоит в том, чтобы написать функцию состояния для выражения того, что должно отображаться на текущем экране. Это тоже вопрос, который я часто задаю себе, как должны выглядеть мои компоненты и какой контент должен отображаться на экране. Такой образ мышления естественно соответствует моему мышлению в области программирования. Но действительно есть некоторые вещи, которые нелегко обобщить в этой парадигме, например выборка данных — типичный пример. То, что вы действительно хотите учитывать, это то, что находится на экране, но когда дело доходит до выборки данных, вы должны думать о том, как общаться с сервером, как ждать, пока сервер вернет результат, и, возможно, установить определенный состояние во время ожидания, так что когда пользователь снова инициирует запрос, результат последнего запроса может быть проигнорирован. Я как раз думал о том, что должно отображаться на странице, но эти вещи все усложняют. Вот почему мы хотим предоставить пользователям возможности извлечения данных, такие как Suspense, которые могут помочь вам упростить мышление. Мне нужно думать только о том, что я хочу увидеть и где это взять, даже если это внешний URL, и мне не нужно думать о времени. Я просто хочу выразить то, что в данный момент находится на экране, а затем позволить React решить, как это отображать. Я думаю, что меня очень взволновало то, что теперь React смог очень хорошо реализовать композицию пользовательского интерфейса и вложенность, но все еще есть выборка данных, анимация, разделение кода, асинхронность данных, которые в настоящее время трудно реализовать, я надеюсь Эти функции можно упростить в использовании. Я надеюсь, что через пять лет мы сможем создавать сложные приложения более простым способом, и эта простота исходит от React, помогающего пользователям справляться с этими сложностями. Это моя идея.
Как быть таким же хорошим, как ты
Модератор: Если я хочу быть таким же хорошим, как вы, могу ли я порекомендовать какие-нибудь хорошие обучающие материалы по интерфейсу?
Дэн: Я не уверен, хорош я или нет, на самом деле я во многих отношениях не иду в ногу со временем. Например, если вы попросите меня сделать красивое приложение, это может быть сложно сделать. Поскольку мои знания CSS все еще в 2010 году, и я мало знаю о CSS Grid и Flexbox, я не знаю, хотите ли вы это услышать. Но если вам нужно, чтобы я порекомендовал учебные ресурсы, я думаю, что очень полезным моментом будет то, что вы можете выбрать несколько примеров пользовательского интерфейса и реализовать их с нуля. Не используйте React во время этого процесса и не используйте никакие другие библиотеки. Например, попробуйте реализовать поле ввода с автозавершением или вкладку в диалоговом окне и убедитесь в сложности выполнения этих операций. Еще мне очень нравилось играть в небольшие игры, которые тоже очень помогали, например, играть в крестики-нолики или есть змею. Игры заставят вас думать, думать о том, как проектировать программы, думать о том, как решать проблемы, а это то, чему вы не можете научиться писать формы и интерфейсы. В заключение я рекомендую вам сделать что-то небольшое, но глубокое, а затем пожинать плоды.
Как провести свободное время
Модератор: Как вы проводите свободное время после работы?
Дэн: Я не делаю много значимых вещей вне работы. Раньше я очень много играл в Fortnite, на самом деле играл не очень хорошо, но я играл в нее долгое время. Я плохо строю, и если кто-то ударит меня, я строю стену, но обычно я вздрагиваю и удираю. Но на самом деле я давно не играл. Сейчас я обычно слушаю музыку, гуляю и занимаюсь сторонними проектами.
justjavascript.com
Модератор: Вы написали серию статей на тему "Просто Javascript". Лично мне эта серия очень нравится. Жду не дождусь следующего выпуска. Хочу спросить о ходе работы над новой статьей.
Дэн: Хорошо, некоторые из моих друзей могут не знать, на самом деле это мой личный побочный проект, который называетсяjustjavascript.com. Это как курс по JavaScript, сейчас он бесплатный, но через несколько недель он может перестать быть бесплатным. Этот класс по-прежнему очень особенный. Он не учит знанию JavaScript традиционным способом, как другие курсы. Он больше посвящен тому, как понимать код. В курсе много визуальных вещей, таких как анимация, диаграммы и т. д. Это также научит вас реализовывать что-то с нуля. Я хочу, чтобы он рассказывал людям, как правильно читать код, как правильно понимать, как работает код. Конечно, мы также работаем над новым контентом. Сейчас мы упаковываем весь курс и загружаем его на сайт.По завершении он будет платным, а его содержание вы сможете увидеть после покупки.Все уроки, рисунки и контрольные вопросы будут представлены на сайте. . Мы не уверены, купит ли кто-нибудь курс, и, вероятно, мы обновим больше контента, если он принесет деньги. Этот проект был бесплатным в течение полутора лет, и мы хотим посмотреть, является ли он жизнеспособным коммерческим продуктом, а затем решить, как его запустить. Этот проект будет официально запущен через несколько недель, и друзья, которые хотят поддержать, могут обратить внимание.
Что за китайский разработчик?
Модератор: Вы хотите что-то сказать китайским разработчикам?
Дэн: Я не знаю, что сказать. Я не уверен, сколько людей используют React в Китае, я просто знаю, что Vue очень популярен в Китае. Но я думаю, что иметь больше возможностей — это хорошо, и я очень благодарен переводчикам документации React, а также китайским разработчикам многих библиотек React. Я не знаю, сможет ли React стать популярным в Китае, возможно, мы не сможем повлиять на эту далекую страну. Но если вы очень заинтересованы в React, у вас есть шанс изменить свое окружение и сделать его популярным. Если React завоюет популярность, позже будет легче найти работу (смеется). Мы рады видеть, как люди переводят сообщения в блогах, распространяют знания, проводят конференции и искренне ценят всех, кто внес свой вклад в это.
Модератор: Вы хотите быть более активным в сообществе React в Китае в будущем?Мы очень хотим общаться с вами больше.
Дэн: Конечно, очень хочется, но не знаю как. Так уж получилось, что вы пригласили меня, и я думаю, что это мероприятие крутое, и после этого мы сможем чаще общаться.
Модератор: Хорошо, я закончил задавать здесь все вопросы аудитории, большое спасибо, Дэн, за то, что сопровождал нас в этом длинном онлайн-разговоре.
Дэн: Спасибо, что пригласили меня.
Модератор: Спасибо, увидимся в следующий раз!
Дэн: Пока!
приложение
| Британия | середина |
|---|---|
| State Management | государственное управление |
| Single Page Application | одностраничное приложение |
| Immutability | неизменность |
| Spread Operator | спред оператор |
| Funtional Programming | функциональное программирование |
| Funtional-lite programming | легкое функциональное программирование |
| Data-fetching | сбор информации |
| server-rendering | Рендеринг на стороне сервера |
| Flame gragh | график пламени |
| Tic-tac-toe | Крестики-нолики |
| Snake game | Змея |
| Fortnite | Фортнайт |
некоторое отступление
Спасибо моим коллегам за перевод и корректуру всего интервью.
Его наггетсы 👉Талант /user/239218…
Более интересно, обратите внимание на публичный аккаунт WeChat 👉ByteDance Web Infra
Исходное видео пытается добавить субтитры~