Автор оригинала: Trey Huffine.
Обзор функций и обновлений для высоко ожидаемого выпуска для реагирования.
Обновление к алгоритму ADRACT CORE было годы в создании – он предлагает заземление перезаписи для того, как реагировать управлять примирением. Реагирование будет поддерживать одно и то же публичное API и должно обеспечить немедленное обновление для большинства проектов (при условии, что вы исправили предупреждения о снижении). Основными целями выпуска являются следующими:
- Способность разбивать прерываемые работы в кусках.
- Способность приоритетировать, ребазировать и повторно использовать работу в процессе.
- Возможность уступить и далее между родителями и детьми для поддержки макета в реакции.
- Возможность вернуть несколько элементов из
Render ()
Отказ - Лучшая поддержка для границ ошибок.
Проверьте gitconnected>
Функции
Основной алгоритм переписать
Первичная особенность перезаписи является асинхронный рендеринг. ( Примечание : Это недоступно в выпуске 16.O, но будет функция в будущем в будущем выпуске 16.x). Кроме того, он удаляет старые внутренние абстракции, которые не старели хорошо и препятствуют внутреннему изменениям.
Большая часть этого была получена из Презентация Лин Кларка Так что, пожалуйста, проверьте это и показать ей любовь Для такого невероятного обзора.
Что означает Async Renseering, состоит в том, что рабочая работа рендеринга может быть разделена на куски и распространять на несколько кадров. Двигатель рендеринга для браузера является одиночной резьбой, что означает, что почти все действия случаются синхронно. React 16 управляет основным потоком и рендерингом с использованием собственного API браузера путем периодической проверки, чтобы увидеть, есть ли другие работы, которые необходимо выполнить. Пример основной нити браузера в Firefox просто:
while (!mExiting) { NS_ProcessNextEvent(thread);}
Ранее реагировать заблокировать весь поток, как это рассчитано дерево. Этот процесс примирения теперь называется «примирение стека». Хотя реагируют, как известно, очень быстро, блокируя основной нитью, может привести к тому, чтобы некоторые приложения не ощущали жидкость. Версия 16 направлена на решение этой проблемы, не требуя процесса Render для завершения после его начала. React вычисляет часть дерева, а затем приостановит рендурирование, чтобы проверить, есть ли основной поток какую-либо краски или обновления, которые необходимо выполнить. Как только краски и обновления были завершены, отреагируйте рендуринг снова. Этот процесс достигается путем внесения новой структуры данных, называемой «волокна», которая отображает экземпляром реакции и управляет работой для экземпляра, а также знают его отношения с другими волокнами. Волокно – это просто объект JavaScript. Эти изображения изображают старые по сравнению с новыми методами рендеринга.
Согласование стека – обновления должны быть полностью завершены, прежде чем вернуться в основной поток (Credit Lin Clark)
Примирение волокна – Обновления будут разбиты в кусочки и реагировать с помощью основного потока (Credit Lin Clark)
РЕАКТ 16 также приоритет от приоритеты обновлений по важности. Это позволяет высоким приоритетным обновлениям прыгать на переднюю часть линии и сначала обрабатываться. Примером этого было бы что-то вроде ключевого ввода. Это высокий приоритет, поскольку пользователь нуждается в том, что немедленная обратная связь ощущает жидкость в отличие от низкого приоритета, такого как ответ API, который может подождать дополнительные 100-200 миллисекунд.
Реагические приоритеты (Кредит Лин Кларк)
Разбивая обновления пользовательских интерфейсов на более мелкие единицы работы, достигается лучший общий пользовательский опыт. Приостановка примирения Работа, чтобы позволить основной нити выполнить другие необходимые задачи, предоставляют более плавный интерфейс и лучшую воспринимаемую производительность.
Обработка ошибок
Ошибки в реакции были немного беспорядка работать, но это изменяется в версии 16. Ранее ошибки внутри компонентов будут повредить состояние реагирования и предоставлять загадочные ошибки на последующих рендерах.
LOL WUT?
Rection 16 включает в себя границы ошибок, будут предоставлять не только гораздо более четкие обмена сообщениями об ошибках, но и предотвращение разрыва всего приложения. После добавления в ваше приложение, границы ошибок ломают ошибки и изящно отображают защитную работу UI без всего падения деревьев компонентов. Границы могут ловить ошибки при рендеринге, в методах жизненного цикла, а также в конструкторах всего дерева под ними. Границы ошибок просто реализованы через новый метод жизненного цикла ComponentDidcatch (ошибка, информация)
Отказ
Здесь любая ошибка, которая происходит в
или его дети будут захвачены
составная часть. Эта функциональность ведет себя как поймать {}
Блок в JavaScript. Если граница ошибки принимает состояние ошибки, вы, как разработчик, способны определить, что отображается в пользовательском интерфейсе. Обратите внимание, что граница ошибки поймает только ошибки в дереве под ним, но он не будет распознавать на себя ошибки.
Движение вперед, вы увидите надежные и действенные ошибки, такие как это:
OMG это приятно (кредит Facebook)
Совместимость
Асинхронизация
Основное внимание первостепенное высвобождение 16.0 составляет совместимость для существующих приложений. Async Rensering не будет первоначально вариантом, но в более поздних 16.Х выпускается, он будет включен в качестве функции отказа.
Совместимость браузера
РЕАКТ 16 зависит от Карта
и Установить
Отказ Чтобы обеспечить совместимость со всеми браузерами, вы должны включить полифилл. Популярные варианты Core-JS или Babel-Polyfill Отказ
Кроме того, он также будет зависеть от ProwelsimationFrame
, в том числе для тестов. Простой прокладки для тестовых целей будет:
global.requestAnimationFrame = function(callback) { setTimeout(callback);};
Компонентный жизненный цикл
С момента реагирования приоритеты рендеринга, вы больше не гарантировали ComponentWillUpdate
и должен быть необходим
разных компонентов будет огонь в предсказуемом порядке. Команда Ract работает над тем, чтобы обеспечить путь модернизации для приложений, которые нарушились от этого поведения.
Применение
В настоящее время Rection 16 находится в бета-версии, но он будет выпущен в ближайшее время. Теперь вы можете начать использовать версию 16, выполняя следующее:
# yarn yarn add react react-dom # npm npm install --save react react-dom
Если вы нашли эту статью полезную, пожалуйста, нажмите 👏. Следуй за мной Для получения дополнительных статей на React, Node.js, JavaScript и программное обеспечение с открытым исходным кодом! Вы также можете найти меня на Twitter или Gitconnected Отказ