داستان یک جزء

مقدمه ای برای هر چارچوب با نوشتن یک مؤلفه ساده آغاز می شود. بیشتر اوقات ، این مؤلفه “پیشخوان کلیک” خواهد بود. این نوعی “سلام جهان” در دنیای توسعه جبهه است. به همین دلیل من آن را به عنوان پایه ای برای این ماده انتخاب کرده ام.

چندی پیش ، من تعجب کردم: آیا می توان برنامه های جبهه ای را به آسانی در React ایجاد کرد ، اما بدون رأی مجدد و لایه های پنهان برای محاسبات حالت و به روزرسانی های DOM ، با استفاده از فقط سازه های جاوا اسکریپت بومی؟

یافتن پاسخ به این سؤال و پالایش API چندین سال آزمایش ، بازنویسی همه چیز از ابتدا ، درک جوهر رویکرد و جهانی سازی روش.

بنابراین ، بدون آزار و اذیت بیشتر ، می خواهم کد را برای این مؤلفه ارائه دهم. در زیر ، من سه نسخه از همان مؤلفه را نشان می دهم.

نسخه 1

import { update } from '@fusorjs/dom';

const ClickCounter = (props) => {
  let state = props.count || 0;

  const self = (
    <button click_e={() => {state++; update(self);}}>
      Clicked {() => state} times
    button>
  );

  return self;
};

click_e یک کنترل کننده رویداد را تنظیم می کند ، در حالی که _ جداکننده به شما امکان می دهد تا پارامترهای مفید زیادی را تنظیم کنید ، مانند click_e_capture_once، اطمینان از سازگاری با استاندارد W3C.

عملکرد مؤلفه هنگام ایجاد یک بار نامیده می شود و به روزرسانی ها با کلیک رخ می دهد. علاوه بر این ، ما دولت را از خود کتابخانه “بلند کرده ایم” و اجازه می دهیم از هر استراتژی مدیریت دولت استفاده شود.

در اینجا نحوه استفاده از این مؤلفه به نظر می رسد:

import { getElement } from '@fusorjs/dom';

const App = () => (
  <div>
    <ClickCounter />
    <ClickCounter count={22} />
    <ClickCounter count={333} />
  div>
);

document.body.append(getElement(<App />));

در مرحله بعد ، من فکر کردم که مؤلفه من بسیار خوب به نظر می رسد ، اما ایجاد آن در React تقریباً به همان مقدار کد نیاز دارد. آیا راهی برای مختصر تر کردن آن وجود دارد؟

نسخه 2

در اینجا ، من فرایند تنظیم متغیر حالت را با استفاده از توانایی JavaScript در تخریب آرگومان های شیء در یک تابع ، ضمن اختصاص مقادیر پیش فرض ساده می کنم. علاوه بر این ، من از این واقعیت استفاده می کنم که پارامتر دوم یک عملکرد کنترل کننده رویداد می تواند مرجعی به شیئی که باعث ایجاد این رویداد شده است ، دریافت کند.

const ClickCounter = ({ count = 0 }) => (
  <button click_e={(event, self) => {count++; update(self);}}>
    Clicked {() => count} times
  button>
);

حالا راضی شدم. این بسیار جمع و جور تر از React بود. مخصوصاً اگر اضافه کنید useCallbackبرای عادلانه بودن ، از آنجا که مؤلفه عملکرد ما فقط یک بار اجرا می شود و کنترل کننده رویداد را بازآفرینی نمی کند.

دیر یا زود ، تحقق به من رسید …

نسخه 3

از این گذشته ، ما یک نحو جهانی برای تنظیم پارامترها در همه ویژگی های مؤلفه داریم ، بنابراین چرا یک پارامتر دیگر اضافه نمی کنیم: update؟

const ClickCounter = ({ count = 0 }) => (
  <button click_e_update={() => count++}>
    Clicked {() => count} times
  button>
);

اکنون این فقط نسخه عالی است. من مایل هستم شرط بندی کنم که هیچ چارچوبی دیگر نمی تواند یک مؤلفه جمع و جور و قابل استفاده مجدد با مدیریت دولت ایجاد کند. اگر از یکی می دانید ، لطفاً آن را در نظرات به اشتراک بگذارید.

در اینجا یک نمونه کار از مؤلفه ما آورده شده است.

پایان

این تمرین به درک این نکته کمک می کند که اجزای ساده حاوی دستیار رویداد نیازی به سیستم های مدیریت حالت واکنش پذیر مانند استفاده های Usestate ، سیگنال ها ، redux یا mobx ندارند. متغیرهای منظم برای آنها کافی است.

در اینجا نمونه دیگری از چنین مؤلفه ای آورده شده است:

const UppercaseInput = ({ value = "" }) => (
  <input 
    value={() => value.toUpperCase()}
    input_e_update={(event) => (value = event.target.value)}
  />
);

از نظر React ، این مؤلفه “ورودی مدیریت شده” نامیده می شود. می توانید آن را در اینجا به سبک جایگزین (نه JSX) امتحان کنید.

برای کاهش مصرف منابع ، از حالتهای واکنشی فقط در صورت لزوم استفاده می شود. به عنوان مثال ، هنگامی که چندین مؤلفه در قسمت های مختلف DOM از داده های مشابهی استفاده می کنند که باید به روز شوند.

این امر به راحتی با تنظیم یک پیشنهاد پاسخ به تماس با نام به دست می آید mount، که به سادگی استفاده است useState در واکنش در اینجا یک مثال مفصل در مورد توضیح این موضوع آورده شده است.

این پیوندها همچنین ممکن است برای شما مفید باشد:

با تشکر از توجه شما!