Feliz: [<reactcomponent>] React refresh의 React.functionComponent 대</reactcomponent>

속성은 미래에 갈 길이 될 것이며 반응 새로 고침이 작동하는 데 필요합니다. 적어도 그게 그랬지만 @ Zaid-Ajaj가 차이가 없도록 분류했다고 생각 했습니까?

안녕하세요로만,

이것은 짧은 대답이없는 정말 좋은 질문입니다.

집에서 인터넷 문제를 해결 한 후에는 스트리밍을 다시 시작하여 극심한 세부 사항으로 설명하겠습니다 😁

더 나은 디버깅을 위해 구성 요소 이름을 지정할 수도 있으므로 문서를 기반으로 React.functionComponent 를 사용하여 구성 요소를 만드는 것이 좋습니다. 재미있는 것은 리 액트 리프레시와 함께 제공됩니다.

기본적으로 최신 펠리 즈와 유효 기간과 : 우선, 나는 문서 불행한 전환 상태에있는 것을 지적 할 [<ReactComponent>] 우리 종류의 문제 플러그인 컴파일러 밖으로 선 (善)까지 우화에 의해 사용되는 AST를 안정화 . 내가 말하려는 것은 문서 가 React.functionComponent 선호 하지 않으며 Fable 3를 사용하는 경우 대신 [<ReactComponent>] 를 사용해야한다는 것입니다.

이것은 자바 스크립트 코드가 생성되는 방식과 관련이 있습니다. 이제 다음 React 코드를 고려하십시오.

const App = ({ title }) => {
  return (
    <h1>{title}</h1>
  )
};

<App title="My React Application" />

이 JS (실제로는 JSX)는 다음 JS 코드로 desugars

import { createElement } from 'react'

const App = ({ title }) => {
  return createElement("h1", null, title);
};

// <App /> compiles to a call to createElement
createElement(App, { title: "My React Application" })

<App ... /> 를 통한 App 구성 요소의 초기화 는 JS에서 createElement 호출로 컴파일된다는 점에 유의해야합니다.

다음 두 가지 때문에 중요합니다.

• 구성 요소의 정의 와 생성을 분리합니다.
• App 가 정적 값이 될 수 있습니다 (React가 사용하는 ID가 예약 됨)

이제 React.functionComponent 구현 방식은 정의와 생성을 한 번에 결합하기 때문에 React에게 "나쁜"방식입니다. 이 F # 코드

let app React.functionComponent("App", fun (props: {|  tite: string |}) -> Html.h1 props.title)

다음과 같은 말과 같습니다.

let app = 
  let render(props: {|  tite: string |}) = 
    let renderFn props= Html.h1 props.title
    createElement(renderFn , props)
  render.displayName <- "App"
  render

이제 createElement 가 각 호출에서 동적으로 정의 된 구성 요소를 렌더링하고 함수 이름 자체를 사용하는 대신 함수의 displayName 를 변경하기 때문에이 "나쁜"것입니다.

React.functionComponent 사용하는이 구문 설탕은 React의 런타임 동작에 영향을 미치지 않으며, 이것이 React 애플리케이션을 빌드하는 데 문제없이 사용할 수있는 이유입니다. React 애플리케이션 주변의 TOOLING 이 생성 된 코드를 분석하기 시작하면 문제가 발생하기 시작합니다. webpack, babel, react-refresh는 모두 생성 된 코드를보고 여기저기서 약간의 마법을 주입하여 핫 모듈 교체를 가능하게하지만 React.functionComponent 생성 된 코드는 JS를 작성할 때 React 애플리케이션이 일반적으로 빌드되는 방식을 따르지 않기 때문에 불가능하며 React 주변의 많은 도구는 코드가 표준에 따라 작성되었다는 사실을 기반으로 가정합니다. 도구에 의해 생성 된 것보다 반응합니다.

이러한 문제에 대한 해결책은 컴파일러 플러그인을 통해 코드 컴파일을 사용자 정의 할 수있는 Fable 3에서 제공됩니다. Fable 3에서이 F # Feliz 코드를 고려한다면

[<ReactComponent>]
let app (title: string) = Html.h1 title 

app "My  React Application"

