milad 7212
milad 7212
خواندن ۱ دقیقه·۴ سال پیش

هوک در ریکت

اولین نوشته من هست .برای اینکه یادگیری خودم تثبیت پیدا کنه مینویسم

قبلاناااا میومدند و کامپونت را بصورت کلاس مینوشتند که ی کثیف بازی بود که بیا و ببین.

تو کامپونت را ی موجود زنده تصور کن که ی حافظه داره و ی طول عمر. حافظشو همه بهش میگن 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


reacthook
شاید از این پست‌ها خوشتان بیاید