این پست برای دوستانیه که دارن React js یاد میگیرن. اول یه خسته نباشید ?
دیدی یه قسمت هایی هستش توی سایت ها تند تند یه شماره ای زیاد میشه بعد نوشته مثلا 90 دوره آموزشی... 1500 دقیقه آموزش رایگان.
میخوام خیلی ساده بهت بگم که چطوری توی ری اکت جی اس اینو اضافه کنیم.
○ اول از همه یدونه فایل js. میسازیم به عنوان کامپوننت. ینی کُل این عملکرد مدنظر ما رو داخل یه فایل جاوااسکریپتی مینویسیم. اسم فایل منو الان LandingCounter.js در نظر میگیریم.
این جدا نوشتن یا خود مفهوم کامپوننت باعث میشه ما این عملکرد رو یکبار بنویسیم و هرموقع هرجا نیاز داشتیم بتونیم دوباره ازش استفاده کنیم.
○ راستی بچه ها ما الان داریم توی "React js" کد میزنیم و از "فانکشنال کامپوننت ها" استفاده میکنیم پس اونجاهایی که من براش هیچی ننوشتم جزء ساختاری هستش که خود فانکشنال کامپوننت ها دارن.
کد پایین یه نمونه خیلی ساده و کار راه بندازیه. فقط کد رو ببینید سعی کنید کلمه ها رو بخونید و معنی کلمه هارو بدونید ترجیحاً.
من کنار هر خط کد عملکردهارو به زبون خودمونی مینویسم که راحت تر درکش کنیم بعد انتها کد اصلی این کامپوننت بدون زیرنویس! رو پایینتر قرار میدم.
برو بریم!
import React, { useEffect, useState } from 'react'
export default function LandingCounter({count}) {
// این قسمت ها جز ساختار فانکشنال کامپوننت هاست. فقط خط بالا یدونه پراپ به عنوان ورودی به این کامپوننت میدیم به اسم {count}. دقت کنید اوایل { } فراموش میشه.
const [courseCounter, setCourseCounter] = useState(0)
//یدونه استیت تعریف میکنیم اسمشو میذاریم courseCounter برای مقدار دهیش هم setCourseCounter رو مینویسیم با مقدار دیفالت 0. راستی یادت نره useState و useEffect رو بالا ایمپورت کنی.
//بعدش خط پایین یدونه useEffect درست میکنیم چون این عملکرد جزو ساید افکت هاست. (اینجا توضیح نمیدم) و داخلش یدونه let به اسم interval و داخل اون هم یدونه ست اینترول میخوایم بنویسیم.
خب؟ حالا میخوایم ست اینترول رو بنویسیم. (خط دومی کد پایین)
توی خط سوم کد پایین ما داریم اون استیتی که ساختیم رو تغییر میدیم. اینجوری میشه یه شمارنده درست کرد. توی prevCount مقدار قبلی ذخیره میشه و هر بار یکی بهش اضافه میشه. بعد از همون چند ثانیه که بهش دادیم.
useEffect(()=>{
let interval = setInterval(()=>{
setCourseCounter(prevCount=> prevCount+1)
},10);
تا اینجا اون استیت ما داره یدونه یدونه زیاد میشه
توی خط پایین میایم یه شرط میزاریم که هر موقع اون استیت ما که الان داره یدونه یدونه زیاد میشه با اون پراپی که توی ورودی فانکشن بهش دادیم {count} برابر بود clearInterval ینی دیگه ادامه نده، نشموره.
if(courseCounter === count){ //اینو دقت کن
clearInterval(interval) // کلیراینترول رو نوشتم داخل پرانتز اسم اون ست اینترول که گذاشتیم رو بهش میدیم که متوقفش کنه
بچه ها اتفاقای که useEffect میفته عملکردش توی حافظه میمونه (همین اندازه فعلا کافیه) خب؟ این ریترن رو برای این مینویسیم که بعد از اینکه این عملکرد تموم شد این Interval کلا متوقف بشه. دقت کن اونجا وقتی رسید به عددی که ما میخوایم متوقفش میکنیم. حالا وقتی کارش تموم شد هم استپش میکنیم. از حافظه حذفش میکنیم.
به این کار میگن clean up کردن useEffect.
return ()=> clearInterval(interval)
},[courseCounter]) //اینجا به عنوان ورودی دوم برای یوز افکت استیتی که ساختیم رو میدیم که بعد از هربار تغییر این استیت دوباره اجراش بشه (اگه براش استپ ننویسی میشه لوپ بی نهایت. هی تند تند میشموره میره بالا... هنگ میکنه)
اینجا توی قسمت return خود فانکشن اصلی یدونه span درست میکنیم.
حالا داخلش اون استیتی که درست کرده بودیم که در طول برنامه مقدار دهیش کردیم رو بخونه اینجوری
<span>{courseCounter}</span>
این فایل تموم شد. حالا هر جایی که خواستیم از این کامپوننت استفاده کنیم:
<LandingCounter count={180} />
داخل هر کامپوننتی که خواستی ازین قابلیت استفاده کنی مثل خط بالایی، count={180} رو هم بهش میدی و بجای اون 180 عدد دلخواهت.
اینو هرجا بزاری تا 180 میشماره! راستی LandingCounter اسم اون فایل js. منه که اون کامپوننت رو توش ساختم.
تموم! امیدوارم مفید بوده باشه ?
راستی فایل بدون زیرنویس فارسی! رو میزارم پایین
import React, { useEffect, useState } from 'react'
export default function LandingCounter({count}) {
const [courseCounter, setCourseCounter] = useState(0)
useEffect(()=>{
let interval = setInterval(()=>{
setCourseCounter(prevCount=> prevCount+1)
},10);
if(courseCounter === count){
clearInterval(interval)
}
return ()=> clearInterval(interval)
},[courseCounter])
return (
<span class="landing-status__count">{courseCounter}</span>
)
}
