Feliz: [<reactcomponent>] مقابل React.functionComponent في تحديث React</reactcomponent>

تم إنشاؤها على ٢٥ نوفمبر ٢٠٢٠ · 10تعليقات · مصدر: Zaid-Ajaj/Feliz

مرحبا يا صديقي،

بصفتي مطورًا ساذجًا للواجهة الأمامية ، جئت إلى سلوك مثير للاهتمام:

استنادًا إلى مستنداتك ، أفضل استخدام React.functionComponent لإنشاء مكونات لأنه يمكنني أيضًا تحديد اسم المكون لتصحيح الأخطاء بشكل أفضل. شيء مضحك يأتي مع رد الفعل التحديث.

يؤدي رمز مثل هذا دائمًا إلى إعادة تحميل الصفحة بالكامل عند إجراء أي تغيير في الكود:

let subView = React.functionComponent("SubView", fun () ->
    Html.text "Hello from sub"
)

let topView = React.functionComponent("TopView", fun () ->
    Html.div [ Html.div "Hello from top"; subView () ]
)

لكن وجود مكون جذر [<ReactComponent>] سيجعل كل التحديثات تعمل بشكل رائع دون إجراء تحديث كامل.

let subView = React.functionComponent("SubView", fun () ->
    Html.text "Hello from sub"
)

[<ReactComponent>]
let topView () = Html.div [ Html.div "Hello from top"; subView () ]

هل هي حشرة؟ هل هو خطأ في ربطة عنق سوداء فاخرة ويعرف أيضا باسم الميزة؟ هل هذا كله خطأي لأنني لا أفهم الفرق بين سمة ReactComponent و React.functionComponent function؟ 😄

شكرا لأي نوع من المساعدة لفهم أفضل.

question

مصدر

Dzoukr

التعليق الأكثر فائدة

رائع! فقط ... رائع! يسأل شخص سخيف سؤالًا غبيًا وإجابات رجل ذكي بثلاث أوراق A4 مليئة بالمعلومات والتفسيرات ذات الصلة. 🤯 أنت فقط صخرة يا رجل! شكرا جزيلا! ❤️ فهمت الآن وسأبدأ في استخدام السمة بدلاً من ذلك.

هل لا يزال يوصى بتسمية المكونات بطريقة ما (مثلما فعلنا باستخدام المعلمة الأولى React.functionComponent ) أم أن هذا لم يعد ضروريًا بعد الآن لنهج السمة؟

Dzoukr في ٢٦ نوفمبر ٢٠٢٠

👍6 ❤4

ال 10 كومينتر

ستكون السمة هي السبيل للذهاب في المستقبل ، وهي ضرورية لتفعيل رد الفعل-التحديث. على الأقل ، هكذا كان الأمر لكنني اعتقدت أن @ Zaid-Ajaj قد تم تسويته حتى لا يكون هناك فرق؟

Shmew في ٢٥ نوفمبر ٢٠٢٠

مرحبا رومان ،

هذا سؤال جيد حقًا لا توجد إجابة مختصرة له ، ها نحن ذا.

على الرغم من أنني بمجرد حل مشكلات الإنترنت الخاصة بي في المنزل ، سأستأنف البث مرة أخرى حيث أشرح ذلك بتفاصيل مؤلمة 😁

استنادًا إلى مستنداتك ، أفضل استخدام React.functionComponent لإنشاء مكونات لأنه يمكنني أيضًا تحديد اسم المكون لتصحيح الأخطاء بشكل أفضل. شيء مضحك يأتي مع رد الفعل التحديث.

بادئ ذي بدء ، أود أن أشير إلى أن الوثائق في حالة انتقالية مؤسفة: لقد عفا عليها الزمن بشكل أساسي مع أحدث إصدار من Feliz و [<ReactComponent>] حتى نفرز مشكلات المكون الإضافي للمجمع وتثبيت AST المستخدم بواسطة Fable . ما أحاول قوله هو أن المستندات لا تفضل React.functionComponent وإذا كنت تستخدم Fable 3 ، يجب أن تبدأ في استخدام [<ReactComponent>] بدلاً من ذلك.

