Эта волна React действительно нацелена

внешний интерфейс React.js
Эта волна React действительно нацелена

Всем привет, я Кэссон.

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

для автораReactа такжеSolid.jsразработал то же самоеDemo. ПочемуSolid.jsа такжеReactДавайте сравним, посмотримSolid.jsизAPI:

  • Hooks

  • Контекст, API портала

  • Error Boundaries

не могу сказать иReactСходств много, можно только сказать, что они одинаковые. а такжеSolid.jsтакже использоватьJSXописать вид, поэтомуReactзаявление о переходе наSolid.jsСтоимость приложения небольшая.

А как насчет конкретных результатов оценки?Разница в 3 раза быстрее.Эта волнаReactфактически был нацелен.

Ссылка в этой статьеSolidJS vs React: I've Built the Same App On Both Libraries.

почему такая большая разница

Кратко представить этоDemo, который изначально отображает пустой список:

первыйmountПосле завершения инициируйте запрос на отображение данных списка:

Rick和Morty真爱粉无疑了

Вот два приложенияChrome Dev Tools PerformanceРезультаты панели:

左React 右Solid.js

Некоторые ключевые показатели описаны ниже:

  • Загрузка: время, необходимое для инициирования сетевого запроса и анализа HTML.

  • Скрипты: анализ, компиляция, выполнениеJSвремя (включая время сборки мусора)

  • Рендеринг:styleа такжеlayoutрассчитать

  • Картина:paint,composite, расшифровать картинку

конкретные проблемыScripting, осталось 475 мс (React), справа 176 мс (Solid.js)

Разрыв более чем в 2 раза, значит преувеличен?

В чем проблема

Рабочий процесс интерфейсной среды можно описать тремя простыми шагами:

  1. триггерное взаимодействие

  2. На что влияют вычислительные взаимодействияDOM

  3. воплощать в жизньDOMдействовать

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

существуетReact, шаг 2 выполняется во время выполнения, а вSolid.jsделается во время компиляции.

В частности, этот шагReactизвестный какreconcile, более известный как虚拟DOMизdiffалгоритм.

существуетPerformanceпод панельюCall Treeможно увидеть в реализацииXHR Load(запрос данных списка) перед очень трудоемкой операцией (Function Call), операцияreconcile.

пока вSolid.jsВ приложении нет такой трудоемкой операции:

Во время компиляцииSolid.jsбудуJSXскомпилировать прямо в状态а также操作DOM的方法отношение между.

из-заJSXслишком гибкий, чтобы иметь больше подсказок, чтобы установить это соединение во время компиляции,Solid.jsсуществуетReactоригинальныйJSXкомпонент обеспечивает некоторые控制流组件:

В качестве примера можно привести следующее遍历列表项Различия в реализации в двух фреймворках:

// React
<ul>
  {list.map(
    item => <li>{item.name}</li>
  )}
</ul>
<ul>
  
// Solid.js
<ul>
  <For each={list}>
    {(item) => <li>{item.name}</li>}
  </For>  
</ul>

Forкомпонент заменяетJSмассив вmapметод.

когдаSolid.jsЭто делается во время компиляции, и только шаги 1 и 3 фактически выполняются для каждого обновления во время выполнения, экономя большую часть времени на шаге 2.

несмотря на то чтоReactправильноreconcileСуществуют стратегии оптимизации, но по мере увеличения размера приложения или неполного соблюдения участниками проекта лучших практик это неизбежно приведет к тому, что на шаг 2 будет тратиться все больше и больше времени.

Solid.jsпостроить заранее状态а также操作DOM的方法Хотя для сохранения этой корреспонденции во время выполнения требуется больше памяти, это экономит большую часть времени шага 2, который является типичной стратегией пространства во времени.

Суммировать

Сказав все это, хотя кажетсяSolid.jsВ сравненииReactЕсть плюсы в некоторых аспектах фреймворка, но это не качаетReactдоминирование.

после всего,ReactБыть настолько популярным не имеет никакого отношения к тому, счастлив он или нет, экологическое процветание сообщества является самым важным.

Есть еще одна интересная вещь, вот две в текстеDemoадрес:

Demoданные, полученные изAPIДоменное имяrickandmortyapi.comа вообще есть такой сайт...

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

Категории