Алгоритм сравнения
Друзья, которые знакомы с реагированием, знают, что в реагировании есть основной алгоритм, называемый алгоритмом сравнения. Веб-интерфейс состоит из деревьев домов, и разные деревья домов будут отображать разные интерфейсы. React использует виртуальный дом для представления дерева домов, а алгоритм diff используется для сравнения различий между виртуальным деревом домов и обновления той части интерфейса, которую необходимо обновить. Процесс идеального сочетания алгоритма сравнения и виртуального дома называется согласователем, который является абсолютным оружием реагирования на осаду города. С помощью reconciler разработчики могут выйти и работать с реальным деревом DOM, и им нужно только описать состояние интерфейса, чтобы отреагировать, а реакция поможет вам эффективно выполнить реальную операцию DOM.
Так что же такого хорошего в волокнах?
Почему появляется клетчатка
Не знаю, сталкивались ли вы с такой ситуацией.При нажатии на кнопку какой-либо страницы вы чувствуете, что страница не имеет ответа, что заставляет вас задуматься, не сломался ли компьютер.Потом вы быстро вырубаете браузер и находите что комп не завис, поэтому переключившись обратно в браузер, только тогда я обнаружил, что страница наконец-то обновилась. Почему это происходит? В большинстве случаев это может быть связано с тем, что браузер занят выполнением соответствующего js-кода, поэтому основной поток браузера вовремя не реагирует на действия пользователя или не обновляет интерфейс вовремя. Это явление показано на следующем рисунке.В вашей компании есть только один программист (главный поток).Когда этот программист выполняет вашу задачу (ваш код), он находится в состоянии иммерсивного программирования и не может реагировать на другие внешние программы.События, что делать есть после работы, не существует. Это похоже на то, когда браузер занят выполнением кода js, он не будет выполнять такие операции, как обновление страницы.
Исходный согласователь стека похож на рекурсивно выполняемую функцию.Процесс согласования вызова дочернего компонента из родительского компонента является рекурсивным процессом выполнения, поэтому он называется согласователем стека. Когда мы вызываем setState, react начинает обход от корневого узла, чтобы найти все отличия, и для очень большого дерева dom этот процесс рекурсивного обхода займет очень много времени. В течение этого периода любое взаимодействие и рендеринг будут заблокированы, что создаст у пользователя ощущение «мертвости».
Как Fiber выполняет асинхронный рендеринг
При работе с отображением я часто слышу цель под названием 60 кадров, что указывает на частоту обновления картинки, то есть картинка обновляется 60 раз в секунду. Это связано с тем, что при частоте обновления в 60 кадров страница выглядит гладкой для человеческого глаза без явных задержек. Страница обновляется 60 раз в секунду, то есть страницу нужно обновлять каждые 16 мс.Если обновление страницы занимает менее 16 мс, до следующего времени обновления останется немного времени для выполнения других задач. интерфейс никак не повлияет на плавность страницы. Ядро оптоволокна использует принцип 60 кадров для реализации циклического алгоритма планирования задач на основе приоритета и requestIdleCallback.
function fiber(剩余时间) {
if (剩余时间 > 任务所需时间) {
做任务;
} else {
requestIdleCallback(fiber);
}
}
Fiber также устанавливает разные приоритеты для разных задач.Высокоприоритетные задачи должны отображаться на странице сразу.Например, если вы вводите текст в поле ввода, вы обязательно хотите, чтобы ваши пальцы нажимали каждую клавишу на клавиатуре. поле ввода может дать немедленную обратную связь, так что вы можете знать, является ли ваш ввод правильным и действительным. Низкоприоритетные задачи это как бы какие-то данные отправленные с сервера.В это время нужно обновить страницу,например количество лайкнувших эту статью +1 или комментарий +1.Это не такое уж срочное обновление, задержка 100-200 мс, и это не будет иметь большого значения, и с этим можно будет справиться на более позднем этапе. Fiber будет динамически корректировать планирование задач в соответствии с приоритетами задач и расставлять приоритеты для задач с высоким приоритетом.
{
Synchronous: 1, // 同步任务，优先级最高
Task: 2, // 当前调度正执行的任务
Animation 3, // 动画
High: 4, // 高优先级
Low: 5, // 低优先级
Offscreen: 6, // 当前屏幕外的更新，优先级最低
}
В оптоволоконной архитектуре есть структура данных, имя которой называетсяfiber, поэтому новый согласователь называется волокном.fiberПо сути, это JS-объект, главное в свойствах этого объекта.stateNode,tag,return,child,siblingа такжеalternate.
Fiber = {
tag // 标记任务的进度
return // 父节点
child // 子节点
sibling // 兄弟节点
alternate // 变化记录
.....
};
мы можем видетьfiberОсновываясь на структуре связанного списка, он имеет указатель на родительский узел, дочерний узел и родственный узел Во время процесса сравнения он проходится в соответствии с отношением соединения между узлами.
Возможные проблемы с оптоволокном
В файбере обновление поэтапное, которое разделено на два этапа, первый — это этап сверки, на котором вычисляется разница дерева DOM до и после, и этап коммита, который отрисовывает обновление на страницу. Первый этап может быть прерван, так как этот этап может занять много времени, поэтому его необходимо приостановить для выполнения других более приоритетных задач.Второй этап не будет прерван и обновится за один раз, отрисовка на страницу.
componentWillMount,componentWillReceivePropsа такжеcomponetWillUpdateОтметить как небезопасный и использовать новые функции жизненного циклаgetDerivedStateFromPropsа такжеgetSnapshotBeforeUpdateсделать замену.
Другой проблемой является проблема голодания, которая означает, что если задачи с высоким приоритетом всегда вставлены, задачи с низким приоритетом не могут получить возможность выполниться, что называется проблемой голодания. Официальное решение этой проблемы состоит в максимальном повторном использовании выполненных операций для ее облегчения. Я считаю, что чиновник также усердно работает над тем, чтобы придумать лучшие способы решения этой проблемы.
Текст / XSS
редактировать /флуоресценция
Автор разрешил опубликовать эту статью, и авторские права принадлежат Chuangyu Frontend. Пожалуйста, укажите источник для перепечатки этой статьи. Ссылка на эту статью:Известен Sec-fed.com/2018-10-23-...
Если вы хотите подписаться на другие сообщения с передовой линии KnownsecFED, выполните поиск и подпишитесь на нашу общедоступную учетную запись WeChat: KnownsecFED. Добро пожаловать, чтобы оставить сообщение для обсуждения, мы ответим как можно скорее.
Спасибо за прочтение.