React: استدعاء مكون دالة غير متوقع باستخدام useState

هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟

سؤال

ما هو السلوك الحالي؟

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Child() {
  console.log("Child render");
  return null;
}

function App() {
  const [count, setCount] = useState(0);

  console.log("Render");

  useEffect(() => {
    console.log("count changed", count);
  }, [count]);

  return (
    <div>
      <h2>UseState</h2>
      <p>clicked: {count}</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          setCount(count);
        }}
      >
        +0
      </button>
      <Child />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

يوجد زران في مثال العد هذا. النقر فوق أحدهما يجعل العد + 1 الآخر لا يحسب أي تغيير. إذا نقرت على زر no change أولاً ، فلن يتم تسجيل "Render". ولكن في حالة النقر فوق الزر 1+ أولاً ثم النقر فوق anthor ， سيظهر "عرض" مرتين ، ولكن "عرض الأطفال" سيظهر مرة واحدة فقط.

لقد وجدت الشرح في الوثيقة.

إذا قمت بتحديث State Hook إلى نفس القيمة مثل الحالة الحالية ، فسوف تنقذ React دون تحويل العناصر الفرعية أو تأثيرات إطلاق النار. (تستخدم React خوارزمية المقارنة Object.is).

هل تتعهد React فقط بعدم عرض مكون الأطفال في هذه الحالة؟ قد لا يزال يتم تقديم المكون الحالي؟

هذا مثال في وضع الحماية.

https://codesandbox.io/s/long-firefly-nz5px؟fontsize=14&hidenavigation=1&theme=dark

ما إصدارات React وأي متصفح / نظام تشغيل متأثر بهذه المشكلة؟

"رد فعل": "^ 16.12.0" ،
"رد فعل دوم": "^ 16.12.0" ،