(Updating the screen ) تحديث الشاشة في React

 بالتأكيد! في React، يمكنك تحديث الشاشة عن طريق إضافة حالة (state) إلى مكونك. على سبيل المثال، إذا كنت تريد عدّ عدد مرات النقر على زر، يمكنك القيام بذلك باستخدام useState.

أولاً، قم باستيراد useState من React:

import { useState } from 'react';

ثم يمكنك إعلان متغير حالة داخل مكونك:

function MyButton() {   const [count, setCount] = useState(0);   // ... }

ستحصل على شيئين من useState: الحالة الحالية (count) والدالة التي تتيح لك تحديثها (setCount). يمكنك تسميتهما بأي أسماء، ولكن العرف هو كتابة [شيء، setشيء].

في المرة الأولى التي يتم فيها عرض الزر، ستكون قيمة count هي 0 لأنك مررت 0 إلى useState(). عندما تريد تغيير الحالة، استدعِ setCount() ومرر القيمة الجديدة إليها. النقر على هذا الزر سيزيد العداد:

function MyButton() {   const [count, setCount] = useState(0);   function handleClick() {     setCount(count + 1);   }   return (     <button onClick={handleClick}>       Clicked {count} times     </button>   ); }

سيقوم React باستدعاء دالة المكون مرة أخرى. هذه المرة، ستكون قيمة count هي 1. ثم ستكون 2، وهكذا.

إذا قمت بعرض نفس المكون عدة مرات، سيحصل كل منها على حالته الخاصة. انقر على كل زر بشكل منفصل:

import { useState } from 'react'; export default function MyApp() {   return (     <div>       <h1>Counters that update separately</h1>       <MyButton />       <MyButton />     </div>   ); } function MyButton() {   const [count, setCount] = useState(0);   function handleClick() {     setCount(count + 1);   }   return (     <button onClick={handleClick}>       Clicked {count} times     </button>   ); }

لاحظ كيف أن كل زر “يتذكر” حالته الخاصة ولا يؤثر على الأزرار الأخرى.