استفسار بخصوص تنظيف كونسول جوجل كروم

بتاريخ 5 دقائق مضت قال Mohanad Almethkal:

أهلا عمر وشكرا للمساعدة.

ولكن في الكود التالي يتم تفعيل (useEffect) الخاص ب المكون (App) مرة واحدة فقط عند تحديث الصفحة بـ (F5) ، ولا يتم تفعيله أثناء التنقل بين الصفحات ، أما الـ(useEffect) الخاص بالمكون (Shop) يتم تفعيله كل مرة يتم فيها التنقل بين الصفحات (في Route)؟

هل توضح لك سؤالي؟

import { useEffect, useState } from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./routes/home/Home";
import Navigation from "./routes/navigation/Navigation";

const Shop = () => {
  const [refresh, setRefresh] = useState(0);
  useEffect(() => {
    console.log("hi from use effect Shop");
  }, []);
  return (
    <div>
        <button onClick={() => setRefresh(refresh + 1)}>refresh</button>
    </div>
  );
};

const App = () => {
  useEffect(() => {
    console.log("hi from use effect App");
  }, []);
  return (
    <Routes>
      <Route path="/" element={<Navigation />}>
        <Route index element={<Home />} />
        <Route path="shop" element={<Shop />} />
      </Route>
    </Routes>
  );
};
export default App;

 

الـ useEffect يتم استدعائها مرة واحدة عند تحميل المكون عندما يكون الـ parameter الثاني يساوي [].

وبالتالي فإنها سيتم استدعائها في كل مرة تقوم بفتح المكون Shop أو App وعند الانتقال بين الصفحات والخروج من المكون Shop سيتم اغلاقه وعند العودة إلى المكون Shop سيتم فتح المكون Shop مرة ثانية وبالتالي سيتم استدعاء الـ useEffect الخاص به.

أما المكون App فلن يتأثر بالانتقال بين الصفحات لأنك لا تغلقه ولا تفتحه في عملية الانتقال فهو الاب لكل المكونات ويتم تحميله مرة واحدة عند تحميل الصفحة.

الفرق انه في طريقة الـ useEffect سيتم تنفيذ الأمر لمرة واحدة فقط عند تحميل الصفحة بينما في الطريقة الأخرى سيتم تنفيذ الأمر في كل مرة يحدث refresh للمكونات الخاصة بك.

ولكن بما انه لا يوجد أي شيء يسبب الـ  refresh في الكود الخاص بك فلا اعتقد انه يوجد فرق فعلي بين الطريقتان بالنسبة للكود الخاص بك.

ويمكنك التأكد من ذلك باختبار الكود التالي :

import { useEffect, useState } from "react";

export default function Home() {
      const [refresh, setRefresh] = useState(0);
      useEffect(() => {
            {
                  console.log("hi from use effect");
            }
      }, []);
      return (
            <div>
                  {console.log("hi from return")}
                  <button onClick={() => setRefresh(refresh + 1)}>refresh</button>
            </div>
      );
}

أهلا عمر وشكرا للمساعدة.

ولكن في الكود التالي يتم تفعيل (useEffect) الخاص ب المكون (App) مرة واحدة فقط عند تحديث الصفحة بـ (F5) ، ولا يتم تفعيله أثناء التنقل بين الصفحات ، أما الـ(useEffect) الخاص بالمكون (Shop) يتم تفعيله كل مرة يتم فيها التنقل بين الصفحات (في Route)؟

هل توضح لك سؤالي؟

import { useEffect } from "react";
import { Routes, Route } from "react-router-dom";
import Home from "./routes/home/Home";
import Navigation from "./routes/navigation/Navigation";

const Shop = () => {
  useEffect(() => {
    console.log("hi from use effect Shop");
  }, []);
  return <h1>Shop</h1>
};

const App = () => {
  useEffect(() => {
    console.log("hi from use effect App");
  }, []);
  return (
    <Routes>
      <Route path="/" element={<Navigation />}>
        <Route index element={<Home />} />
        <Route path="shop" element={<Shop />} />
      </Route>
    </Routes>
  );
};
export default App;