Всем привет, давно я не был дешев~

Давненько я не поднимал шум::>_<:: c>

Время рефакторинга моих колес...

Итак, как видите, smox, fre, eplayer обновлены

В этой статье в основном рассказывается о дизайне фреймворка fre.

Use

import { h, render, useState } from 'fre'

function Counter() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}

render(<Counter />, document.getElementById('root'))

Этот код должен быть знаком всем, API-интерфейс react hooks — это чудо

И я, естественно, одержим видеть API, которые обычное мышление не может понять, как реализовать.

Природа

Почему API реакции на хуки сложно реализовать, на самом деле суть в отсутствии этого

Если это vue, мы можем узнать, какой это компонент через сбор зависимостей, но реагировать не будет.

На самом деле в волокнах существуют реагирующие крючки.

принцип

Увы, я снова случайно упомянул клетчатку, так что смущает

По оптоволоконной сети довольно много статей, и большинство из них написано в тумане.Для хуков ключ лежит в обходе связного списка.

Разница между обходом связанного списка и рекурсивным обходом заключается в том, что связанный список может пройти через все узлы в одной цепочке.

Рекурсивные одноуровневые узлы отключены

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

философия дизайна

Ну про хуки я чуть выше сказал, вроде не по теме...

В центре внимания по-прежнему находится дизайн рамы! По сути, фреймворк — это разное сочетание личных предпочтений, вот и все.

	размер	составной	Обновление статуса
fre	1kb	hooks	Fiber
preact	3kb	class	diff
vue	10kb	SFC	Proxy + diff
react	33kb	class + hooks	Fiber

Выше посмотрите сначала таблицу, скоро начну писать композицию

составной

Для фреймворка очень важна компонентизация, например, react — это в основном схема классов, vue — это шаблонизатор и отдельный файл, fre — это функция...

Во-первых, мне очень не нравится шаблонизатор vue, это правда

Но у него есть и преимущества, такие как собственная среда выполнения, например, возможность управлять компиляцией сама по себе, и ее удобнее компилировать в небольшие программы.Я даже видел, что cml-фреймворк Диди напрямую использует теги, чтобы сделать полиморфный протокол ( при компиляции указать содержимое тега)

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

Тогда есть классовая схема реакции, которая поддерживается браузерами, но тоже имеет недостатки —

На самом деле получить класс в фреймворке размером 1kb сложно, в основном из-за того, что у класса есть события жизненного цикла, а также тяжелая голова контекста, а форма расширения класса относительно отчаянная, типа HOC, render реквизит, расширение и т. д.

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

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

Обновление статуса

Еще один элемент фреймворка, механизм обновления состояния, см. рисунок

После голосования видно, что осталось последнее решение react и vue3

Лично мне Sao API очень нравится, поэтому естественно выбрал прокси

Конечно, fre — это файбер, так что это не мой фаворит, но я ничего не могу поделать.Моя первая версия была сделана с помощью Proxy, а позже я обнаружил, что лучше держать ее в соответствии с реакцией... легко скопировать

Но больше всего мне нравится Proxy, без сомнения, я расскажу об этом позже.

vdom diff

Возьмите только diff и скажите ::>_<:: diff vue1.x preact vue2.x.>

Существует также реактивное волокно

На самом деле, для vue потребность в diff не очень велика, но точно так же и для react потребность в волокне не очень велика (⊙o⊙)…

Следовательно, для зрелых фреймворков этот механизм необходим только для высоко абстрактных унифицированных небраузерных сред.

Поэтому, если вы пишете фреймворк, я думаю, вы должны добавить слой vdom.

Приоритетное планирование

Я должен упомянуть о приоритетном планировании реакции, вообще говоря, он может избавиться от стека браузера, задачи с высоким приоритетом должны выполняться, а задачи с низким приоритетом требуют времени для выполнения.

Реализация этой схемы планирования зависит либо от волокон, либо от среды выполнения.

Так что на самом деле это могут сделать как react, так и vue.

Но мне не нравится время выполнения vue, а файбер какое-то время не может быть исправлен

Увы, так что внутренности fre - это еще микрозадача

Суммировать

Подводя итог, можно сказать, что различные схемы fre, взятые вместе, на самом деле имеют только 1 КБ со степенью завершенности ok.

Хотя API хуков великолепен, нет возможности скомпилировать его на нескольких концах.

И мне не очень нравится шаблон vue, и я все еще хочу заниматься планированием, так что... Если я хочу написать идеальный фреймворк, он будет выглядеть так:

Схема обновления состояния прокси, Sao
Схема компонентизации класса, всесторонне рассмотреть лучшую схему компонентизации
Использовать веб-компонент в качестве среды выполнения для планирования
Имейте vdom diff, используйте JSX

Вышеизложенное - мои мысли о новом фреймворке, пока не буду, давай!

Наконец, укажите адрес fre на github:

github.com/132yse/fre

Добро пожаловать в звезду и пр ::>_<::>