اولین نوشته من هست .برای اینکه یادگیری خودم تثبیت پیدا کنه مینویسم
قبلاناااا میومدند و کامپونت را بصورت کلاس مینوشتند که ی کثیف بازی بود که بیا و ببین.
تو کامپونت را ی موجود زنده تصور کن که ی حافظه داره و ی طول عمر. حافظشو همه بهش میگن state - شما هم بگو state چرخه حیاتش هم که فعلا کاریش نداریم.
هوک میاد و مثل ی سوپر من میگه من اینجاممم تا مدیریت کنم حافظه این کامپونت را (خدا خیرش بده) حالا کارش چجوریه :
اول که اگه زحمتی نیست ی ایمپورت بزن:
import React, {useState} from 'react';
بعدش اون مقادیری که مال این کامپونت هستند و میخوان تغییر کنند را به این هوک جان تعریف میکنیم.
useState
همان هوکه
const[a,setA] =useState(10);
اینجا چکار کردم.
اومدم گفتم اقای هوک ببین عزیزم من داخل این کامپونتم یک متغییر دارم بنام a .
هوک:خیله خب مابقیش.
اهان ببخشید .مقدار دهی اولیش هم که دوست دارم عدد ۱0 باشه .این را باید داخل گوشش بگی useState(10 )
هوک: خب
بنده خدا حق داره باید بهش ی نشونه بگم تو اون همه کد که نمیتونه 24 ایی نگاه کنه و دنبال a بگرده. میگم بهش من هر جا گفتم setA بدون که به این متغییر a ربط داره . واگه دیدی تغییری دارم انجام میدم تمام a ها را برام بکش بیرون و تغیرشون بده.
هوک: باشه عزیزم تو فقط مواظب خودت باش
اینجا هم ی برنامه فوق ساده اوردم ی دکمه است که بزنی روش ی عدد برات اضافه میشه.
import React, {useState} from 'react'
function App() {
const[a,setA] =useState(10);
return (
<div>
<button ={() => setA(a+1)}>
{a}
</button>
</div>
)
}
export default App