وضعیت بالا بردن: چگونه اجزای کودک با والدین ارتباط برقرار می کنند

جداسازی کد کامپوننت توسط React یک سیستم قوی ایجاد می‌کند، اما گاهی اوقات باید قوانین را تغییر دهید.

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

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

کامپوننت ها در React

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

<ParentComponent>
  <ChildComponent/>
</ParentComponent>

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

مولفه زیر به نام CounterButton را در نظر بگیرید:

const CounterButton = () => {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount(count + 1)
  }

  return (
    <button onClick={handleIncrement}>Increment</button>
  )
}

مولفه یک مقدار حالت به نام count را حفظ می کند که هر بار که کاربر روی دکمه کلیک می کند افزایش می یابد.

فرض کنید کامپوننت CounterButton را در کامپوننت دیگری به نام Home قرار داده اید:

const Home = () => {
  return (
   <CounterButton/>
  )
}

اگر می‌خواهید مقدار شمارش را از مؤلفه CounterButton در داخل مؤلفه Home نمایش دهید، با یک چالش مواجه می‌شوید.

همانطور که گفته شد، React یک جریان داده یک طرفه را از والدین به فرزند اعمال می کند. بنابراین، مؤلفه CounterButton نمی تواند مستقیماً مقدار حالت شمارش را با مؤلفه Home به اشتراک بگذارد.

برای دور زدن این موضوع، باید وضعیت را بالا ببرید.

نحوه بالا بردن حالت برای به اشتراک گذاشتن داده ها بین اجزا

حالت بلند کردن به انتقال وضعیت یک جزء بالاتر از درخت جزء، به یک جزء والد اشاره دارد. هنگامی که حالت را بلند کردید، می توانید آن را به عنوان مقادیر prop به اجزای فرزند منتقل کنید.

در مثال شمارنده قبلی، باید حالت شمارش و تابع handleIncrement را به مولفه Home منتقل کنید. سپس باید تابع handleIncrement را به عنوان یک پایه به مولفه CounterButton منتقل کنید.

const Home = () => {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount(count++)
  }

  return (
    <CounterButton handlerIncrement={handleIncrement]/>
    <p>{count}</p>
  )
}

در مرحله بعد، باید مولفه CounterButton را تغییر دهید تا تابع handleIncrement را بپذیرد و زمانی که کاربر روی دکمه کلیک کرد، آن را فراخوانی کنید.

const CounterButton = ({handleIncrement}) => {
  return (
    <button onClick={handleIncrement}>Increment</button>
  )
}

برداشتن ایالت داده ها را متمرکز می کند و مسئولیت مدیریت دولت را از کودک به والدین منتقل می کند.

علاوه بر کمک به نمایش داده‌ها در مؤلفه والد، افزایش وضعیت می‌تواند به شما کمک کند داده‌ها را در چندین مؤلفه همگام‌سازی کنید.

فرض کنید، یک کامپوننت Header و Footer درون کامپوننت والد تودرتو داشتید و هر یک از این مؤلفه‌ها نیز تعداد اشتراک‌گذاری شده را نشان می‌دهند. برای به اشتراک گذاشتن این مقدار، می توانید آن را به عنوان props به این مؤلفه ها منتقل کنید.

const Home = () => {
  const [count, setCount] = useState(0)

  const handleIncrement = () => {
    setCount(count++)
  }

  return (
    <Header count={count}/>
    <CounterButton handlerIncrement={handleIncrement]/>
    <Footer count={count}/>
  )
}

با این حال، شما باید مراقب باشید که حالت را بلند کنید تا در موقعیتی قرار نگیرید که به عنوان حفاری پایه شناخته می شود.

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

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

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

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

به اشتراک گذاری داده ها در React با استفاده از Props

هنگامی که نیاز دارید داده‌های یک مؤلفه فرزند را با مؤلفه والد آن به اشتراک بگذارید، حالت را به مؤلفه والد ارتقا دهید و سپس تابعی را که وضعیت را به‌روزرسانی می‌کند به مؤلفه فرزند به عنوان props ارسال کنید.

در مواردی که کامپوننت فرزند عمیقاً در درخت کامپوننت تو در تو قرار دارد، از یک ابزار مدیریت حالت مانند React Context یا یک ابزار شخص ثالث مانند React Redux برای جلوگیری از حفاری پایه استفاده کنید.

منبع مقاله