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

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

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

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

ریپازیتوری گیت هاب: https://github.com/mvcman/event-app

برای نصب پکیج‌ها:

$ npm install

برای اجرای پروژه:

$ npm start

هنگامی که برنامه را کلون و اجرا کردید، خروجی زیر را خواهید گرفت:

در GIF فوق می‌بینید که کاربر در حال افزودن یک رویداد جدید است. هنگامی که کاربر مقادیر را اضافه می‌کند و بر روی ارسال کلیک می‌کند، این رویداد به بک-اند اضافه می‌شود اما در فرانت-اند نمایش داده نمی‌شود. حتی می‌بینید که کاربر عملیات حذف و ویرایش را نیز انجام می‌دهد.

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

بعد از اینکه ریپازیتوری را درست شبیه سازی کردید. اکنون چند خط کد را در فایل App.js خود اضافه کرده و خواهید دید که چگونه مشکلات را حل می‌کند.

باید تابع ()newEvent را به روز کرده و یا آن را با کد زیر جایگزین کنید.

const newEvent = () => {
  const event = {
    name: name,
    date: date,
    time: time
 }
  axios.post('http://localhost:3001/events/', event)
    .then((res) => res)
    .then((data) => {
    console.log(data);
    setEvents((prev) => {
       const newEvent = [
        ...prev,
        data.data
        ];
        return newEvent;
      });
      reset();
      setOpenA(false);
    })
    .catch(err => console.log(err));
};

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

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

خطوط کد زیر را با تابع ()editEvent جایگزین کنید.

const editEvent = () => {
  const event = {
    name: name,
    date: date,
    time: time
  }
  axios.put(`http://localhost:3001/events/${selected}`, event)
    .then((res) => res)
    .then((data) => {
    console.log(data);
    setEvents((prev) => {
      const updatedEvent = prev.map((event) => {
        if(event.id === data.data.id) {
          return {
            ...data.data
          }
        }
        return event;
      });
      return updatedEvent;
    });
    reset();
    setOpenB(false);
    })
    .catch(err => console.log(err));
};

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

خطوط کد زیر را با تابع ()deleteEvent جایگزین کنید.

const deleteEvent = (id) => {
  console.log(id);
  axios.delete(`http://localhost:3001/events/${id}`)
    .then(data => {
      console.log(data);
      setEvents((prev) => prev.filter(event => event.id !== id));
    })
    .catch(err => err);
};

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

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

خروجی زیر را مشاهده کنید.