آموزش useEffect در React

هدایت عباسی آموزش جاوا اسکریپت

در این بخش از آموزش React از تاپ سایت 98 قصد داریم به آموزش useEffect و کاربرد آن بپردازیم. برای فهم useEffect در React سعی کرده ایم از چند مثال استفاده کنیم که یادگیری شما را افزایش می دهد. پس بیایید به سراغ توضیحات و مثال برویم.

کاربرد useEffect در React

UseEffect Hook به شما اجازه می دهد تا واکشی داده‌ها، به‌روزرسانی مستقیم DOM و تایمرها را در کامپوننت خود انجام دهید.

useEffect دو آرگومان را می پذیرد. آرگومان دوم اختیاری است.

در مثال اول یک تایمر ایجاد می کنیم که هر از یک ثانیه عدد را افزایش می دهد.

ابتدا باید UseEffect را در قسمت بالا فراخوانی یا ایمپورت کنید.

با استفاده از useState مقدار اولیه را مشخص کرده ایم. سپس با useEffect و دستور setTimeOut هر ثانیه (مقدار 1000 معادل یک ثانیه است) یک عدد به count اضافه می کنیم.

سپس در تگ h1 مقدار را نمایش می دهیم.

Import { useState, useEffect } from “react”;
import ReactDOM from “react-dom”;
function Timer() {
const [count, setCount] = useState(0);
useEffect(() => {
setTimeout(() => {
setCount((count) => count + 1);
}, 1000);
});
return <h1>I have rendered {count} times!</h1>;
}
ReactDOM.render(<Timer />, document.getElementById(‘root’));

مثال useEffect و دریافت اطلاعات

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

ابتدا یک فایل بنام Posts.js در پوشه pages ایجاد می کنم و کد زیر را در آن قرار می دهم.

import React, { useState, useEffect } from 'react'
export default function Posts() {
const [post, getPost] = useState([])
const API = 'https://jsonplaceholder.typicode.com/posts';
const fetchPost = () => {
fetch(API)
.then((res) => res.json())
.then((res) => {
console.log(res)
getPost(res)
})
}
useEffect(() => {
fetchPost()
}, [])
return (
<>
<h2>React Fetch Data with REST API Example</h2>
<ul>
{post.map((item, i) => {
return <li key={i}>{item.id} - {item.title}</li>
})}
</ul>
</>
)
}

سپس در فایل App.js کد زیر را قرار می دهیم.

مشاهده میکنید که فایل Posts در قسمت بالا ایمپورت شده است دقت کنید آدرس به درستی وارد شود. ما در بخش src پروژه React پوشه ای ایجاد کرده ایم و فایل Posts.js را در آن قرار داده ایم.

در بخش return نیز Posts را فراخوانی کرده ایم.

import React, { useState, useEffect } from 'react'
import Posts from "./pages/Posts";
function App() {
return (
<>
<Posts />
</>
)
}
export default App

در فایل index.js نیز کد پیش فرض را قرار داده ایم که App را فراخوانی کرده است.

در خروجی باید مانند عکس زیر اطلاعات نمایش داده شود.

آموزش useEffect در React