Stworzyłem komponent, App, na podstawie Przykład reakcji z haczyk stan useState. Oto mój kod:

import React, { useState } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  console.log("before");
  const [count, setCount] = useState(0);
  console.log("after");

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>
        Click me
      </button>
    </div>
  );
}

export default App;

Kiedy uruchomię to za pomocą węzła, {x0}} Renderuje przycisk na http://localhost:3000/:

enter image description here

W oparciu o wyjaśnienie towarzyszące przykładowi reakcjonowania (link powyżej), spodziewałbym się, że kliknięcie przycisku spowodowałby ponownie App, aby zostać ponownie renderowany. Jednak kliknięcie (raz) faktycznie powoduje, że ponowne wystąpienie wystąpienia:

enter image description here

Dlaczego ten przykład prowadzi do ponownego renderowania dwa razy?

Jak mogę to poprawić, aby nie występowało więcej niż to konieczne?


Uwaga: Za pomocą każdego kliknięcia dwie nowe linie każdego "przed" i "po" są drukowane do konsoli, więc podwójne renderowanie wydaje się występować za pomocą każdego kliknięcia, a nie ze względu na początkowy render.

1
mherzl 14 październik 2020, 21:12

1 odpowiedź

Najlepsza odpowiedź

To, co widzisz, jest pierwszym "przed" i "po" pochodzi z pierwszego renderowania, a druga para pochodzi, gdy klikniesz przycisk, a stan jest aktualizowany.

Wydaje się, że kod obrażający pochodzi z <React.StrictMode>

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

Usuwanie <React.StrictMode> pozbywa się tego problemu.

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

enter image description here Console

Dalsze czytanie: Reaguj elementy świadczone dwukrotnie - jakikolwiek sposób na naprawienie tego?

3
Matthew Lin 14 październik 2020, 18:27