Feliz: Вопрос: Happy.ElmishComponents vs Happy.UseElmish

Итак, Feliz.ElmishComponents больше не очень полезен и предшествует Feliz.UseElmish . Причина этого в том, что изначально Feliz.ElmishComponents был компонентом на основе классов, который я переписал как функциональный компонент. Немного позже мы поняли, что если это функциональный компонент, то просто преобразовать его в ловушку. Так получилось Feliz.UseElmish . Итак, теперь Feliz.ElmishComponents - это просто функциональный компонент, вызывающий ловушку. Фактически, если вы посмотрите на проект за Feliz.ElmishComponents вы увидите, что теперь он

Большое спасибо, Коди !!! Так что, если я правильно понял, Feliz.UseElmish сейчас по умолчанию.

Да, у нас почти все еще есть Feliz.ElmishComponents чтобы не ломать людей. Вы можете считать его устаревшим.

Идеально! Еще раз спасибо!

Если он «устарел», было бы неплохо пометить его «Obselete» и перенаправить людей на рекомендуемый API.

Что вы думаете?

Да, мы просто обсуждаем с коллегами из команды F #, что нам стоит пиарить документацию (возможно, со ссылкой на этот вопрос)

Хорошо, я сделал это здесь - https://github.com/Zaid-Ajaj/Feliz/pull/264

Есть ли типичные сценарии, в которых вы бы выбрали один вместо другого? Мне нравится простота использования Feliz.UseElmish, и я просто боюсь, что мне здесь не хватает чего-то более интересного. 😄

Привет, Роман, хороший вопрос!

Разница, как упомянул Коди, заключается в том, что Feliz.UseElmish написано с помощью хуков, в отличие от полной компонентной реализации Feliz.ElmishComponents .

Однако это еще не все, потому что Feliz.UseElmish также следует _hook semantics_, когда дело доходит до повторной инициализации компонента за счет использования массива зависимостей в качестве последнего аргумента, что сильно отличается от Feliz.ElmishComponents , который не делает этого там, где повторная инициализация была хакерской: создание уникальных компонентных ключей из входных данных, yikes!

Feliz.UseElmish также можно комбинировать с другими хуками, такими как подписки, в том же компоненте.

Что я имею в виду под «повторной инициализацией»? Что ж, представьте, что вы загружаете компонент профиля пользователя на основе изменений URL следующим образом:

#/user=profile/{userId} -> UserProfile { UserId = userId }

По сути, мы хотим повторно инициализировать компонент UserProfile (вызывая init для сброса состояния) при изменении ввода UserId :

type UserProfileProps = { UserId : int }

let UserProfile = React.functionComponent("UserProfile", fun (props: UserProfileProps) -> 
  let state, dispatch = React.useElmish(init props.UserId, update, [| props.UserId |])
  Html.h1 (sprintf "UserProfile(UserId=%d)" props.UserId)
)

// later on application  entry: 

React.router [
  router.onUrlChange (parseUrl >> UrlChanged >> dispatch) 
  router.children [
     match state.CurrentUrl with
     | [ "user-profile"; Route.Int userId ] -> UserProfile { UserId = userId }
     | _ -> Html.h1 "Not found" 
  ]
]

Поскольку мы предоставляем массив зависимостей [| props.UserId |] для ловушки (третий аргумент для ловушки), компонент автоматически обновится и снова вызовет init чтобы сбросить цикл диспетчеризации Элмиша. Это то, что мы хотим, потому что init была функцией ввода props.UserId поэтому мы хотим вызывать ее снова, когда свойства компонентов изменяются.

Когда ни init ни функция update требуют дополнительных входных данных от свойств компонента, вы просто предоставляете пустой массив зависимостей:

let state, dispatch = React.useElmish(init, update, [| |])

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

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

Последний совет: Feliz.UseElmish действительно мощный инструмент, потому что он дает вам полноценный цикл диспетчеризации Elmish так же, как вы привыкли к традиционным Elmish-приложениям. Однако настройка типов для состояния и сообщений может быть слишком сложной, если ваши компоненты просты. Вам нужна пара государственных флагов? Тогда может быть достаточно пары переменных состояния с React.useState . Вам нужно получить и отобразить некоторые данные без дальнейшего взаимодействия? Тогда React.useDeferred может помочь. Я выберу Feliz.UseElmish для сложных страниц, которые имеют много событий и много взаимодействий.

Вау, типичный ответ Зайда. 😄 Тебе следует начать учить этим вещам, чувак! Я наконец могу понять. Еще раз спасибо! ❤️