کد پاک در React – DEV Community

Summarize this content to 400 words in Persian Lang
سلام به همه، من خوان هستم و امروز می خواهم نکات و ترفندهایی را با شما در میان بگذارم که از آنها برای نوشتن کدهای قابل استفاده مجدد بیشتر استفاده می کنم. در 2 هفته گذشته، من در مورد چگونگی توسعه سریعتر پروژه ها و اینکه صرف زمان زیادی برای جستجوی کد کامل در ابتدای پروژه بی ربط است، می نویسم. اگرچه قرار نیست همیشه روی پروژه های خود کار کنید و گاهی عجله هم نخواهید داشت. یا شاید، فقط شاید، شما یکی از آن توسعه دهندگان پاسخگو هستید که پس از صرف زمان برای ایجاد چیزی شگفت انگیز در تنها 48 ساعت و به کارگیری استراتژی هایی که من به اشتراک گذاشتم، اکنون در نقطه ای هستید که باید آشفتگی های خود را برطرف کنید. ایجاد شده و با حداکثر سرعتی که می توانید در حال توسعه است.

پروژه مثالی که من می خواهم از آن استفاده کنم React است، اما شما می توانید بیشتر این موارد را عملاً در هر جایی که می خواهید اعمال کنید. من ساختارهای پوشه را نشان خواهم داد، معماری را که دنبال می‌کنم ذکر می‌کنم، و همچنین تکه‌های کد را با توضیحات و نمونه‌هایی از موارد متعدد ارائه خواهم کرد.

در صنعت چه خبر است؟

من خوش شانس بوده ام و به لطف آن در شرکت هایی با اندازه ها و سبک های مختلف کار کرده ام، برخی بزرگتر، برخی کوچکتر، اما در همه آنها، الگویی را دیدم که همه جا تکرار می شود: کد شکسته است. هیچ ساختاری وجود ندارد – منطق، سبک ها، انواع، همه چیز در یک مکان. وقتی شما فقط یک دسته فایل دارید، ممکن است مشکلی نباشد، اما زمانی که پایگاه کد شما غول‌پیکر است، رشد یا حفظ آن در طول زمان واقعاً آسان است.

در حال حاضر، من برای یک شرکت بزرگ با بیش از 29000 کارمند کار می کنم. شما انتظار ندارید چنین شرکتی اشتباهاتی را که من توضیح دادم انجام دهد، اما انجام می دهد. پس از صحبت با افرادی که از نظر تئوری می دانند چگونه یک پروژه را رهبری کنند و به حفظ یک پایگاه کد خوانا و مقیاس پذیر کمک کنند، به این نتیجه رسیدم که اکثر ما در مورد ساختار کد، دانش یا علاقه یا هر دو را نداریم. امیدواریم این پست به کسی کمک کند تا کد بهتری بنویسد و بداند چگونه یک پروژه را در طول زمان حفظ کند.

معماری که من استفاده می کنم – بیایید فریاد بزنیم

امیدواریم قبلاً در مورد این معماری شنیده باشید. نامیده می شود معماری فریادو نام آن شوخی نیست – به معنای واقعی کلمه بر سر شما فریاد می زند. وقتی وارد پروژه می‌شوید، بدون نیاز به اجرای پروژه، آنچه را که در حال انجام است، کاملاً خلاصه می‌کند. بگذار بهت نشان بدهم:

شایان ذکر است که من تغییراتی در آن ایجاد کردم معماری فریاد برای برآورده شدن بهتر نیازهای من، و این کاری است که شما هم می توانید انجام دهید. مثل همیشه، هیچ راه حل کاملی وجود ندارد، فقط راه حل هایی وجود دارد که ممکن است بهتر با مورد خاص شما سازگار شوند. با خیال راحت چیزهایی را که برای شما مفید هستند نگه دارید و بقیه را دور بریزید. اما وقتی این کار را انجام می دهید، با خودتان صادق باشید و این سوال را بپرسید: “آیا واقعاً این کار را به این دلیل انجام می دهم که بهتر است یا فقط به این دلیل که نمی خواهم چیز جدیدی یاد بگیرم؟”

توضیح ساختار اصلی:

در اجزاء پوشه، شما تمام اجزایی را که برای استفاده مجدد در برنامه خود نیاز دارید ایجاد خواهید کرد. اینها اجزای خاصی نیستند، و اگر قرار است آن را در آنجا قرار دهید، به این دلیل است که قبلاً از آن مؤلفه استفاده می‌کنید و می‌خواهید دوباره از آن در جای دیگری استفاده کنید.

