سأقدم لك 10 أمثلة بسيطة لاستخدام useEffect في مواقع الويب. ستكون الأمثلة متنوعة لتغطية مجموعة واسعة من الحالات،
1. تحديث عنوان الصفحة:
import React, { useEffect } from 'react';
const UpdateTitle = () => {
useEffect(() => {
document.title = 'عنوان جديد';
}, []); // [] يجعل useEffect يعمل مرة واحدة عند تصيير المكون
return <div>تحقق من عنوان الصفحة</div>;
};
export default UpdateTitle;
|
2. جلب بيانات من API:
import React, { useState, useEffect } from 'react';
const FetchData = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []); // جلب البيانات مرة واحدة فقط
return <div>{data ? JSON.stringify(data) : 'جارٍ التحميل...'}</div>;
};
export default FetchData;
|
3. إعداد مؤقت :
import React, { useState, useEffect } from 'react';
const Timer = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const timer = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(timer); // تنظيف المؤقت عند فك التصيير
}, []);
return <div>Count: {count}</div>;
};
export default Timer;
|
4. الكشف عن أحداث التمرير:
import React, { useState, useEffect } from 'react';
const ScrollDetection = () => {
const [scrollY, setScrollY] = useState(0);
const handleScroll = () => {
setScrollY(window.scrollY);
};
useEffect(() => {
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll); // تنظيف المستمع عند فك التصيير
}, []);
return <div>Scroll Position: {scrollY}px</div>;
};
export default ScrollDetection;
|
5. متابعة حجم نافذة المتصفح:
import React, { useState, useEffect } from 'react';
const WindowSize = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
};
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize); // تنظيف المستمع عند فك التصيير
}, []);
return (
<div>
Width: {windowSize.width}px, Height: {windowSize.height}px
</div>
);
};
export default WindowSize;
|
6. تتبع مؤشر الفأرة:
import React, { useState, useEffect } from 'react';
const MousePosition = () => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const handleMouseMove = (event) => {
setMousePosition({
x: event.clientX,
y: event.clientY
});
};
useEffect(() => {
window.addEventListener('mousemove', handleMouseMove);
return () => window.removeEventListener('mousemove', handleMouseMove); // تنظيف المستمع عند فك التصيير
}, []);
return (
<div>
Mouse Position: ({mousePosition.x}, {mousePosition.y})
</div>
);
};
export default MousePosition;
|
7. تنفيذ دالة عند تغيير الحالة:
import React, { useState, useEffect } from 'react';
const StateChange = () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(`Count has changed to ${count}`);
}, [count]); // تنفيذه فقط عندما يتغير count
return (
<div>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
<div>Count: {count}</div>
</div>
);
};
export default StateChange;
|
8. جلب بيانات عند تغيير المدخل:
import React, { useState, useEffect } from 'react';
const DataFetchWithInput = () => {
const [query, setQuery] = useState('react');
const [data, setData] = useState(null);
useEffect(() => {
fetch(`https://api.example.com/search?query=${query}`)
.then(response => response.json())
.then(data => setData(data));
}, [query]); // جلب البيانات كلما تغير query
return (
<div>
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
<div>{data ? JSON.stringify(data) : 'No data'}</div>
</div>
);
};
export default DataFetchWithInput;
|
9. تنفيذ دالة عند تحميل الصور:
import React, { useState, useEffect } from 'react';
const ImageLoader = () => {
const [loaded, setLoaded] = useState(false);
useEffect(() => {
const img = new Image();
img.src = 'https://via.placeholder.com/150';
img.onload = () => setLoaded(true);
}, []); // تحميل الصورة مرة واحدة عند تصيير المكون
return (
<div>
{loaded ? <img src="https://via.placeholder.com/150" alt="Placeholder" /> : 'Loading...'}
</div>
);
};
export default ImageLoader;
|
10. تغيير السمة (Theme) عند تغيير الحالة:
import React, { useState, useEffect } from 'react';
const ThemeToggle = () => {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
document.body.className = darkMode ? 'dark-mode' : 'light-mode';
}, [darkMode]); // تغيير السمة عند تحديث darkMode
return (
<div>
<button onClick={() => setDarkMode(!darkMode)}>Toggle Theme</button>
<div>Current Theme: {darkMode ? 'Dark' : 'Light'}</div>
</div>
);
};
export default ThemeToggle;
|
تعليقات
إرسال تعليق