Wie kann verhindert werden, dass der React useEffect Hook beim ersten Rendern ausgeführt wird?

Verhindern, dass der React-useEffect-Hook beim ersten Rendern ausgeführt wird

Der useEffect-Hook ist ein wertvolles Tool zum Verwalten von Nebenwirkungen in React-Komponenten. Standardmäßig wird es jedoch nach jedem Rendern ausgeführt, einschließlich des ersten. Dies kann zu unerwünschtem Verhalten führen, wie der Beispielcode zeigt. Um dies zu überwinden, gibt es zwei wirksame Strategien.

1. Verwenden des useRef-Hooks zum Verfolgen des ersten Renderings

Der useRef-Hook ermöglicht es uns, einen veränderlichen Wert zu speichern, der über erneute Renderings hinweg bestehen bleibt. Indem wir dies nutzen, können wir verfolgen, ob die useEffect-Funktion zum ersten Mal ausgeführt wird.

Beispiel:

const { useState, useRef, useEffect } = React;

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

  const firstUpdate = useRef(true);
  useEffect(() => {
    // Skip the initial render
    if (firstUpdate.current) {
      firstUpdate.current = false;
      return;
    }

    console.log("useEffect ran");
  });

  return (
    <div>
      <p>useEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

2. Verwendung des useLayoutEffect-Hooks

Der useLayoutEffect-Hook wird eingeführt, um das Verhalten von ComponentDidUpdate in Bezug auf die Ausführungsphase zu simulieren. Es wird ausgeführt, bevor der Browser malt, und verhindert so visuelle Störungen.

Beispiel:

const { useState, useLayoutEffect } = React;

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

  useLayoutEffect(() => {
    console.log("useLayoutEffect ran");
  });

  return (
    <div>
      <p>useLayoutEffect ran: {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

ReactDOM.render(<ComponentDidUpdateFunction />, document.getElementById("app"));

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass der React useEffect Hook beim ersten Rendern ausgeführt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!