React-Cache, нарезка времени и выбывание с синхронным API

Автор оригинала: FreeCodeCamp Community Member.

Marvin Frachet.

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

Эта статья не Цель при описании Как использовать некоторые из новых функций, а скорее доказывания того, как они могли быть построены. Только ради понимания того, с чем мы играем.

Он также написан так, как я обнаружил функцию. Это, вероятно, не так, как оно было придумано, но именно так я получил очки.

Что вы найдете во время чтения:

• Async javascript и контур событий
• Алгебраические эффекты в реакции, с примером
• Волокно и фазы реагирования

Почему я написал этот пост?

Что заставило меня хотеть написать этот пост, это особенность, и экспериментальная функция, которая позволяет использовать асинхронный Операции с использованием A Синхронный API:

const.read () ? … Что за? Синхронный ?!

React-Cache Библиотека создает возможность использовать асинхронные операции со синхронным API. Это особенность, которая заставила меня хотеть узнать, как реагирует под капотом. Вот презентация, представленная Дэн Абрамов и Эндрю Кларк В этой библиотеке:

Как это вообще возможно? Как мы можем получить некоторые удаленные данные, используя синхронные вызовы?

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

Управление операциями JavaScript

Волоконная архитектура позволяет реагировать на контроль над выполнениями задач. Он был построен для решения нескольких проблем, которые реагируют от. Вот два, которые привлекли мое внимание:

• Приоритеты по определенным событиям, как пользовательский ввод по выбору данных
• Асинхронно разделение React Computation для сохранения основной доступности потоков и избежать блокировки его во время процессов длительного рендеринга

Все, что вызывает изменение состояния – не только с реактивными – внутри приложения JavaScript обусловлено асинхронными операциями. К ним относятся Сетримс , извлекать и слушатели для событий.

Асинхронные операции управляются через несколько ядных концепций JavaScript:

• Задачи (Micro, Macro, Render etc …)
• контур событий
• стек вызовов

Если вы не знакомы с этими концепциями, я предлагаю вам взглянуть на это видео по Джейк Арчибальд :

Благодаря волокну, пользовательские входы – разрешено перед другими асинхронными операциями, такими как вызовы Fetch.

Как это вообще возможно?

Ну, разговор о архибальде выше, был первым асфальтированным камнем моего собственного пути узнать о том, как работает петли для событий. Он говорит, что микро задачи – сгенерированные через API обещания, например – выполнены и покраснены до следующая макроза задачей. Этот процесс использует обратные методы, такие как Сетримс Отказ

Итак, если вы вспоминаете мой «пользовательский ввод по сравнению с привлечением данных», как команда сделала извлекать резолюции после Onchange Резолюции?

Ни одна из этих понятий не соответствует тому же спецификации, Whatwg / HTML5 / ЭКМА-262 и предоставляются из разных мест, таких как браузер или двигатели JS.

Я имею в виду, как мы должны решить Обещание после сентиментальный ?

Это звучало мне абсолютно безумие, и было действительно трудно получить представление о том, как это может работать. Дело в том, что это происходит на более высоком уровне.

Позже я смотрел невероятный разговор с Брэндон Дейл на реагирование ралли. Это представляет новый Особенности нарезки и ожидания времени которые были отправлены благодаря архитектуре реагирования волокна:

Согласно Dail, волокно так же, как обычный JavaScript CaultStack, где каждый элемент в стеке называется A волокно Отказ Это отличается от CaultStack, которая опирается на Рамы которые представляют Функции (+ метаданные). Скорее, волокно представляет А Компонент (+ метаданные) . Давайте посмотрим на волокно как огромную коробку вокруг компонента, который знает все об этом.

Существует важная разница между этими двумя понятиями.

На первой руке CallStack – это функциональность, которая была построена на вершине Родная часть вождения JavaScript код Отказ Он направлен на стек каждая функция JavaScript Call и запустить их самостоятельно. Каждый раз, когда мы называем функцию, которую она добавляется в стек. Без CaultStack мы не сможем иметь четкую и подробную ошибку Stacktlaces. И поскольку CaultStack не доходит до кода JavaScript, очень сложно и даже невозможно взять на себя контроль над ним.

С другой стороны, волокна – как стог волокна – представляют ту же концепцию, но встроенные в Код JavaScript. Крошечный агрегат не функционирует, а компонент Отказ На самом деле он работает в JavaScript Universe.

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

То, что изгнало меня в неправильном направлении, было то, что я думал, что React использовал обходной путь для отключения внутреннего способа JavaScript. Это не так Отказ Волокна – это просто объекты JavaScript, имеющие информацию о комментариях реагирования и которые могут взаимодействовать со своими жизнерагорами. Это может действовать только на внутренние функции реагирования.

Идея это не Чтобы переопределить, как работает JavaScript, как сказать, что извлекать Разрешение MicroTask должно быть выполнено перед задачами обратного вызова. Это больше, на котором методы реагирования следует называться или нет В определенном контексте, как прерывание различных вызовов метода жизненного цикла.

Эй подожди! Вы говорите, что волокна могут контролировать абсолютно все в приложении React? Но как компонент может реагировать, чтобы остановить что-либо делать?

