3 اشتباه واکنش مبتدی که می تواند برنامه شما را خراب کند

React یک چارچوب محبوب است که یادگیری آن آسان است، اما اگر مراقب نباشید همچنان اشتباه کردن آسان است.

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

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

1. استفاده از نوع اشتباه عملکرد برگشت به تماس

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

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

export default function App() {
  function handleSubmit(e) {
    e.preventDefault()
    console.log("Form submitted!")
  }

  function print(number) {
    console.log("Print", number)
  }

  function doubler(number) {
    return () => {
      console.log("Double", number * 2)
    }
  }

  return (
    <>
      {/* Code will go here */}
    </>
  )
}

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

اکنون، با رفتن به JSX، اجازه دهید با اولین و رایج ترین روشی که می توانید یک تابع را به عنوان کنترل کننده رویداد ارسال کنید، شروع کنیم:

<form onSubmit={handleSubmit}>
  <input type="text" name="text" defaultValue="initial"/>
  <button>Submit</button>
</form>

این مثال نام تابع را از طریق برپایه onSubmit به رویداد منتقل می کند، بنابراین React هنگام ارسال فرم، handleSubmit را فرا می خواند. در داخل handleSubmit، می‌توانید به شی رویداد دسترسی داشته باشید، که به شما امکان دسترسی به ویژگی‌هایی مانند event.target.value و متدهایی مانند event.preventDefault().

راه دوم برای ارسال تابع کنترل کننده رویداد فراخوانی آن در داخل تابع callback است. در اصل، شما تابع onClick را ارسال می کنید که print() را برای شما فراخوانی می کند:

{[1, 5, 7].map((number) => {
  return (
    <button key={number} onClick={() => print(number)}>
      Print {number}
    </button>
  )
})}

این روش در سناریوهایی که می خواهید داده های محلی را به تابع منتقل کنید مفید است. مثال بالا هر عدد را به تابع print() منتقل می کند. اگر از روش اول استفاده می‌کردید، نمی‌توانید آرگومان‌ها را به تابع منتقل کنید.

روش سوم جایی است که بسیاری از توسعه دهندگان اشتباهات زیادی مرتکب می شوند. به یاد بیاورید که تابع doubler تابع دیگری را برمی گرداند:

function doubler(number) {
  return () => {
    console.log("Double", number * 2)
  }
}

حالا اگر از آن در JSX استفاده کردید به این صورت:

{[1, 5, 7].map((number) => {
  return (
    <button key={number} onClick={() => doubler(number)}>
      Double {number}
    </button>
  )
})}

در این حالت، تابعی که از double() برمی‌گردانید همان چیزی است که به onClick اختصاص داده می‌شود. این در اصل همانند کپی کردن تابع بازگشتی و چسباندن آن به صورت درونی در onClick است. این روش آخر هیچ مورد استفاده ای ندارد. اغلب اوقات، بهتر است تابع را به عنوان یک متغیر اضافه کنید (روش اول) یا تابع را در داخل یک callback فراخوانی کنید (روش دوم).

هر سه تکنیک معتبر هستند زیرا، در همه موارد، شما یک تابع را به رویداد منتقل می کنید. در React، باید مطمئن شوید که یک تابع را به یک ویژگی رویداد منتقل می کنید. این می تواند یک متغیر، یک تابع رمزگذاری شده (داخلی)، یا یک شی/تابع باشد که تابع دیگری را برمی گرداند.

2. خروجی صفر در حین بررسی کاذب

هنگامی که یک عنصر را به صورت شرطی در React رندر می کنید، می توانید از دستور if…else یا تکنیک اتصال کوتاه استفاده کنید. اتصال کوتاه شامل استفاده از آمپرسند دوگانه (&&) است. اگر شرط قبل از علامت علامت به درستی ارزیابی شود، مرورگر کد زیر علامت علامت را اجرا می کند. اگر نه، مرورگر هیچ کدی را اجرا نمی کند.

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

کد زیر را در نظر بگیرید:

export default function App() {
  const array = [1, 2, 3, 4]

  return (
    <div>
      {array.length && (
        <div>
          <span>Array items:</span> {array.join(", ")}
        </div>
      )}
    </div>
  )
}

تا زمانی که آرایه چیزی در داخل خود داشته باشد، React هر آیتم را در صفحه چاپ می کند. این به این دلیل است که بررسی array.length یک مقدار واقعی را برمی گرداند. اما اگر آرایه شما خالی باشد چه اتفاقی می افتد؟ ابتدا، عناصر بعدی در صفحه نشان داده می شوند، که همان چیزی است که شما انتظار دارید. با این حال، یک صفر عجیب را در صفحه نمایش خود خواهید دید.

دلیل آن این است که array.length صفر را برمی گرداند. مقدار صفر در جاوا اسکریپت نادرست است. و مشکل اینجاست که JSX روی صفحه نمایش صفر می دهد. سایر مقادیر نادرست مانند null، false و undefined رندر نمی شوند. این می تواند منجر به تجربه کاربری بدی شود زیرا صفر همیشه در صفحه ظاهر می شود. گاهی ممکن است صفر آنقدر کوچک باشد که حتی متوجه آن نشوید.

راه حل این است که مطمئن شوید که فقط null، undefined یا false را برگردانید. شما این کار را با بررسی صریح صفر در شرایط به جای تکیه بر یک مقدار نادرست انجام می دهید:

export default function App() {
  const array = [1, 2, 3, 4]

  return (
    <div>
      {array.length !== 0 && (
        <div>
          <span>Array items:</span> {array.join(", ")}
        </div>
      )}
    </div>
  )
}

حالا مقدار صفر حتی زمانی که آرایه خالی باشد روی صفحه نمایش داده نمی شود.

3. عدم به روز رسانی ایالت به درستی

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

این اشتباه ناشی از عدم درک نحوه به روز رسانی حالت هنگام استفاده از حالت موجود است. برای مثال کد زیر را در نظر بگیرید:

export default function App() {
  const [array, setArray] = useState([1, 2, 3])

  function addNumberToStart() {
    array.unshift(number)
    setArray(array)
  }

  function addNumberToEnd() {
    array.unshift(number)
    setArray(array)
  }

  return (
    <>
      {array.join(", ")}
      <br />
      <button
        onClick={() => {
          addNumberToStart(0)
          addNumberToEnd(0)
          console.log(array)
        }}
      >
        Add 0 to Start/End
      </button>
    </>
  )
}

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

این به این دلیل است که در هر دو تابع، وضعیت خود را با () array.push تغییر می دهید. React به صراحت هشدار می دهد که وضعیت باید در React تغییر ناپذیر باشد، به این معنی که شما به هیچ وجه نمی توانید آن را تغییر دهید. React از مقادیر ارجاعی با حالت خود استفاده می کند.

راه حل این است که به وضعیت فعلی (currentArray) دسترسی داشته باشید، یک کپی از آن وضعیت تهیه کنید و به روز رسانی های خود را در آن کپی انجام دهید:

function addNumberToStart(number) {
  setArray((currentArray) => {
    return [number, ...currentArray]
  })
}

function addNumberToStart(number) {
  setArray((currentArray) => {
    return [...currentArray, number]
  })
}

این روش مناسب برای به روز رسانی حالت در React است. حالا وقتی روی دکمه کلیک می کنید، صفر به شروع و انتهای آرایه اضافه می شود. اما مهمتر از همه، به روز رسانی ها بلافاصله در صفحه منعکس می شوند.

سایر مفاهیم مهم جاوا اسکریپت برای React

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

منبع مقاله