در رابط ها پوشه، شما همه انواع خود را تعریف خواهید کرد. ما این کار را به این روش انجام می‌دهیم، زیرا اکثر اوقات، شما انواع را در کل برنامه خود به اشتراک می‌گذارید، بنابراین برای من چندان منطقی نیست که انواع را در یک پوشه عمیق‌تر داشته باشم.

در نهایت، در امکانات پوشه، بیشتر کد را به دنبال ساختار بازگشتی خواهید داشت:

همانطور که احتمالاً در اینجا می بینید، ما در حال ایجاد یک هستیم منطق فایل زیرا ما نمی خواهیم منطق برنامه ما به اجزای بصری ما نفوذ کند. بگذارید مثالی را به شما نشان دهم واکنش نشان دهید تا ببینید این چگونه کار می کند. مولفه ای که من به شما نشان خواهم داد این است پنجره. عرض پنجره کاربر ما را روی صفحه نمایش می دهد. متوجه خواهید شد که ما در اینجا تقریباً هیچ منطقی نداریم، فقط یک tag that is returning the width size of the screen.

import Logic from “./Logic”;

const Window = () => {
const { size } = Logic();
return p>{size}p>;
};

export default Window;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

و منطق اینجاست:

import { useState, useEffect } from “react”;
const Logic = () => {
const [size, setWindowSize] = useState(0);

useEffect(() => {
// get the windows width
setWindowSize(window.screen.width);
}, []);

return { size };
};

export default Logic;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما با موفقیت منطق و دیدگاه خود را جدا کرده ایم. افرادی خواهند بود که این را می خوانند و فکر می کنند که از جهاتی شبیه الگوی Model View Controller است و آنها درست می گویند. این واقعا مفید است و در بیشتر مواقع از داشتن فایلی که خواندن آن بسیار بزرگ است جلوگیری می کند. اما این یک گلوله نقره ای نیست، و مواردی وجود خواهد داشت که مجبور خواهید بود رویکردهای دیگری را در پیش بگیرید. پس بیایید مفاهیم و مثال های دیگر را ببینیم.

انتزاع و کپسوله سازی

وقتی برنامه نویسی را شروع کردم، یادم می آید که یکی از چیزهایی که بیشتر از همه از آن متنفر بودم این بود OOP (برنامه نویسی شی گرا). بنا به دلایلی نتوانستم آن را دریافت کنم. بیشتر اوقات از خودم می پرسیدم که چرا چنین چیزی را می نویسم. در مقطعی از زندگی ام این را فهمیدم OOP شگفت انگیز و واقعا مفید بود مفاهیمی مانند جامد یا انتزاع – مفهوم – برداشت ستون هر کدام بودند کد تمیز. بنابراین به همین دلیل، قبل از حرکت به برخی از کدهای تکه‌ای، مناسب می‌دانم که روی برخی از آن مفاهیم توقف کنم.

انتزاع – مفهوم – برداشت

این یکی از مهم ترین چیزهایی است که در لیست اولویت ها هنگام نوشتن بهترین کد ممکن به میان می آید، و همچنین در بیشتر مواقع یکی از فراموش شده ترین هاست. من افرادی را دیده ام که کدی را می نویسند که به طرز شگفت انگیزی مشکلی را که به آنها ارائه می شود حل می کند، اما وقتی شروع به نگاه عمیق تری می کنید و از خود (یا آنها) می پرسید که چگونه این کد قابل استفاده مجدد است، هیچ پاسخی پیدا نمی کنید. بیشتر اوقات، این به دلیل عدم درک درست است انتزاع – مفهوم – برداشت اصل

انتزاع را می توان به عنوان ظرفیت نادیده گرفتن چیزهای بدیهی و توجه لازم به جنبه های کلی تر چیزهایی که با آنها روبرو هستیم (تصویر بزرگ) درک کرد. اگر می خواهید یک لیوان آب را توصیف کنید، ممکن است بگویید: “این یک تکه ماده شفاف است که حاوی آب است” و در واقع، این درست است… در تصویر کوچک، اما در تصویر بزرگ بی فایده است. در عوض می توان گفت: “این قطعه ای از مواد است، با کمی هندسه، به ساختاری که می تواند حاوی مایعات باشد، با رنگ و شفافیت مشخص محدود شده است.” توصیف دوم می تواند خیلی بهتر از توصیف اول تعمیم دهد و به ما این فرصت را می دهد که از همان توصیف برای بسیاری از موارد استفاده کنیم. این هست انتزاع – مفهوم – برداشت، مهارت دیدن “تصویر بزرگ.” روی آن کار کنید، با فکر کردن به آن کد بنویسید و شما از آینده و افرادی که باید با شما کار کنند سپاسگزار خواهید بود.