هذا له علاقة بكيفية إنشاء كود جافا سكريبت. الآن ضع في اعتبارك هذا الجزء من كود React:

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

<App title="My React Application" />

هذا JS (والذي هو في الواقع JSX ) ينزل إلى كود JS التالي

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 ... /> يتم تجميعها لاستدعاء createElement من JS.

إنه مهم لسببين:

يفصل تعريف المكون عن إنشائه
تسمح لـ App أن تكون قيمة ثابتة (الهوية محجوزة والتي تستخدمها React)

الآن ، الطريقة التي يتم بها تنفيذ 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 في تحليل الكود الذي تم إنشاؤه: webpack ، و babel ، و response-Refresh كلها أدوات تبدو في الكود الذي تم إنشاؤه ، وتضخ بعض السحر هنا وهناك لجعل استبدال الوحدة الساخنة ممكنًا ولكن باستخدام React.functionComponent غير ممكن لأن الكود الذي تم إنشاؤه لا يتوافق مع كيفية إنشاء تطبيقات React عادةً عندما تكتب JS والعديد من الأدوات حول React تضع افتراضات بناءً على حقيقة أن الكود مكتوب وفقًا للمعيار رد فعل على ذلك مما تم إنشاؤه بواسطة أداة.

يأتي حل هذه المشكلات في Fable 3 حيث يُسمح لنا بتخصيص تجميع الشفرة عبر مكونات إضافية للمترجم. إذا كنت تفكر في كود F # Feliz في Fable 3

[<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 الأصلية. آمل أن يزيل هذا الالتباس. إذا كان لديك المزيد من الأسئلة ، فيرجى إبلاغي بها 😉

Zaid-Ajaj في ٢٦ نوفمبر ٢٠٢٠

❤1 👍1

Dzoukr في ٢٦ نوفمبر ٢٠٢٠

👍6 ❤4

فهمت الآن وسأبدأ في استخدام السمة بدلاً من ذلك.

رائع! اسمح لي إذا واجهت أي مشكلة - في الوقت الحالي ، فإن المشكلة الوحيدة التي يجب أن تكون على دراية بها هي استخدام نوع سجل حيث ستكون أدوات الإدخال مشكلة بعض الشيء في تحديث React ، لذلك يمكنك استخدام سجل مجهول بدلاً من ذلك أو معلمات أولية. آمل أن يتم إصلاح المشكلة قريبًا حتى أتمكن من توثيق [<ReactComponent>] بدون أي محاذير.

هل لا يزال من المستحسن تسمية المكونات بطريقة ما (كما فعلنا باستخدام المعلمة الأولى لـ React.functionComponent) أم أن هذا لم يعد ضروريًا بعد الآن لنهج السمة؟

لا ، المطلب الوحيد هو أن يتم تجميع المكونات كقيم بالأحرف الكبيرة وهو أحد الأشياء التي يقوم بها [<ReactComponent>] لتعريف الوظيفة: ابتسم: يمكنك التنفيذ هنا

Zaid-Ajaj في ٢٦ نوفمبر ٢٠٢٠

Dzoukr السبب الوحيد لاستخدام أسماء لمكونات التفاعل هو تحسين أدوات التصحيح.

Shmew في ٢٦ نوفمبر ٢٠٢٠

👍1

Shmew Yup ، ولكن لا يوجد حمل زائد على مُنشئ ReactComponent لإضافة مثل هذا الاسم ، لذلك يُطلب منك ذلك.

Dzoukr في ٢٧ نوفمبر ٢٠٢٠

لذا ، متابعة الأسئلة [<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

لقد مررت بخطوات تصحيح أخطاء التفاعل أعلاه ؛ لا يبدو أن أي شيء يكون صحيحًا. هل يجب أن يعمل هذا؟ هل هذا هو الشيء الوحيد الخرافة 3؟ (ما زلت أستخدم Fable 2.)