Алгебраические эффекты, да, но в JavaScript пожалуйста

Реагирование может управлять компонентами и знать, работает ли компонент, благодаря архитектуре волокна. То, что не хватает сейчас, – это способ сказать реагирование, что что-то изменилось на определенный компонент, поэтому он будет справиться с этим изменением.

Это где алгебраические эффекты заходи в игру.

Алгебраические эффекты – это не то, что существует в JavaScript. Я постараюсь объяснить, что они с объяснением более высокого уровня.

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

Некоторые языки, такие как Ocaml или Эфф извлечь выгоду из этих особенностей. Это действительно интересная абстракция, поскольку детали реализации полагаются только на родитель:

Разве это не было бы здорово иметь такую функцию в JavaScript?

Команда Ract React создала аналогичный подход в контексте React Context с JavaScript попробуйте/поймать блокировать. По данным Dail, это самая близкая доступная концепция в JavaScript.

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

Пример лучше, чем тысяча слов

Представьте себе следующий код, который пытается получить Bulbasaur Использование синхронного API :

Этот кусок кода может быть странным, поскольку не очень распространено для получения данных с использованием синхронного API. Давайте прыгнусь внутри CustomFetch Реализация функций:

Ох ждать! Это абсолютно не похоже на получение! Я не получаю то, что эта функция направлена вообще …

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

Найдите некоторое время, чтобы прочитать код.

Теперь давайте прыгнем к CustomFetch реализация:

Важная часть в предыдущих фрагментах – это попробуйте/поймать блокировать.

Давайте подведем подсуждение того, что происходит через эти разные кусочки кода:

• Покемон Компонент вызывает CustomFetch метод.
• CustomFetch Метод пытается прочитать его внутренний кеш, но он пуст. Так что это бросает что-то/где-то – алгебраические эффекты.
• волокно Родитель ловит эту информацию, обрабатывает ее и извлекает данные. Тогда наполняет CustomFetch кэш с данными.
• Перезарядка встречается в Компонент (ARGS) И, теперь CustomFetch кэш полна. Данные теперь доступны в компоненте с использованием синхронного API.

Посмотреть на кэш-память Детали реализации и проверьте различные броски.

Что-то, возможно, привлекло ваше внимание во время этого процесса: оказывать был назван дважды. Один для броска ошибки – Пауза Компонент – и один для получения данных – возобновить компонент. Это нормально с реагированием на триггер несколько оказывать Вызовы, поскольку это исключительно чистая функция – у нее нет никаких побочных эффектов самостоятельно.

Чего ждать? оказывать не имеет побочных эффектов? А как насчет дома?

Фазы реагирования

Если вы работаете с реагированием в течение долгого времени, вы, возможно, слышали, что это не очень хорошая практика, чтобы повторно рендер несколько раз. Перед архитектурой волокна каждый раз, когда мы называем Render Function React, делали некоторые внутренние вычисления, а затем соответствующим образом модифицировали DOM. Например, это произошло при вызове функции рендеринга через SetState Отказ Процесс был включена:

SetState → оказывать → Сравнить виртуальные узлы → Обновите узлы DOM

Работа с волокном, процесс немного отличается. Он представил концепцию очереди и партии, которые обеспечивают модификации высокой производительности DOM.

Идея довольно проста. Мы предполагаем, что экраны могут работать ~ 60 кадров в секунду. Из этого предположения, и используя доступные функции JavaScript, можно сделать некоторые вычисления и модификации DOM только каждые ~ 16,7 мс. С волокном реагирование может вызвать несколько модификаций и зафиксировать их примерно в 60 раз в секунду.

Этот вид модификации позволил реагировать на раскол на три фазы своими преимуществами и особенностями:

• Фаза Render является чистой и детерминированной. Он не имеет побочных эффектов и различных функций, которые он состоит из может называться несколько раз. Фаза Render прерывается – Это не оказывать Функция, которая находится в режиме паузы, но Весь фаза
• Фраза предварительной коммиты направлена на то, чтобы обеспечить доступ к фактическому состоянию DOM, подобно позициям Scrollbar, в режиме чтения.
• Фаза фиксации на самом деле модифицирует DOM и не прерывается Отказ Реагировать не может приостановить во время этой фазы.

Этот набор из трех фаз ввел возможности нарезки времени. Реагистрация способна пауза во время фазы Render, у между двумя функциями компонентов, и возобновить эту фазу при необходимости.

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

Команда Ract React произвела огромные улучшения производительности благодаря параллельному действию в реагировании (время нарезки + ожидания) и архитектура волокна. Они создали обходные пути для противодействия различным проблемам браузера, таких как приоритеза событий и параллелизма.

Если мы сделаем шаг назад, не так ли то, что они показали? Приоритеты, кажется, новая задача для браузера и фреймворков в интерфейсах.

Другие команды также работают над улучшением фактического состояния искусства и даже предложить будущие API. Это Google Ware:

Оригинал: “https://www.freecodecamp.org/news/react-cache-time-slicing-and-fetching-with-a-synchronous-api-2a57dc9c2e6d/”