آیا شما می بینید انتزاع – مفهوم – برداشت در مثال قبلی؟ دارد، اما شاید دیدن آن در وضعیت فعلی سخت باشد. اجازه دهید کمی تغییر بدهم و ببینم آیا آن را دریافت می کنید:

import { useState, useEffect } from “react”;
const useWindowSize = () => {
const [size, setWindowSize] = useState(0);

useEffect(() => {
// get the windows width
setWindowSize(window.screen.width);
}, []);

return { size };
};

export default useWindowSize;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

حالا به جای «منطق»، داریم استفاده از WindowSize. جدا کردن منطق از دیدگاه این فرصت را به ما می دهد تا متوجه شویم که یک قطعه کد داریم که قابل استفاده مجدد است. اکنون که این قلاب سفارشی را داریم که می‌توانیم دوباره از آن استفاده کنیم و خیلی بهتر آن را تعمیم دهیم، اگر آن را به کاربردها/ پوشه، تا بعداً بتوانیم دوباره از آن استفاده کنیم؟

کپسوله سازی

آیا به کسی اجازه دسترسی کامل به تلفن خود را می دهید؟ به احتمال زیاد شما نه گفتید. در غیر این صورت، شما دیوانه هستید زیرا با آن، هر شخصی می تواند حساب بانکی و لیست مخاطبین شخصی شما را وارد کند. ما نمی خواهیم این اتفاق بیفتد، بنابراین اجازه می دهیم مقداری مردم دسترسی داشته باشید بخشی از گوشی ما ما کل تلفن خود را در معرض دید همه قرار نمی دهیم. این دوست عزیز به شکلی پیچیده و خنده دار است کپسوله سازی. می توانید آن را به این صورت خلاصه کنید: “برخی می توانند آن را ببینند و لمس کنند، برخی فقط می توانند آن را ببینند.”

عالی است، این از بسیاری جهات برای کد شما مفید است. این کار مفید می شود، به خصوص زمانی که با افراد زیادی کار می کنید یا زمانی که کدی دارید که قرار است توسط شخص دیگری استفاده شود، مانند مورد React Library من.

حالا فهمیدیم چیه کپسوله سازی است. آیا می بینید که به هیچ وجه در ما اعمال می شود؟ استفاده از WindowSize? آره! فهمیدی. ما نگه می داریم setWindowSize خصوصی، فقط آن را برای کدهای داخل در دسترس قرار می دهد استفاده از WindowSize و هیچ کس دیگری این عالی است زیرا به این ترتیب، هیچ کس نمی تواند اندازه پنجره را به جز منطق کد ما تغییر دهد و آن را ایمن تر و قابل پیش بینی تر کند.

در نهایت – قطعه کد

متاسفم برای توقف OOP مفاهیم، ​​اما لازم است. شگفت انگیز است که چگونه این دو مفهوم می توانند زندگی شما را تغییر دهند. با دانش و درک جدیدی که اکنون داریم، می‌توانیم بهتر از کدی که قرار است ببینیم، قدردانی کنیم.

جای دیگه ندیدمش

کدی که قرار است به شما نشان دهم چیزی است که اخیراً شاید بیش از حد از آن استفاده می کنم و به دلایلی هیچ کس در مورد آن صحبت نمی کند. من به شما زمینه می دهم. آیا تا به حال متوجه شده اید که از یک کامپوننت کامل و قابل استفاده مجدد استفاده می کنید، اما هر بار باید منطق خاصی را دوباره پیاده سازی کنید زیرا باید از یک جزء بالاتر به آن دسترسی داشته باشید؟ نه؟ شاید فقط من… به هر حال راه حل را ببینیم.

type fields = “text” | “image” | “number”
interface ModalProps {
show: boolean;
fields: fields[] }

const Modal = ({ show, fields }: ModalProps) => (
return show ? div className=”modal”>
{fields.map((field) => {
// Modal code…
}}
div> : ”
)

const ImageGallery = () => {
const [show, setShow] = useState(false)
const images = […] return (

Modal show={show} fields={[“image”, “text”]}/>
{images.map((image, i) => {
img src={image} onClick={() => setShow(true)}/>
})}
>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

عالی، ما یک گالری تصاویر که از “زیبا” ما استفاده می کند معین. در این مورد، تصور کنید که مدال به صورت پویا یک فرم برای آپلود یک تصویر با توضیحات ایجاد می کند. حالا فرض کنید که من می خواهم صفحه دیگری را مشابه آن اضافه کنم گالری تصاویر، شاید یک نظرات بخش. من باید دوباره بنویسم نشان می دهد منطق. بیایید سعی کنیم از آن اجتناب کنیم:

type fields = “text” | “image” | “number”
interface ModalProps {
fields: fields[] }

const ModalHandler = () => (
const [show, setShow] = useState(false)
const Modal = ({ fields }: ModalProps) => (
show ? div className=”modal”>
{fields.map((field) => {
// Modal code…
}}
div> : ”)
return { Modal, show, setShow }
)

const ImageGallery = () => {
const { show, setShow, Modal } = ModalHandler()
const images = […] return (

Modal fields={[“image”, “text”]}/>
{images.map((image) => {
img src={image} onClick={() => setShow(true)}/>
})}
>
)
}

const Comments = () => {
const { show, setShow, Modal } = ModalHandler()
const comments = […] return (

Modal fields={[“text”]}/>
{comments.map((comment) => {
p onClick={() => setShow(true)}>
{comment}
/p>
})}
>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ما آن را انجام دادیم! در این مورد، این یک سناریوی بیش از حد است زیرا فقط یک نمایش و setShow که ممکن است در هر موردی دوباره اجرا شود، اما نکته مهم مفهوم است. با این رویکرد، ما می توانیم اجزای قابل استفاده مجدد بیشتری ایجاد کنیم، و حداقل برای من، خواناتر از آن است الگوی ترکیب. در مورد آن، چرا نگاهی نمی اندازیم:

الگوی ترکیب

بیایید یک شبکه برای پیش نمایش تصاویر ایجاد کنیم:

const ImageGrid = ({ images }) => {
const handleAnimations = useCallback(() => {
…
}, [])

useEffect(() => {
handleAnimations()
}, [])

const complexGridLogic = () => {
…
}

return (
div className=”magic-grid”>
{complexGridLogic()}
{images.map((image, i) => {
div className=”animated-container” id={`animate-${i}`}>
img src={image}/>
/div>
})}
div>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

عالی است، ما ImageGrid خود را داریم (باز هم، این فقط یک مفهوم است). تصاویر را سوار می کند و سپس آنها را متحرک می کند. همچنین دارای یک “complexGridLogic”. حالا بیایید بگوییم که من یک می خواهم نظرات گرید با رفتار بسیار مشابه چه مشکلی. بیایید ببینیم چگونه الگوی ترکیب می تواند ما را نجات دهد:

const AnimatedContainer = ({ children, id }) => {
const handleAnimations = useCallback(() => {
…
}, [])

useEffect(() => {
handleAnimations()
…
}, [])

return div className=”animated-container” id={id}>{children}div>
}

const MagicGrid = ({ children }) => {
const complexGridLogic = () => {
…
}
return (
div className=”magic-grid”>
{complexGridLogic()}
{children}
div>
)
}

const ImageGallery = ({ images }) => {
return (
MagicGrid>
{images.map((image) => (
AnimatedContainer id={image}>
img src={image}/>
AnimatedContainer>
))}
MagicGrid>
)
}

const CommentSection = ({ comments }) => {
return (
MagicGrid>
{comments.map((comment) => (
AnimatedContainer id={comment}>
p>{comment}p>
AnimatedContainer>
))}
MagicGrid>
)
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

من آن را می بینم و دوستش دارم. چه دنیای شگفت انگیزی می شد اگر همه به اندازه من و شما به کدمان اهمیت می دادند. اکنون 2 جزء قابل استفاده مجدد و 2 پیاده سازی داریم که کاملاً قابل استفاده مجدد هستند. این همچنین چیزی به ما داد به نام:

تفکیک نگرانی ها

در ابتدای این پست ساختاری را که دوست دارم برای پروژه هایم استفاده کنم را به شما نشان دادم. من فکر می کنم از بسیاری چیزهای بیرون قابل درک و تمیزتر است، و بخش بزرگی از آن به لطف این است تفکیک نگرانی ها، اصلی که همیشه سعی می کنم از آن پیروی کنم. می توانید آن را به صورت خلاصه بیان کنید: مسئولیت اعمال دیگران را به عهده نگیرید. به همین راحتی است. را دکمه نباید منطق آن را داشته باشد ورودی، بدیهی است، و توری نباید مسئول رندر کردن تصاویر شما باشد، بلکه در عوض هر کودکی را رندر کند.

واقعاً به همین راحتی است و بنا به دلایلی، گاهی اوقات با یک همکار تصادفی در مورد آن بحث می کنم (این اتفاق هفته گذشته برای من افتاد).

بسته شدن

من دارم این پست را تمام می کنم، و احساس می کنم چیزی در آن وجود دارد، اما مطمئن نیستم که چیست. من این احساس را دارم که سعی کرده‌ام جنبه‌های زیادی را پوشش دهم که نتوانستم در هیچ یک از آنها عمیق‌تر صحبت کنم. بنابراین اگر علاقه مندید که من در مورد برخی از این جنبه ها بیشتر صحبت کنم، به من اطلاع دهید.

قبل از اینکه بری

من به این فکر می کنم که در X پست بگذارم. آیا شما من را دنبال می کنید؟ پیشاپیش از شما متشکرم و اگر واقعا از این پست لذت بردید به من کمک می کنید تا کرایه خانه ام را پرداخت کنم؟

import Logic from "./Logic";

const Window = () => {
  const { size } = Logic();
  return p>{size}p>;
};

export default Window;

import { useState, useEffect } from "react";
const Logic = () => {
  const [size, setWindowSize] = useState(0);

  useEffect(() => {
    // get the windows width
    setWindowSize(window.screen.width);
  }, []);

  return { size };
};

export default Logic;

import { useState, useEffect } from "react";
const useWindowSize = () => {
  const [size, setWindowSize] = useState(0);

  useEffect(() => {
    // get the windows width
    setWindowSize(window.screen.width);
  }, []);

  return { size };
};

export default useWindowSize;

type fields = "text" | "image" | "number"
interface ModalProps {
    show: boolean;
    fields: fields[]
}

const Modal = ({ show, fields }: ModalProps) => (
    return show ? div className="modal">
        {fields.map((field) => {
            // Modal code...
        }}
    div> : ''
)

const ImageGallery = () => {
    const [show, setShow] = useState(false)
    const images = [...]
    return (
        
            Modal show={show} fields={["image", "text"]}/>
            {images.map((image, i) => {
                img src={image} onClick={() => setShow(true)}/>
            })}
        >
    )
}

type fields = "text" | "image" | "number"
interface ModalProps {
    fields: fields[]
}

const ModalHandler = () => (
    const [show, setShow] = useState(false)
    const Modal = ({ fields }: ModalProps) => (
        show ? div className="modal">
            {fields.map((field) => {
                // Modal code...
            }}
        div> : '')
    return { Modal, show, setShow }
)

const ImageGallery = () => {
    const { show, setShow, Modal } = ModalHandler()
    const images = [...]
    return (
        
            Modal fields={["image", "text"]}/>
            {images.map((image) => {
                img src={image} onClick={() => setShow(true)}/>
            })}
        >
    )
}

const Comments = () => {
    const { show, setShow, Modal } = ModalHandler()
    const comments = [...]
    return (
        
            Modal fields={["text"]}/>
            {comments.map((comment) => {
                p onClick={() => setShow(true)}>
                    {comment}   
                /p>
            })}
        >
    )
}

const ImageGrid = ({ images }) => {
    const handleAnimations = useCallback(() => {
        ...
    }, [])

    useEffect(() => {
        handleAnimations()
    }, [])

    const complexGridLogic = () => {
        ...
    }

    return (
        div className="magic-grid">
            {complexGridLogic()}
            {images.map((image, i) => {
                div className="animated-container" id={`animate-${i}`}>
                    img src={image}/>
                /div>
            })}
        div>
    ) 
}

const AnimatedContainer = ({ children, id }) => {
    const handleAnimations = useCallback(() => {
        ...
    }, [])

    useEffect(() => {
        handleAnimations()
        ...
    }, [])

    return div className="animated-container" id={id}>{children}div>
}

const MagicGrid = ({ children }) => {
    const complexGridLogic = () => {
        ...
    }
    return (
        div className="magic-grid">
            {complexGridLogic()}
            {children}
        div>
    )   
}

const ImageGallery = ({ images }) => {
    return (
        MagicGrid>
            {images.map((image) => (
                AnimatedContainer id={image}>
                    img src={image}/>
                AnimatedContainer>
            ))}
        MagicGrid>
    )
}

const CommentSection = ({ comments }) => {
    return (
        MagicGrid>
            {comments.map((comment) => (
                AnimatedContainer id={comment}>
                    p>{comment}p>    
                AnimatedContainer>
            ))}
        MagicGrid>
    )
}