آیا تا به حال برای درک اینکه چگونه داده ها از طریق برنامه React شما جریان می یابد، تلاش کرده اید؟ حفاری پایه می تواند یک مقصر باشد.

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

این می‌تواند منجر به چالش‌هایی مانند سردردهای اشکال‌زدایی، رفتار غیرمنتظره جهش‌های پایه و اجزایی شود که به‌طور محکم با هم مرتبط هستند و استفاده مجدد از آنها دشوار است.

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

پروپ دریلینگ چیست؟

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

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

سناریویی را در نظر بگیرید که در آن یک مؤلفه سطح بالا دارید که داده‌ها را از یک API واکشی می‌کند و باید این داده‌ها را به مؤلفه‌های فرزند تودرتوی متعدد منتقل کند.

به جای انتقال مستقیم داده ها به هر جزء فرزند، آن را از طریق هر مؤلفه واسطه در سلسله مراتب عبور می دهید تا به مؤلفه فرزند مورد نظر برسد. این عبور پایه ها از سطوح مختلف اجزاء همان چیزی است که حفاری پایه مستلزم آن است.

بیایید این موضوع را با یک مثال توضیح دهیم:

 // ParentComponent.js import React from 'react'; import ChildComponent from './ChildComponent'; function ParentComponent() { const data = 'Hello from Parent'; return ( <div> <ChildComponent data={data} /> </div> ); } export default ParentComponent;

 // ChildComponent.js import React from 'react'; import GrandchildComponent from './GrandchildComponent'; function ChildComponent(props) { return ( <div> <GrandchildComponent data={props.data} /> </div> ); } export default ChildComponent;

 // GrandchildComponent.js import React from 'react'; function GrandchildComponent(props) { return <div>{props.data}</div>; } export default GrandchildComponent;

در این مثال، GrandchildComponent نیاز به دسترسی به data prop دارد، اما ParentComponent و ChildComponent از آن استفاده نمی‌کنند. با این حال، پایگاه data همچنان باید از طریق آنها منتقل شود.

چالش های حفاری سرپایی

پیچیدگی و کد دیگ بخار

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

 // Example of Prop Drilling const ParentComponent = () => { const data = fetchData(); // Assume fetching data from an API return ( <ChildComponentA data={data} /> ); }; const ChildComponentA = ({ data }) => { return ( <ChildComponentB data={data} /> ); }; const ChildComponentB = ({ data }) => { return ( <ChildComponentC data={data} /> ); }; // This continues...

کوپلینگ کامپوننت

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

سربار عملکرد

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

هر مؤلفه واسطه در سلسله مراتب باید در هنگام تغییر عناصر، دوباره رندر شود، که به طور بالقوه منجر به رندرهای مجدد غیرضروری و تأثیرگذاری بر عملکرد می شود.

چگونه بر حفاری سرپایی غلبه کنیم

چندین تکنیک برای غلبه بر حفاری پایه در React.js وجود دارد:

Context API : Context API React به شما این امکان را می دهد که داده ها را در درخت کامپوننت بدون عبور صریح از هر سطح از سلسله مراتب به اشتراک بگذارید. Context راهی برای انتقال داده ها از طریق درخت مؤلفه بدون نیاز به ارسال props به صورت دستی در هر سطح فراهم می کند.

کتابخانه‌های مدیریت دولتی : استفاده از کتابخانه‌های مدیریت دولتی مانند Redux یا MobX می‌تواند به متمرکز کردن و مدیریت وضعیت برنامه کمک کند و نیاز به حفاری پایه را کاهش دهد.

مولفه های مرتبه بالاتر (HOC) : HOC ها توابعی هستند که یک جزء را به عنوان ورودی می پذیرند و یک جزء جدید را با ویژگی ها یا عملکردهای اضافی برمی گردانند. می توان از آنها برای تزریق پایه ها بدون عبور مستقیم از هر جزء میانی استفاده کرد.

Render Props : Render props تکنیکی است برای به اشتراک گذاری کد بین اجزای React با استفاده از یک prop که مقدار آن یک تابع است. این به اجزا اجازه می دهد تا کد را بدون متوسل شدن به حفاری پایه به اشتراک بگذارند.

بیایید مثال قبلی را با استفاده از Context API تغییر دهیم:

 // MyContext.js import React from 'react'; const MyContext = React.createContext(); export default MyContext;

 // ParentComponent.js import React from 'react'; import ChildComponent from './ChildComponent'; import MyContext from './MyContext'; function ParentComponent() { const data = 'Hello from Parent'; return ( <MyContext.Provider value={data}> <ChildComponent /> </MyContext.Provider> ); } export default ParentComponent;

 // ChildComponent.js import React from 'react'; import GrandchildComponent from './GrandchildComponent'; import MyContext from './MyContext'; function ChildComponent() { return ( <MyContext.Consumer> {data => <GrandchildComponent data={data} />} </MyContext.Consumer> ); } export default ChildComponent;

 // GrandchildComponent.js import React from 'react'; import MyContext from './MyContext'; function GrandchildComponent() { return ( <MyContext.Consumer> {data => <div>{data}</div>} </MyContext.Consumer> ); } export default GrandchildComponent;

در این مثال بازسازی‌شده، ما از Context API برای تهیه و مصرف data بدون نیاز به انتقال دستی از طریق هر مؤلفه استفاده کرده‌ایم.

نتیجه

حفاری سرپایی ممکن است در ابتدا میانبر مناسبی به نظر برسد، اما عواقب آن می تواند مانع از نگهداری کد شما شود.

با استفاده از تکنیک‌هایی مانند Context API، کتابخانه‌های مدیریت وضعیت، یا قدرت رندر، به خود قدرت می‌دهید تا برنامه‌های React تمیز، قابل نگهداری و مقیاس‌پذیر بسازید.

کد نویسی مبارک!

در لینکدین با من ارتباط برقرار کنید.

خبرکاو