پروپ حفاری در React چیست؟

یو هو، دلهای من!!!

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

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

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

آغوش افق، با باد در پشت ما و خورشید در چهره ما. بیایید به اعماق حفاری سرپایی حرکت کنیم..

https://www.youtube.com/watch?v=ihb-27lRrwc

Props در React چیست؟

Props (معروف به “Properties”) ورودی اجزا هستند. آنها مقادیر منفرد یا اشیایی هستند که حاوی مجموعه ای از مقادیر هستند که در هنگام ایجاد مشابه ویژگی های تگ HTML به مؤلفه هایی منتقل می شوند. در اینجا، داده ها از یک جزء والد به یک جزء فرزند منتقل می شود.

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

تا نشون بدم منظورم چیه..

function Snake(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function DeadliestSnakes() {
  return (
    <div>
      <Snake name="Inland Taipan" />
      <Snake name="King Cobra" />
      <Snake name="Russell's Viper" />
      <Snake name="Black Mamba" />
    </div>
  );
}

بیایید حفاری پایه را درک کنیم

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

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

همانطور که می توانید تصور کنید، این فرآیند می تواند بسیار پیچیده و دشوار شود، به خصوص که برنامه شما در اندازه و پیچیدگی رشد می کند.

مشکلات حفاری پایه

حفاری سرپایی می‌تواند به چندین مشکل در پایگاه کد شما منجر شود، بیایید آن را آشکار کنیم:

تکرار کد

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

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

افزایش بار شناختی

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

این می تواند شناسایی و رفع اشکالات و همچنین ایجاد تغییرات یا به روز رسانی در پایگاه کد را دشوارتر کند.

کاهش قابلیت نگهداری

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

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

شکار پروپ دریلینگ برای کد واکنش پاک تر

راه های مختلفی وجود دارد که می توانید برای رفع حفاری پایه در پایگاه کد خود دنبال کنید. بیایید آن را روی سطح بیاوریم:

از کتابخانه مدیریت دولتی استفاده کنید

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

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

می توانید کد خود را برای استفاده از Redux تغییر دهید:

• یک فروشگاه Redux را تعریف کنید که لیستی از مارها را در خود جای دهد:

import { createStore } from "redux";

const initialState = {
  snakes: [],
};

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_SNAKE":
      return {
        ...state,
        snakes: [...state.snakes, action.payload],
      };

    case "DELETE_SNAKE":
      return {
        ...state,
        snakes: state.snakes.filter((snake) => snake.id !== action.payload.id),
      };

    case "TRACK_SNAKE":
      return {
        ...state,
        snakes: state.snakes.map((snake) => {
          if (snake.id === action.payload.id) {
            return { ...snake, tracked: true };
          } else {
            return snake;
          }
        }),
      };
    default:
      return state;
  }
}

const store = createStore(rootReducer);

• اجزای خود را به فروشگاه Redux با استفاده از connect() تابع:

import { connect } from "react-redux";

function SnakeList(props) {
  const { snakes } = props;

  return (
    <ul>
      {snakes.map((snake) => (
        <Snake key={snake.id} snake={snake} />
      ))}
    </ul>
  );
}

function mapStateToProps(state) {
  return {
    snakes: state.snakes,
  };
}

export default connect(mapStateToProps)(SnakeList);

• اعمال Redux را برای افزودن، حذف یا ردیابی مارها ارسال کنید:

function Snake({ snake, deleteSnake, trackSnake }) {

  const onTrackSnake = (id) => () => {
    trackSnake(id);
  };

  const onDeleteSnake = (id) => () => {
    deleteSnake(id);
  };

  return (
    <li>
      <input
        type="checkbox"
        checked={snake.tracked}
        onChange={onTrackSnake(snake.id)}
      />
      {snake.title} ({snake.tracked ? "Tracked" : "Not Tracked"})
      <button onClick={onDeleteSnake(snake.id)}>Delete</button>
    </li>
  );
}

function mapDispatchToProps(dispatch) {
  return {
    deleteSnake: (id) => dispatch({ type: "DELETE_SNAKE", payload: { id } }),
    trackSnake: (id) => dispatch({ type: "TRACK_SNAKE", payload: { id } }),
  };
}

export default connect(null, mapDispatchToProps)(Snake);

Context API را پیاده سازی کنید

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

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

می‌توانید از Context API برای اشتراک‌گذاری یک شی مار بین مؤلفه‌ها استفاده کنید:

• یک شی زمینه مار ایجاد کنید:

import { createContext } from 'react';

export const SnakeContext = createContext({
  name: "Black Mamba",
  fangs: "6.5 mm",
  speed: "12.5 miles per hour",
  color: "#964B00", // dark brown
});

• اجزای خود را در یک مؤلفه ارائه دهنده قرار دهید که زمینه مار را فراهم می کند:

function Jungle(props) {
  const snake = {
    name: "Black Mamba",
    fangs: "6.5 mm",
    speed: "12.5 miles per hour",
    color: "#964B00", // dark brown
  };

  return (
    <SnakeContext.Provider value={snake}>
      <Header />
      <Main />
    </SnakeContext.Provider>
  );
}

• استفاده کنید useContext() قلاب برای دسترسی به شی مار در اجزای فرزندتان:

import { useContext } from "react";

function Header() {
  const { color } = useContext(SnakeContext);

  return (
    <header style={{ backgroundColor: color }}>
      <h1>Snake</h1>
    </header>
  );
}

function Main() {
  const { name, fangs, speed } = useContext(SnakeContext);

  return (
    <main>
      <p>
        Name: <span>{name}</span>
      </p>
      <p>
        Venom Fangs: <span>{fangs}</span>
      </p>
      <p>
        Speed: <span>{speed}</span>
      </p>
    </main>
  );
}

متن به مقادیر ثابت محدود نمی شود. اگر مقدار متفاوتی را در رندر بعدی ارسال کنید، React تمام مؤلفه هایی را که آن را در زیر می خوانند به روز می کند!!! به همین دلیل است که متن اغلب در ترکیب با حالت استفاده می شود.

از موارد برای زمینه استفاده کنید:

1. موضوع بندی
2. حساب جاری
3. دولت مدیریت

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

در اقیانوس وسیع توسعه React، حفاری پایه می تواند یک چالش طوفانی برای حرکت باشد. اما کاپیتان های همکار من، نترسید! با ابزار و تکنیک های مناسب، می توانید بادبان های کد تمیز و کارآمد را بالا ببرید و برنامه React خود را به سمت آب های صاف تر هدایت کنید⛵️🌊

کد نویسی و حرکت آرام در ماجراجویی های React شما مبارک! 🚀🌟🌈🏴‍☠️

❤ انگیزه:

🍀حمایت کنید

لطفا با عضویت در کانال ما را دنبال کنید و از ما حمایت کنید. حمایت شما بسیار قابل قدردانی است و به ما کمک می کند تا به تولید محتوا برای لذت بردن شما ادامه دهیم. از شما برای پیشبرد حمایتتان سپاسگزاریم!

یوتیوب
اختلاف
GitHub