مراجعة سريعة لما سبق
- Hooks هي features جاهزة من React بتخليك تتحكم في الـ State والـ Lifecycle بسهولة
- Virtual DOM بيخلي React تحدّث بس العنصر اللي تغيّر، مش الصفحة كلها
- Hooks تشتغل فقط داخل Functional Component أو Custom Hook
شو يعني State؟
قلنا إن React تعتمد على Virtual DOM — وهنا تكمن المشكلة.
لو كتبت هيك:
function App() {
let count = 0;
const handleClick = () => {
count = count + 1;
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
الـ count بيتغير في الـ Memory بس الـ DOM ما رح يتغير أي شيء نهائياً.
ليش؟ لأن React ما عندها أي سبب تعمل تغيير على DOM.
وهنا بيجي دور الـ State.
لو بدك أي تغيير يظهر على الشاشة، لازم تستخدم State — هي اللي بتخبر React إن في تغيير صار وإنها تعمل re-render.
الـ State في Class Component كيف كان؟
قبل Hooks، كانت الـ State تشتغل هيك مع Class:
class App extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<p>{this.state.count}</p>
<button onClick={this.handleClick}>Click me</button>
</div>
);
}
}
لاحظ شو كان عنا:
constructorهي Method اللي بتحتوي على الـ State-
عشان أوصل للـ State لازم أستخدم
this— وهاد كان الأمر المزعج اللي حكينا عنه في الجزء الأول -
this.setStateعشان أغيّر على الـ State لازم أمرر object يحتوي على الـ State اللي رح أغيّر عليه والقيمة الجديدة render()هي Method عشان ترجع الـ UI
useState في Functional Component
مع الـ Hook صارت الدنيا أبسط بكثير، لاحظوا بنفسكم:
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>Click me</button>
</div>
);
}
شو صار عنا هنا:
- عندي Function عادي أو Arrow — مش قصة
- لو بدي أستخدم State لازم أعمل
importلـuseState -
داخل الـ Function وقبل الـ
returnبعمل Destructuring كـ Array — الأول اسم الـ State مثلاًcount، والثاني هو الـ setter وبالـ best practices أسميهsetCountبالـ Camel Case -
useState(initialValue)الـ initialValue هي القيمة الأولى للـ State مثلاً0وممكن تكون أي data type - عشان أغيّر القيمة بستخدم
setCountوأمرر داخلها القيمة الجديدة -
عشان أعرض الـ State داخل JSX بحطها بين
{}— وهي بترجع لي JavaScript داخل HTML
ملخص سريع
تعريف State
- Class Component:
this.state = {} - Functional Component:
useState()
قراءة القيمة
- Class Component:
this.state.count - Functional Component:
count
تغيير القيمة
- Class Component:
this.setState({}) - Functional Component:
setCount()
كمية الكود
- Class Component: كثير
- Functional Component: بسيط
ما القادم؟
في الجزء الثالث رح نتعلم ثاني Hook وهي useEffect 👇
اكتبوا رأيكم واستفساراتكم في التعليقات 👇