그런 다음이 JS와 동등한 것으로 컴파일됩니다 (더 많은 마술 때문에 정확하지 않습니다)

const App = (props) { 
   const title = props.title
   return createElement("h1", null, title)
}

createElement(App, { title: "My  React Application" })

이제이 생성 된 코드는 React 도구가 기대하는 것처럼 보이도록 사용자 정의됩니다.

• 기능 구성 요소의 정의 및 생성은 별개입니다.
• 구성 요소는 대문자로 정의됩니다 (예,이 역시 필요하며 컴파일러 플러그인이 자동으로 정의를 다시 작성합니다)
• 입력 매개 변수는 자동으로 React 소품으로 변환됩니다.

이 조합은 React 새로 고침을 작동하게 만들고 확장으로 Feliz의 경험을 네이티브 JS 또는 TS의 경험과 매우 가깝게 만듭니다. 이것이 혼란을 해결하기를 바랍니다. 더 궁금한 점이 있으면 알려주세요 😉

와! 그냥 ... 와우! 어리석은 사람은 어리석은 질문을하고 똑똑한 사람은 관련 정보와 설명이 가득한 3 장의 A4 용지로 대답합니다. 🤯 당신은 그냥 흔드는군요! 감사합니다! ❤️ 이제 이해하고 대신 Attribute를 사용할 것입니다.

어떻게 든 구성 요소의 이름을 지정하는 것이 좋습니까 ( React.functionComponent 의 첫 번째 매개 변수를 사용했던 것처럼) 아니면 속성 접근에 더 이상 필요하지 않습니까?

이제 이해하고 대신 Attribute를 사용할 것입니다.

대박! 문제가 발생하면 😉 지금 당장 알아야 할 유일한 문제는 입력 props가 React-refresh에 약간 문제가 될 수 있으므로 레코드 유형을 사용하는 것이므로 대신 익명 레코드를 사용하거나 기본 매개 변수를 사용할 수 있습니다. 경고없이 [<ReactComponent>] 문서를 작성할 수 있도록 문제가 곧 해결되기를 바랍니다.

어떻게 든 컴포넌트의 이름을 지정하는 것이 좋습니다 (React.functionComponent의 첫 번째 매개 변수를 사용했던 것처럼) 아니면 속성 접근에 더 이상 필요하지 않습니까?

아니요, 유일한 요구 사항은 구성 요소가 [<ReactComponent>] 함수 정의에 대해 수행하는 작업 중 하나 인 대문자 값으로 컴파일된다는 것입니다. : smile : 여기서 구현할 수

@Dzoukr 는 반응 구성 요소에 이름을 사용하는 유일한 이유는 디버그 도구를 개선하는 것입니다.

@Shmew Yup,하지만 그러한 이름을 추가하기 위해 ReactComponent 생성자에 과부하가 없기 때문에 요청한 것입니다.

따라서 [<ReactComponent>] 대 functionComponent 질문을 계속합니다 : 후크!

일부 상태를 초기화해야하는 구성 요소가 있습니다. 다행히도, 우리는 사용할 수있는 많은 좋은 후크가 있습니다! 나는 이것을 쓴다 :

[<ReactComponent>]
let Entrypoint() =
    let drawing, updateDrawing = React.useState(Deferred.HasNotStartedYet)
    let loader = React.useDeferredCallback((fun () -> loadDrawing()), updateDrawing)

    React.useEffect(loader, [||])
    // etc

아아, 이것을 실행하려고 할 때 콘솔이 슬프고 오류로 가득 차 있습니다.

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    React 

위의 반응 디버그 단계를 거쳤습니다. 사실이 아닌 것 같습니다. 작동해야합니까? 이것은 Fable 3 유일한 것입니까? (저는 여전히 Fable 2를 사용하고 있습니다.)

내 이해는 reactcomponent 속성이 우화 3 컴파일러 플러그인이기 때문에 작동하려면 우화 3이 필요하다는 것입니다.

@landy 아, 확실히 할 것입니다. Lemme는 Fable 3을 작동시키고 잠시 후에보고 할 것입니다.

야! 네, 저를 고쳤습니다. 이 PR 을 전환 가이드로 사용