React: Panggilan komponen fungsi tak terduga menggunakan useState

Dibuat pada 20 Des 2019 · 3Komentar · Sumber: facebook/react

Apakah Anda ingin meminta fitur atau melaporkan bug ?

pertanyaan

Apa perilaku saat ini?

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);

Ada dua tombol dalam contoh hitungan ini. Mengklik satu membuat hitungan +1, yang lain membuat hitungan tidak ada perubahan. Jika mengklik tombol no change terlebih dahulu, "Render" tidak akan dicatat. Tetapi jika mengklik tombol +1 terlebih dahulu dan kemudian mengklik anthor，"Render" akan muncul dua kali, tetapi ""Child render" hanya akan ditampilkan sekali.

Saya menemukan penjelasannya dalam dokumen.

Jika Anda memperbarui State Hook ke nilai yang sama dengan status saat ini, React akan keluar tanpa merender turunan atau efek pengaktifan. (React menggunakan algoritma perbandingan Object.is.)

Apakah React hanya menjanjikan bahwa komponen Children tidak akan dirender dalam situasi ini? Komponen saat ini masih dapat dirender?

Ini adalah contoh di kotak pasir.

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

Versi React yang mana, dan browser/OS mana yang terpengaruh oleh masalah ini?

"bereaksi": "^16.12.0",
"react-dom": "^16.12.0",

Question

Sumber

yqz0203

Komentar yang paling membantu

Masalah ini tidak terlihat seperti "bug" melainkan pertanyaan untuk klarifikasi? :senyum:

Paragraf berikutnya di bawah bagian dokumen yang Anda rujuk mengatakan ini:

Perhatikan bahwa React mungkin masih perlu merender komponen spesifik itu lagi sebelum keluar. Itu seharusnya tidak menjadi perhatian karena React tidak perlu "lebih dalam" ke dalam pohon.

Bereaksi menyelamatkan lebih awal ketika tahu itu aman. Dalam beberapa kasus, perlu melakukan sedikit lebih banyak pekerjaan untuk memastikan bahwa itu aman untuk bail out.

Alasan mengapa hal ini tidak dapat dijelaskan tanpa masuk cukup jauh ke dalam detail implementasi saat ini- yang mungkin tidak akan terlalu berguna dan kemungkinan akan berubah dalam rilis mendatang saat kami terus mengerjakan API baru seperti mode bersamaan dan ketegangan.

Kabar baiknya adalah, seperti yang disebutkan oleh dokumen, jumlah pekerjaan tambahan yang dilakukan React dalam kedua kasus harus kecil!

bvaughn pada 20 Des 2019

👍2

Semua 3 komentar

Masalah ini tidak terlihat seperti "bug" melainkan pertanyaan untuk klarifikasi? :senyum:

Paragraf berikutnya di bawah bagian dokumen yang Anda rujuk mengatakan ini:

Perhatikan bahwa React mungkin masih perlu merender komponen spesifik itu lagi sebelum keluar. Itu seharusnya tidak menjadi perhatian karena React tidak perlu "lebih dalam" ke dalam pohon.

Bereaksi menyelamatkan lebih awal ketika tahu itu aman. Dalam beberapa kasus, perlu melakukan sedikit lebih banyak pekerjaan untuk memastikan bahwa itu aman untuk bail out.

Kabar baiknya adalah, seperti yang disebutkan oleh dokumen, jumlah pekerjaan tambahan yang dilakukan React dalam kedua kasus harus kecil!

bvaughn pada 20 Des 2019

👍2

Masalah ini tidak terlihat seperti "bug" melainkan pertanyaan untuk klarifikasi? 😄
Paragraf berikutnya di bawah bagian dokumen yang Anda rujuk mengatakan ini:
Perhatikan bahwa React mungkin masih perlu merender komponen spesifik itu lagi sebelum keluar. Itu seharusnya tidak menjadi perhatian karena React tidak perlu "lebih dalam" ke dalam pohon.
Bereaksi menyelamatkan lebih awal ketika tahu itu aman. Dalam beberapa kasus, perlu melakukan sedikit lebih banyak pekerjaan untuk memastikan bahwa itu aman untuk bail out.
Alasan mengapa hal ini tidak dapat dijelaskan tanpa masuk jauh ke dalam detail implementasi saat ini- yang mungkin tidak akan terlalu berguna _dan_ kemungkinan akan berubah dalam rilis mendatang saat kami terus mengerjakan API baru seperti mode bersamaan dan ketegangan.
Kabar baiknya adalah, seperti yang disebutkan oleh dokumen, jumlah pekerjaan tambahan yang dilakukan React dalam kedua kasus harus kecil!

Thx, sungguh pria yang ceroboh! 😁

yqz0203 pada 23 Des 2019

Jangan khawatir! 😄

bvaughn pada 25 Des 2019

Apakah halaman ini membantu?

0 / 5 - 0 peringkat