Feliz: 질문: Happy.ElmishComponents 대 Happy.UseElmish

따라서 Feliz.ElmishComponents 는 더 이상 유용하지 않으며 Feliz.UseElmish 입니다. 그 이유는 원래 Feliz.ElmishComponents 가 클래스 기반 구성 요소였기 때문에 함수 구성 요소로 다시 작성했습니다. 조금 후에 우리는 그것이 함수 컴포넌트라면 그것을 후크로 변환하는 것이 간단하다는 것을 깨달았습니다. 그래서 Feliz.UseElmish 이 되었습니다. 이제 Feliz.ElmishComponents 는 실제로 후크를 호출하는 함수 구성 요소입니다. 사실, Feliz.ElmishComponents 에 대한 프로젝트를 보면 지금 은 있습니다 .

고마워, 코디!!! 따라서 내가 올바르게 얻는다면 Feliz.UseElmish 가 바로 지금 기본입니다.

네, 사람들을 해치지 않기 위해 여전히 Feliz.ElmishComponents 있습니다. 더 이상 사용되지 않는 것으로 간주할 수 있습니다.

완벽한! 다시 한번 감사합니다!

"더 이상 사용되지 않는" 경우 "사용하지 않음"으로 표시하고 사람들을 권장 API로 리디렉션하는 것이 좋습니다.

어떻게 생각해?

예, F# 팀의 동료와 문서에 대한 PR을 수행해야 한다고 논의 중입니다(이 문제에 대한 링크 포함).

좋아, 나는 여기에서 그것을했다 - https://github.com/Zaid-Ajaj/Feliz/pull/264

다른 대신 하나를 선택하는 일반적인 시나리오가 있습니까? 나는 Feliz.UseElmish의 사용이 간편하다는 것을 좋아하고 여기서 더 멋진 것을 놓치고 있지 않을까 하는 두려움이 있습니다. 😄

안녕하세요 로만, 좋은 질문입니다!

언급한 Cody와 같은 차이점은 Feliz.ElmishComponents 의 전체 구성 요소 구현과 달리 Feliz.UseElmish 가 후크로 작성된다는 것입니다.

그러나 그것이 전체 이야기는 아닙니다. Feliz.UseElmish 는 Feliz.ElmishComponents 큰 차이점인 마지막 인수로 종속성 배열을 사용하여 구성 요소를 다시 초기화할 때 _hook 의미론_을 따르기 때문입니다

Feliz.UseElmish 는 동일한 구성 요소의 구독과 같은 다른 후크와 결합할 수도 있습니다.

"재초기화"란 무엇을 의미합니까? 다음과 같이 URL 변경을 기반으로 사용자 프로필 구성 요소를 로드한다고 상상해 보십시오.

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

기본적으로 UserId 변경되면 UserProfile 구성요소를 다시 초기화하려고 합니다( init 를 호출하여 상태를 재설정함).

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 다시 호출하여 Elmish 디스패치 루프를 재설정합니다. 이것은 init 가 입력 props.UserId 의 함수였기 때문에 우리가 원하는 것이므로 구성 요소의 props가 변경될 때 다시 호출하고 싶습니다.

init 또는 update 함수 모두 구성 요소의 소품에서 추가 입력이 필요하지 않으면 빈 종속성 배열을 제공하기만 하면 됩니다.

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

이것은 일반적으로 응용 프로그램의 입력 구성 요소와 같이 외부에서 입력이 필요하지 않은 구성 요소에 사용됩니다.

종속성 배열에 익숙해지는 것이 약간 까다로울 수 있지만 많은 의미가 있습니다. 후크 문서에서 조건부로 효과 발생 에서 자세히 읽어보세요.

마지막 팁: Feliz.UseElmish 는 기존 Elmish 앱에 익숙한 것과 동일한 방식으로 완전한 Elmish 디스패치 루프를 제공하기 때문에 정말 강력합니다. 그러나 구성 요소가 단순할 때 상태 및 메시지에 대한 유형을 설정하는 것은 너무 많을 수 있습니다. 몇 가지 상태 플래그가 필요합니까? 그러면 React.useState 가 있는 몇 가지 상태 변수로 충분할 수 있습니다. 추가 상호 작용 없이 일부 데이터를 가져와 렌더링해야 합니까? 그러면 React.useDeferred 가 트릭을 수행할 수 있습니다. 이벤트가 많고 사용 상호 작용이 많은 복잡한 페이지에는 Feliz.UseElmish를 사용하겠습니다.

와우, 전형적인 Zaid의 반응입니다. 😄 당신은 그런 것들을 가르치기 시작해야 합니다. 드디어 이해할 수 있습니다. 다시 한번 감사합니다! ❤️