استفاده از useRef در react hooks
سلام. من توی یه کال بک فانکشنی به خاطر اینکه useState آپدیت نمیشد با سرچ فهمیدم که باید از useRef استفاده کنم. با اینکه استفاده کردم و نتیجه هم گرفتم ولی هنوز درست نمیدونم که useRef چیه و چیکار میکنه ؟ ممنون میشم توضیح بدین.
@kamran.davar
import React, { useState, useEffect, useRef } from 'react';
const stateRefStoreID = useRef();
stateRefStoreID.current = props.storeID;
پاسخها
5
@parastooebrahimi
من چند مدته که با این سوال درگیرم که اساسا ref در ری اکت چی هست و بهترین جوابی که براش پیدا کردم اینه:
یک روشی هست برای دسترسی ( access or Manipulation) به ویژگی های یک المنت از Dom یا یک کامپوننت ری اکت.
اما دو سوال مهم دیگه اینجا وجود داره
چه موقع باید از ref استفاده کرد و چه موقع نباید؟
فهمیدن جواب این سوال نیاز به مطالعه زیاد داره من یکسری لینک اینجا میذارم. که خودم فعلا از هر کدوم بخشی رو خوندم و به نظرم راهگشا میاد و قصد دارم بخونمشون همه رو.
این مقالات رو به همین ترتیب که نوشتم بخونید.
1- When to Use Refs
2- Don’t Overuse Refs
3- When to use React's Ref on a DOM node in React
4-A guide to React refs: useRef and createRef
5-Refs in React : All you need to know !
6- react-refs-complete-story
بهترین منبع داکیومنت رسمی ریکت هست .
پیشنهاد میکنم از این ویدیو زیر استفاده کنید
گفتگوهای مرتبط
شاید پاسخ شما همینجا باشد
در واقع زمانی که میخوایم به المنت های DOM رو بهش دسترسی داشته باشیم و داخل useEffect تغییرشون بدیم میتونیم از useref استفاده کنیم.
مثلا در نظر بگیرید میخواید وقتی که صفحه سایت بالا بیاد نشانگر موس داخل یک اینپوت قرار بگیره اونموقع میشه از useRef استفاده کرد
سلام
خب اول یه سری توضیح میدم در مورد هوک های ری اکت (useEffect , useRef ,useState...) بدم فک کنم اگه اشتباه نکنم از ورژن 16 به بعد به ری اکت اضافه شدند. موضوع خیلی پیچیده نیست ما قبلا برای ساختن یه کامپوننت باید یه کلاس میساختیم که حتما از react.component ارث بری میکرد و کلی متد مخلف مثل componentWillMount , componentDidMount و ... داشتیم که هرکدوم کاربرد خاص خودش رو داشت . خب توی ورژن های جدید بطور کلی یه ساختار جدید به نام فانکشنال کامپوننت تعریف شده که شما کامپوننت ها رو میتونین بصورت function تعریف کنید توی این کامپوننتی که بصورت فانکشنال کامپوننت تعریف شده شما دیگه به متد های componentWillMountو ... دسترسی ندارید بشدت تعداد خطهای کد نویسی با این روش کمتر و سریعتر میشه خب حالا توی اون کلاس کامپوننت ها موقعی که یه prop جدید به کامپوننت میرسید ما با متد componentWillReceiveProps استفاده میکردیم ولی تو این مورد جدید باید از هوک useEffect استفاده کنیم و در هر بار دریافت prop جدید این متد و کد های داخلش فراخوانی میشه. کلی کاربرد مختلف دارن یا به جای استفاده از this.setState باید از useState استفاده کنید. کلیت کاربردهای خیلی خوب و سریعی میتونه داشته باشه توصیه من بشدت استفاده از فانکشنال کامپوننت به جای کلاس کامپوننت هست .
یک نمونه کد ساده
import React, { userState,useEffect } from 'react'
function Test(props) {
let [number,setNumber]=userState(0);
useEffect(()=>{
setNumber(props.number)
},[props])
const increaseNum=()=>{
number++;
setNumber(number);
}
const decreaseNum=()=>{
number--;
setNumber(number);
}
return (
<div>
<button onClick={increaseNum}>+</button>
<span>This number is: {number}</span>
<button onClick={decreaseNum}>-</button>
</div>
)
}