رد فعل useStateهوك

يتيح لنا React useStateHook تتبع الحالة في مكون دالة.

تشير الحالة عمومًا إلى البيانات أو الخصائص التي يجب تتبعها في أحد التطبيقات.

يستورد useState

لاستخدام useStateالخطاف ، نحتاج أولاً إلى importإدخاله في المكون الخاص بنا.

import { useState } from "react";

لاحظ أننا نتلف useStateمن reactتصدير مسمى.

التهيئةuseState

نقوم بتهيئة حالتنا عن طريق استدعاء useStateمكون الوظيفة الخاص بنا.

useStateيقبل حالة أولية ويعيد قيمتين:

• مجلس الدولة.
• وظيفة تقوم بتحديث الدولة.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

لاحظ أنه مرة أخرى ، نحن ندمر القيم التي تم إرجاعها من useState.

القيمة الأولى colorهي حالتنا الحالية.

القيمة الثانية setColor، هي fuction المستخدم لتحديث حالتنا.

أخيرًا ، قمنا بتعيين الحالة الأولية على سلسلة فارغة:useState("")

قراءة الدولة

يمكننا الآن تضمين دولتنا في أي مكان في مكوننا.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

تحديث الدولة

لتحديث حالتنا ، نستخدم وظيفة محدث الحالة الخاصة بنا.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

ما يمكن أن تعقده الدولة

يمكن useStateاستخدام الخطاف لتتبع السلاسل والأرقام والمنطق المنطقي والمصفوفات والكائنات وأي مجموعة من هذه!

يمكننا إنشاء خطاطيف حالة متعددة لتتبع القيم الفردية.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

أو يمكننا فقط استخدام حالة واحدة وتضمين كائن بدلاً من ذلك!

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

تحديث الكائنات والصفائف في الحالة

عندما يتم تحديث الحالة ، يتم الكتابة فوق الولاية بأكملها.

ماذا لو أردنا فقط تحديث لون سيارتنا؟

إذا اتصلنا فقط setCar({color: "blue"})، فسيؤدي ذلك إلى إزالة العلامة التجارية والطراز والسنة من دولتنا.

يمكننا استخدام عامل انتشار JavaScript لمساعدتنا.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

نظرًا لأننا نحتاج إلى القيمة الحالية للحالة ، فإننا نمرر دالة إلى setCarوظيفتنا. هذه الوظيفة تتلقى القيمة السابقة.

ثم نعيد كائنًا ، previousStateوننشر اللون ونكتبه فقط.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}