لماذا يتم عرض مكون React مرتين في كل تحديث؟

Adam Ebrahim · 21 مارس 2021

لدي الكود البسيط التالي:

import React from "react";

function App() {
  const [number, setNumber] = React.useState(0);

  function updateNumber() {
    setNumber(state => state + 1);
  }

  console.log("this log is showing twice");
  return (
    <div className="App">
      {number}
      <button onClick={updateNumber}>Increase Number</button>
    </div>
  );
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

في كل مرة اضغط فيها على الزر ، أحصل على سجلين في الـ console مما يشير إلى أن المكون يتم عرضه مرتين renders twice، لماذا يحدث هذا الأمر؟ هل هناك خطأ ما في الكود؟

سامح أشرف · 21 مارس 2021

يتم عرض مكون App الخاص بك داخل React.StrictMode وهو ما يؤدي إلى تشغيل الدوال الخاصة بك في وضع التطوير Development Mode وفي هذا الوضع تظهر النتيجة في الـ Console مرتين لأن كل دالة يتم تشغيلها مرتين في وضع التطوير.

وحسب وثائق React الرسيمة:

اقتباس

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions

Class component constructor, render, and shouldComponentUpdate methods -

Class component static getDerivedStateFromProps method -

Function component bodies -

State updater functions (the first argument to setState) -

Functions passed to useState, useMemo, or useReducer -

لا يمكن لوضع التطوير Development Mode كتشف الآثار الجانبية تلقائيًا، ولكن يمكن أن يساعدك في تحديدها بجعلها أكثر حتمية. يتم ذلك عن طريق الاستدعاء المزدوج للدوال التالية:

في المكون من نوع Class:
- constructor
- render
- shouldComponentUpdate
- الدالة الثابتة getDerivedStateFromProps
المكونات من نوع Function:
- جسم الدالة نفسها
- دوال تحديث الحالة setState
- useState
- useMemo
- useReducer

لاحظ أنه هذا ينطبق فقط على وضع التطوير. لن يتم استدعاء دوال Lifecycles مرتين في وضع الإنتاج.

يمكنك أن تمنع حدوث مثل هذا الأمر من خلال حذف React.StrictMode من التابع render:


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

Mohammed Saber6 · 21 مارس 2021

هذا بسبب <React.StrictMode> وهو يقوم بعمل render مرتين فقط في البيئة التطويرية وليس بيئة ال production ويفعل هذا لكي يكتشف الأخطاء ويعمل تحذير بهم وهذا مفيد . إذا لا تريد هذا فقط قم بحذف <React.StrictMode>

لماذا يتم عرض مكون React مرتين في كل تحديث؟

السؤال

Adam Ebrahim

2 أجوبة على هذا السؤال

Recommended Posts

سامح أشرف

Mohammed Saber6

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية