Wie registriere ich ein Ereignis mit useEffect-Hooks?

Question 1

Ich verfolge einen Udemy-Kurs zum Registrieren von Ereignissen mit Hooks. Der Kursleiter gab den folgenden Code an:

  const [userText, setUserText] = useState('');

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Jetzt funktioniert es großartig, aber ich bin nicht davon überzeugt, dass dies der richtige Weg ist. Der Grund dafür ist, dass, wenn ich das richtig verstehe, Ereignisse bei jedem erneuten Rendern jedes Mal registriert und abgemeldet werden, und ich denke einfach nicht, dass dies der richtige Weg ist, dies zu tun.

Also habe ich die useEffectHaken unten leicht modifiziert

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

  return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, []);

Indem Sie ein leeres Array als zweites Argument verwenden und die Komponente den Effekt nur einmal ausführen lassen, um zu imitieren componentDidMount. Und wenn ich das Ergebnis ausprobiere, ist es seltsam, dass bei jedem Schlüssel, den ich eingebe, statt angehängt, stattdessen überschrieben wird.

Ich hatte setUserText ( ${userText}${key}) erwartet ; Wenn ein neuer Schlüssel an den aktuellen Status angehängt und als neuer Status festgelegt wird, wird der alte Status vergessen und mit dem neuen Status neu geschrieben.

War es wirklich die richtige Art und Weise, dass wir Ereignisse bei jedem erneuten Rendern registrieren und abmelden sollten?

Question 2

Der beste Weg, um solche Szenarien zu lösen, besteht darin, zu sehen, was Sie im Ereignishandler tun. Wenn Sie den Status einfach mit dem vorherigen Status festlegen, verwenden Sie am besten das Rückrufmuster und registrieren Sie die Ereignis-Listener nur beim ersten Mounten. Wenn Sie nicht die Optioncallback pattern ( https://reactjs.org/docs/hooks-reference.html#usecallback ) verwenden, wird die Listener-Referenz zusammen mit ihrem lexikalischen Bereich vom Ereignis-Listener verwendet, es wird jedoch eine neue Funktion mit aktualisiertem Abschluss erstellt neues Rendern und daher im Handler können Sie den aktualisierten Status nicht erreichen

const [userText, setUserText] = useState('');

  const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Question 3

Problem

[...] Bei jedem erneuten Rendern werden Ereignisse jedes Mal registriert und abgemeldet, und ich denke einfach nicht, dass dies der richtige Weg ist.

Du hast recht. Es ist nicht sinnvoll, die Ereignisbehandlung useEffectbei jedem Rendern neu zu starten .

[...] leeres Array als zweites Argument, sodass die Komponente den Effekt nur einmal ausführen kann, [...] es ist seltsam, dass bei jedem Schlüssel, den ich eingebe, statt angehängt, stattdessen überschrieben wird.

Dies ist ein Problem mit veralteten Schließwerten .

Grund: Verwendete Funktionen im Inneren useEffectsollten Teil der Abhängigkeiten sein . Sie setzen nichts als dependency ( []), rufen aber trotzdem auf handleUserKeyPress, der selbst userTextstate liest .

Lösung

Abhängig von Ihrem Anwendungsfall gibt es einige Alternativen.

1. Statusaktualisierungsfunktion

setUserText(prev => `${prev}${key}`);

✔ am wenigsten invasiver Ansatz
✖ nur Zugriff auf den eigenen vorherigen Zustand, nicht auf andere Zustände

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(prev => `${prev}${key}`); // use updater function here
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []); // still no dependencies

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

2. `useReducer`- "Cheat-Modus"

Wir können useReducerzum aktuellen Status / Requisiten wechseln und Zugriff darauf haben - mit ähnlicher API wie useState.

Variante 2a: Logik innerhalb der Reduzierfunktion

const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    // isUpperCase is always the most recent state (no stale closure value)
    return `${state}${isUpperCase ? key.toUpperCase() : key}`;  
}, "");

Code-Snippet anzeigen

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      // isUpperCase is always the most recent state (no stale closure)
      return `${state}${isUpperCase ? key.toUpperCase() : key}`;
    }
  }, "");

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style={{ width: "150px" }} onClick={() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

Variante 2b: Logik außerhalb der Reduzierfunktion - ähnlich der useStateUpdater-Funktion

const [userText, setUserText] = useReducer((state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action, "");
// ...
setUserText((prevState, isUpper) => `${prevState}${isUpper ? key.toUpperCase() : key}`);

Code-Snippet anzeigen

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, setUserText] = useReducer(
    (state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action,
    ""
  );

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(
          (prevState, isUpper) =>
            `${prevState}${isUpper ? key.toUpperCase() : key}`
        );
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style={{ width: "150px" }} onClick={() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}


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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

✔ keine Notwendigkeit , um Abhängigkeiten zu verwalten
✔ Zugriff mehrere Zustände und Requisiten
✔ gleiche API wie useState
✔ erweiterbar auf komplexere Fälle / Reduktions
✖ etwas weniger Leistung durch Inline - Reduzierstück ( irgendwie vernachlässigbaren )
✖ leicht erhöhte Komplexität Minderer

3. `useCallback` / event handler inside`useEffect`

Wenn Sie nach handleUserKeyPressinnen gehen useEffect, zeigt Ihnen die ESLint-Regel für umfassende Deps, welche genauen kanonischen Abhängigkeiten fehlen ( userText):

Code-Snippet anzeigen

const App =() => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [userText]); // ESLint will yell here, if `userText` is missing

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

useCallback ist eine äquivalente Alternative mit etwas mehr Indirektion von Abhängigkeiten:

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(
    event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    },
    [userText]
  );

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]); // we rely directly on handler, indirectly on userText

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

Erweitern Sie das Snippet

Hinweis: Diese Variante kann zwar auf verschiedene Arten angewendet werden, ist jedoch nicht für den Fragenfall geeignet und der Vollständigkeit halber aufgeführt. Grund: Der Ereignis-Listener wird bei jedem Tastendruck neu gestartet.

✔ pragmatische Allzwecklösung
✔ minimal invasiv
✖ manuelles Abhängigkeitsmanagement
✖useCallback macht die Funktionsdefinition ausführlicher / übersichtlicher

4. `useRef`/ Rückruf in veränderlicher Referenz speichern

const cbRef = useRef(handleUserKeyPress);
useEffect(() => { cbRef.current = handleUserKeyPress; }); // update after each render
useEffect(() => {
    const cb = e => cbRef.current(e); // then use most recent cb value
    window.addEventListener("keydown", cb);
    return () => { window.removeEventListener("keydown", cb) };
}, []);

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  const cbRef = useRef(handleUserKeyPress);

  useEffect(() => {
    cbRef.current = handleUserKeyPress;
  });

  useEffect(() => {
    const cb = e => cbRef.current(e);
    window.addEventListener("keydown", cb);

    return () => {
      window.removeEventListener("keydown", cb);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

Erweitern Sie das Snippet

✔ für Rückrufe / Ereignishandler, die nicht zum erneuten Rendern des Datenflusses verwendet werden.
✔ Keine Notwendigkeit, Abhängigkeiten zu verwalten
✖ Nur als letzte Option von React Docs
empfohlen. ✖ Wichtigerer Ansatz

Weitere Informationen finden Sie unter diesen Links: 1 2 3

Question 4

neue Antwort:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [])

Übergeben Sie bei Verwendung setUserTextdie Funktion als Argument anstelle des Objekts. prevUserTextDies ist immer der neueste Status.

alte Antwort:

Versuchen Sie dies, es funktioniert genauso wie Ihr ursprünglicher Code:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [userText])

weil es in Ihrer useEffect()Methode von der userTextVariablen abhängt , aber Sie es nicht in das zweite Argument einfügen, sonst userTextwird das immer ''mit dem Argument an den Anfangswert gebunden[] .

Sie müssen dies nicht tun, sondern möchten Sie nur wissen lassen, warum Ihre zweite Lösung nicht funktioniert.

Question 5

Benötigt für Ihren Anwendungsfall useEffectein Abhängigkeitsarray, um Änderungen zu verfolgen, und basierend auf der Abhängigkeit kann bestimmt werden, ob erneut gerendert werden soll oder nicht. Es wird immer empfohlen, ein Abhängigkeitsarray an zu übergebenuseEffect . Bitte beachten Sie den folgenden Code:

Ich habe useCallbackHaken eingeführt .

const { useCallback, useState, useEffect } = React;

  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <blockquote>{userText}</blockquote>
    </div>
  );

Question 6

Sie benötigen eine Möglichkeit, den vorherigen Status zu verfolgen. useStatehilft Ihnen, nur den aktuellen Status zu verfolgen. In den Dokumenten können Sie mithilfe eines anderen Hooks auf den alten Status zugreifen.

const prevRef = useRef();
useEffect(() => {
  prevRef.current = userText;
});

Ich habe Ihr Beispiel aktualisiert, um dies zu verwenden. Und es klappt.

const { useState, useEffect, useRef } = React;

const App = () => {
  const [userText, setUserText] = useState("");
  const prevRef = useRef();
  useEffect(() => {
    prevRef.current = userText;
  });

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${prevRef.current}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Erweitern Sie das Snippet

Question 7

Beim zweiten Ansatz wird das useEffectnur einmal gebunden und daher wird das userTextnie aktualisiert. Ein Ansatz wäre, eine lokale Variable beizubehalten, die userTextbei jedem Tastendruck zusammen mit dem Objekt aktualisiert wird.

  const [userText, setUserText] = useState('');
  let local_text = userText
  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      local_text = `${userText}${key}`;
      setUserText(local_text);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Persönlich mag ich die Lösung nicht, fühle anti-reactmich und ich denke, die erste Methode ist gut genug und wurde entwickelt, um auf diese Weise verwendet zu werden.

Question 8

Sie haben keinen Zugriff auf den geänderten useText-Status. Sie können es dem vorherigen Status zuordnen. Speichern Sie den Zustand in einer Variablen, zB: Zustand wie folgt:

const App = () => {
  const [userText, setUserText] = useState('');

  useEffect(() => {
    let state = ''

    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        state += `${key}`
        setUserText(state);
      }   
    };  
    window.addEventListener('keydown', handleUserKeyPress);
    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };  
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );  
};

Answer 1

Ich verfolge einen Udemy-Kurs zum Registrieren von Ereignissen mit Hooks. Der Kursleiter gab den folgenden Code an:

  const [userText, setUserText] = useState('');

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  });

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Jetzt funktioniert es großartig, aber ich bin nicht davon überzeugt, dass dies der richtige Weg ist. Der Grund dafür ist, dass, wenn ich das richtig verstehe, Ereignisse bei jedem erneuten Rendern jedes Mal registriert und abgemeldet werden, und ich denke einfach nicht, dass dies der richtige Weg ist, dies zu tun.

Also habe ich die useEffectHaken unten leicht modifiziert

useEffect(() => {
  window.addEventListener('keydown', handleUserKeyPress);

  return () => {
    window.removeEventListener('keydown', handleUserKeyPress);
  };
}, []);

Indem Sie ein leeres Array als zweites Argument verwenden und die Komponente den Effekt nur einmal ausführen lassen, um zu imitieren componentDidMount. Und wenn ich das Ergebnis ausprobiere, ist es seltsam, dass bei jedem Schlüssel, den ich eingebe, statt angehängt, stattdessen überschrieben wird.

Ich hatte setUserText ( ${userText}${key}) erwartet ; Wenn ein neuer Schlüssel an den aktuellen Status angehängt und als neuer Status festgelegt wird, wird der alte Status vergessen und mit dem neuen Status neu geschrieben.

War es wirklich die richtige Art und Weise, dass wir Ereignisse bei jedem erneuten Rendern registrieren und abmelden sollten?

Answer 2

90

Der beste Weg, um solche Szenarien zu lösen, besteht darin, zu sehen, was Sie im Ereignishandler tun. Wenn Sie den Status einfach mit dem vorherigen Status festlegen, verwenden Sie am besten das Rückrufmuster und registrieren Sie die Ereignis-Listener nur beim ersten Mounten. Wenn Sie nicht die Optioncallback pattern ( https://reactjs.org/docs/hooks-reference.html#usecallback ) verwenden, wird die Listener-Referenz zusammen mit ihrem lexikalischen Bereich vom Ereignis-Listener verwendet, es wird jedoch eine neue Funktion mit aktualisiertem Abschluss erstellt neues Rendern und daher im Handler können Sie den aktualisierten Status nicht erreichen

const [userText, setUserText] = useState('');

  const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Shubham Khatri
quelle

Ihre Lösung ist für mich im Vergleich zu anderen am sinnvollsten, vielen Dank!

Isaac

Ich bin

7

Ich sehe, dass es wichtig ist, prevUserText auf den vorherigen Zustand von zu verweisen userText. Was ist, wenn ich auf mehrere Status zugreifen muss? Wie kann ich auf alle vorherigen Status zugreifen?

Joey Yi Zhao

1

Wie können wir den vorherigen Status erhalten, wenn wir useReduceranstelle von verwenden useState?

Eesa

1

@tractatusviii Ich denke, dieser Beitrag wird Ihnen helfen: stackoverflow.com/questions/55840294/…

Shubham Khatri

Answer 3

Ihre Lösung ist für mich im Vergleich zu anderen am sinnvollsten, vielen Dank!

Isaac

Answer 4

7

Ich sehe, dass es wichtig ist, prevUserText auf den vorherigen Zustand von zu verweisen userText. Was ist, wenn ich auf mehrere Status zugreifen muss? Wie kann ich auf alle vorherigen Status zugreifen?

Joey Yi Zhao

Answer 5

1

Wie können wir den vorherigen Status erhalten, wenn wir useReduceranstelle von verwenden useState?

Eesa

Answer 6

1

@tractatusviii Ich denke, dieser Beitrag wird Ihnen helfen: stackoverflow.com/questions/55840294/…

Shubham Khatri

Answer 7

Problem

[...] Bei jedem erneuten Rendern werden Ereignisse jedes Mal registriert und abgemeldet, und ich denke einfach nicht, dass dies der richtige Weg ist.

Du hast recht. Es ist nicht sinnvoll, die Ereignisbehandlung useEffectbei jedem Rendern neu zu starten .

[...] leeres Array als zweites Argument, sodass die Komponente den Effekt nur einmal ausführen kann, [...] es ist seltsam, dass bei jedem Schlüssel, den ich eingebe, statt angehängt, stattdessen überschrieben wird.

Dies ist ein Problem mit veralteten Schließwerten .

Grund: Verwendete Funktionen im Inneren useEffectsollten Teil der Abhängigkeiten sein . Sie setzen nichts als dependency ( []), rufen aber trotzdem auf handleUserKeyPress, der selbst userTextstate liest .

Lösung

Abhängig von Ihrem Anwendungsfall gibt es einige Alternativen.

1. Statusaktualisierungsfunktion

setUserText(prev => `${prev}${key}`);

✔ am wenigsten invasiver Ansatz
✖ nur Zugriff auf den eigenen vorherigen Zustand, nicht auf andere Zustände

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(prev => `${prev}${key}`); // use updater function here
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []); // still no dependencies

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

2. `useReducer`- "Cheat-Modus"

Wir können useReducerzum aktuellen Status / Requisiten wechseln und Zugriff darauf haben - mit ähnlicher API wie useState.

Variante 2a: Logik innerhalb der Reduzierfunktion

const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    // isUpperCase is always the most recent state (no stale closure value)
    return `${state}${isUpperCase ? key.toUpperCase() : key}`;  
}, "");

Code-Snippet anzeigen

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, handleUserKeyPress] = useReducer((state, event) => {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      // isUpperCase is always the most recent state (no stale closure)
      return `${state}${isUpperCase ? key.toUpperCase() : key}`;
    }
  }, "");

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style={{ width: "150px" }} onClick={() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

Variante 2b: Logik außerhalb der Reduzierfunktion - ähnlich der useStateUpdater-Funktion

const [userText, setUserText] = useReducer((state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action, "");
// ...
setUserText((prevState, isUpper) => `${prevState}${isUpper ? key.toUpperCase() : key}`);

Code-Snippet anzeigen

const App = () => {
  const [isUpperCase, setUpperCase] = useState(false);
  const [userText, setUserText] = useReducer(
    (state, action) =>
      typeof action === "function" ? action(state, isUpperCase) : action,
    ""
  );

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(
          (prevState, isUpper) =>
            `${prevState}${isUpper ? key.toUpperCase() : key}`
        );
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);
    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
      <button style={{ width: "150px" }} onClick={() => setUpperCase(b => !b)}>
        {isUpperCase ? "Disable" : "Enable"} Upper Case
      </button>
    </div>
  );
}


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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

✔ keine Notwendigkeit , um Abhängigkeiten zu verwalten
✔ Zugriff mehrere Zustände und Requisiten
✔ gleiche API wie useState
✔ erweiterbar auf komplexere Fälle / Reduktions
✖ etwas weniger Leistung durch Inline - Reduzierstück ( irgendwie vernachlässigbaren )
✖ leicht erhöhte Komplexität Minderer

3. `useCallback` / event handler inside`useEffect`

Wenn Sie nach handleUserKeyPressinnen gehen useEffect, zeigt Ihnen die ESLint-Regel für umfassende Deps, welche genauen kanonischen Abhängigkeiten fehlen ( userText):

Code-Snippet anzeigen

const App =() => {
  const [userText, setUserText] = useState("");

  useEffect(() => {
    const handleUserKeyPress = event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    };

    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [userText]); // ESLint will yell here, if `userText` is missing

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

Erweitern Sie das Snippet

useCallback ist eine äquivalente Alternative mit etwas mehr Indirektion von Abhängigkeiten:

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(
    event => {
      const { key, keyCode } = event;

      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        setUserText(`${userText}${key}`);
      }
    },
    [userText]
  );

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]); // we rely directly on handler, indirectly on userText

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

Erweitern Sie das Snippet

Hinweis: Diese Variante kann zwar auf verschiedene Arten angewendet werden, ist jedoch nicht für den Fragenfall geeignet und der Vollständigkeit halber aufgeführt. Grund: Der Ereignis-Listener wird bei jedem Tastendruck neu gestartet.

✔ pragmatische Allzwecklösung
✔ minimal invasiv
✖ manuelles Abhängigkeitsmanagement
✖useCallback macht die Funktionsdefinition ausführlicher / übersichtlicher

4. `useRef`/ Rückruf in veränderlicher Referenz speichern

const cbRef = useRef(handleUserKeyPress);
useEffect(() => { cbRef.current = handleUserKeyPress; }); // update after each render
useEffect(() => {
    const cb = e => cbRef.current(e); // then use most recent cb value
    window.addEventListener("keydown", cb);
    return () => { window.removeEventListener("keydown", cb) };
}, []);

Code-Snippet anzeigen

const App = () => {
  const [userText, setUserText] = useState("");

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  };

  const cbRef = useRef(handleUserKeyPress);

  useEffect(() => {
    cbRef.current = handleUserKeyPress;
  });

  useEffect(() => {
    const cb = e => cbRef.current(e);
    window.addEventListener("keydown", cb);

    return () => {
      window.removeEventListener("keydown", cb);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
}

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

<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef, useCallback } = React</script>

Erweitern Sie das Snippet

✔ für Rückrufe / Ereignishandler, die nicht zum erneuten Rendern des Datenflusses verwendet werden.
✔ Keine Notwendigkeit, Abhängigkeiten zu verwalten
✖ Nur als letzte Option von React Docs
empfohlen. ✖ Wichtigerer Ansatz

Weitere Informationen finden Sie unter diesen Links: 1 2 3

Answer 8

3

Wow, das ist eine Belohnung für eine Antwort!

Kremuwa

Answer 9

8

neue Antwort:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [])

Übergeben Sie bei Verwendung setUserTextdie Funktion als Argument anstelle des Objekts. prevUserTextDies ist immer der neueste Status.

alte Antwort:

Versuchen Sie dies, es funktioniert genauso wie Ihr ursprünglicher Code:

useEffect(() => {
  function handlekeydownEvent(event) {
    const { key, keyCode } = event;
    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${userText}${key}`);
    }
  }

  document.addEventListener('keyup', handlekeydownEvent)
  return () => {
    document.removeEventListener('keyup', handlekeydownEvent)
  }
}, [userText])

weil es in Ihrer useEffect()Methode von der userTextVariablen abhängt , aber Sie es nicht in das zweite Argument einfügen, sonst userTextwird das immer ''mit dem Argument an den Anfangswert gebunden[] .

Sie müssen dies nicht tun, sondern möchten Sie nur wissen lassen, warum Ihre zweite Lösung nicht funktioniert.

Spark.Bao
quelle

Durch Hinzufügen [userText]ist genau das gleiche wie ohne zweites Argument, oder? Grund dafür ist, dass ich nur userTextim obigen Beispiel habe und ohne zweites Argument einfach bedeutet, bei jeder Änderung von Requisiten / Status erneut zu rendern. Ich sehe nicht, wie es meine Frage beantwortet. ** P / S: ** Ich bin nicht der Downvoter, trotzdem danke für deine Antwort

Isaac

hey @Isaac, yep, es ist dasselbe wie ohne zweites Argument. Ich möchte Sie nur wissen lassen, warum Ihre zweite Lösung nicht funktioniert, da Ihre zweite Lösung useEffect()von der userTextVariablen abhängt, Sie aber die zweiten Argumente nicht eingegeben haben.

Spark.Bao

Wenn Sie jedoch hinzufügen [userText], bedeutet dies auch, dass Sie das Ereignis bei jedem erneuten Rendern registrieren und abmelden müssen, oder?

Isaac

genau! Deshalb sage ich, dass es bei Ihrer ersten Lösung genauso ist.

Spark.Bao

1

Ich habe verstanden, was Sie meinen, wenn Sie es in diesem Beispiel wirklich nur einmal registrieren möchten, müssen Sie es useRefgenau wie die Antwort von @Maaz Syed Adeeb verwenden.

Spark.Bao

Answer 10

Durch Hinzufügen [userText]ist genau das gleiche wie ohne zweites Argument, oder? Grund dafür ist, dass ich nur userTextim obigen Beispiel habe und ohne zweites Argument einfach bedeutet, bei jeder Änderung von Requisiten / Status erneut zu rendern. Ich sehe nicht, wie es meine Frage beantwortet. ** P / S: ** Ich bin nicht der Downvoter, trotzdem danke für deine Antwort

Isaac

Answer 11

hey @Isaac, yep, es ist dasselbe wie ohne zweites Argument. Ich möchte Sie nur wissen lassen, warum Ihre zweite Lösung nicht funktioniert, da Ihre zweite Lösung useEffect()von der userTextVariablen abhängt, Sie aber die zweiten Argumente nicht eingegeben haben.

Spark.Bao

Answer 12

Wenn Sie jedoch hinzufügen [userText], bedeutet dies auch, dass Sie das Ereignis bei jedem erneuten Rendern registrieren und abmelden müssen, oder?

Isaac

Answer 13

genau! Deshalb sage ich, dass es bei Ihrer ersten Lösung genauso ist.

Spark.Bao

Answer 14

1

Ich habe verstanden, was Sie meinen, wenn Sie es in diesem Beispiel wirklich nur einmal registrieren möchten, müssen Sie es useRefgenau wie die Antwort von @Maaz Syed Adeeb verwenden.

Spark.Bao

Answer 15

1

Benötigt für Ihren Anwendungsfall useEffectein Abhängigkeitsarray, um Änderungen zu verfolgen, und basierend auf der Abhängigkeit kann bestimmt werden, ob erneut gerendert werden soll oder nicht. Es wird immer empfohlen, ein Abhängigkeitsarray an zu übergebenuseEffect . Bitte beachten Sie den folgenden Code:

Ich habe useCallbackHaken eingeführt .

const { useCallback, useState, useEffect } = React;

  const [userText, setUserText] = useState("");

  const handleUserKeyPress = useCallback(event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(prevUserText => `${prevUserText}${key}`);
    }
  }, []);

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, [handleUserKeyPress]);

  return (
    <div>
      <blockquote>{userText}</blockquote>
    </div>
  );

Codejockie
quelle

Ich habe Ihre Lösung ausprobiert, aber es ist genau das gleiche wie [userText]oder ohne zweites Argument. Grundsätzlich setzen wir ein console.logInnen useEffect, wir werden sehen, dass die Protokollierung jedes Re-Rendering auslöst, was auch bedeutet, dass addEventListenderjedes Re-Rendering ausgeführt wird

Isaac

Ich möchte glauben, dass dies ein erwartetes Verhalten ist. Ich habe meine Antwort aktualisiert.

Codejockie

In Ihrer Sandbox haben Sie eine Anweisung console.log('>');in useEffectHooks eingefügt. Wenn Sie Ihren aktualisierten Code verwenden, wird dieser immer noch protokolliert. Dies bedeutet auch, dass die Ereignisse bei jedem erneuten Rendern registriert werden

Isaac

1

aber wegen return () => {window.removeEventListener('keydown', handleUserKeyPress)}, bei jedem erneuten Rendern wird die Komponente registriert und abgemeldet

Isaac

1

Genau das Verhalten, das ich mir gewünscht habe, aber Sie können es beobachten @ Codesandbox.io/s/n5j7qy051j

Isaac

Answer 16

Ich habe Ihre Lösung ausprobiert, aber es ist genau das gleiche wie [userText]oder ohne zweites Argument. Grundsätzlich setzen wir ein console.logInnen useEffect, wir werden sehen, dass die Protokollierung jedes Re-Rendering auslöst, was auch bedeutet, dass addEventListenderjedes Re-Rendering ausgeführt wird

Isaac

Answer 17

Ich möchte glauben, dass dies ein erwartetes Verhalten ist. Ich habe meine Antwort aktualisiert.

Codejockie

Answer 18

In Ihrer Sandbox haben Sie eine Anweisung console.log('>');in useEffectHooks eingefügt. Wenn Sie Ihren aktualisierten Code verwenden, wird dieser immer noch protokolliert. Dies bedeutet auch, dass die Ereignisse bei jedem erneuten Rendern registriert werden

Isaac

Answer 19

1

aber wegen return () => {window.removeEventListener('keydown', handleUserKeyPress)}, bei jedem erneuten Rendern wird die Komponente registriert und abgemeldet

Isaac

Answer 20

1

Genau das Verhalten, das ich mir gewünscht habe, aber Sie können es beobachten @ Codesandbox.io/s/n5j7qy051j

Isaac

Answer 21

Sie benötigen eine Möglichkeit, den vorherigen Status zu verfolgen. useStatehilft Ihnen, nur den aktuellen Status zu verfolgen. In den Dokumenten können Sie mithilfe eines anderen Hooks auf den alten Status zugreifen.

const prevRef = useRef();
useEffect(() => {
  prevRef.current = userText;
});

Ich habe Ihr Beispiel aktualisiert, um dies zu verwenden. Und es klappt.

const { useState, useEffect, useRef } = React;

const App = () => {
  const [userText, setUserText] = useState("");
  const prevRef = useRef();
  useEffect(() => {
    prevRef.current = userText;
  });

  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      setUserText(`${prevRef.current}${key}`);
    }
  };

  useEffect(() => {
    window.addEventListener("keydown", handleUserKeyPress);

    return () => {
      window.removeEventListener("keydown", handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );
};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Erweitern Sie das Snippet

Answer 22

Beim zweiten Ansatz wird das useEffectnur einmal gebunden und daher wird das userTextnie aktualisiert. Ein Ansatz wäre, eine lokale Variable beizubehalten, die userTextbei jedem Tastendruck zusammen mit dem Objekt aktualisiert wird.

  const [userText, setUserText] = useState('');
  let local_text = userText
  const handleUserKeyPress = event => {
    const { key, keyCode } = event;

    if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
      local_text = `${userText}${key}`;
      setUserText(local_text);
    }
  };

  useEffect(() => {
    window.addEventListener('keydown', handleUserKeyPress);

    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );

Persönlich mag ich die Lösung nicht, fühle anti-reactmich und ich denke, die erste Methode ist gut genug und wurde entwickelt, um auf diese Weise verwendet zu werden.

Answer 23

Haben Sie etwas dagegen, Code einzufügen, um zu demonstrieren, wie ich mein Ziel in der zweiten Methode erreichen kann?

Isaac

Answer 24

Sie haben keinen Zugriff auf den geänderten useText-Status. Sie können es dem vorherigen Status zuordnen. Speichern Sie den Zustand in einer Variablen, zB: Zustand wie folgt:

const App = () => {
  const [userText, setUserText] = useState('');

  useEffect(() => {
    let state = ''

    const handleUserKeyPress = event => {
      const { key, keyCode } = event;
      if (keyCode === 32 || (keyCode >= 65 && keyCode <= 90)) {
        state += `${key}`
        setUserText(state);
      }   
    };  
    window.addEventListener('keydown', handleUserKeyPress);
    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };  
  }, []);

  return (
    <div>
      <h1>Feel free to type!</h1>
      <blockquote>{userText}</blockquote>
    </div>
  );  
};

Wie registriere ich ein Ereignis mit useEffect-Hooks?

Antworten:

Problem

Lösung

1. Statusaktualisierungsfunktion

2. useReducer- "Cheat-Modus"

3. useCallback / event handler insideuseEffect

4. useRef/ Rückruf in veränderlicher Referenz speichern

2. `useReducer`- "Cheat-Modus"

3. `useCallback` / event handler inside`useEffect`

4. `useRef`/ Rückruf in veränderlicher Referenz speichern