اذهب إلى المحتوى
  • 0

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

مهند مثقال

السؤال

السلام عليكم

---------------------------------------------------------------------------------------------------------

في الكود التالي أود أن انظف الكونسول في جوجل كروم ( ()console.clear )، فما الفرق بين الطريقتين:

الأولى: أن استعمل (useEffect) كما موضح في الكود 

الثانية: أن أضع السطر البرمجي مباشرة داخل (return) كما في الكود أيضا قبل اغلاق (Routes)

---------------------------------------------------------------------------------------------------------

السؤال الثاني مرتبط إذا استعملنا الطريقة الثانية:

أليس من المفترض أن يتم تنفيذ الكود (setTimeout(() => console.clear(), 1500)) اذا وضع داخل (return) في كل مرة اتوجه فيها لاي صفحة أو في الصفحة الرئيسية على الاقل، ما يحصل انه يتم تنفيذ الكود مرة واحدة فقط؟ أي لا ينفذ الا عند تحديث الصفحة بالكامل.

 

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

const App = () => {
  useEffect(() => {
    setTimeout(() => console.clear(), 1500);
  }, []);

  return (
    <Routes>
      <Route path="/" element={<Navigation />}>
        <Route index={true} element={<Home />} />
        <Route path="auth" element={<Authentication />} />
      </Route>
	{setTimeout(() => console.clear(), 1500)}
    </Routes>
  );
};

export default App;

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

الفرق انه في طريقة الـ 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>
      );
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

ولكن في الكود التالي يتم تفعيل (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;

 

تم التعديل في بواسطة Mohanad Almethkal
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 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 فلن يتأثر بالانتقال بين الصفحات لأنك لا تغلقه ولا تفتحه في عملية الانتقال فهو الاب لكل المكونات ويتم تحميله مرة واحدة عند تحميل الصفحة.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...