<p>Man sagt also, dass useCallback eine Funktion zwischenspeichern kann. Ich denke, die Absicht besteht darin, die Ausführung des Codes zu beschleunigen. </p> <p>Wenn ich beispielsweise Folgendes habe: </p> <pre class="brush:js;toolbar:false;"> const handleChange = (ev) => setMsg(ev.target.value); }; </pre> <p>Ich könnte es auch ändern in: </p> <pre class="brush:js;toolbar:false;"> const handleChange = useCallback((ev) => { setMsg(ev.target.value); }, []); </pre> <p>Die Funktion wird jetzt zwischengespeichert. Muss diese Funktion jedoch trotzdem erstellt werden, wenn die Komponente erneut gerendert wird? </p> <p>Um es zu testen, habe ich es in ein IIFE geändert, sodass die Funktion von dort ausgegeben wurde, und es wurde ausgedruckt, dass die Funktion ausgegeben wurde. </p> <p>Siehe: https://codesandbox.io/s/jolly-nightingale-zxqp8k</p> <p>Jedes Mal, wenn Sie etwas in das Eingabefeld eingeben, wird eine neue Funktion ausgegeben, wie in der Konsole angezeigt. Dies bedeutet, dass das IIFE jedes Mal ausgeführt wird, was auch bedeutet, dass das Funktionsliteral jedes Mal in ein Funktionsobjekt konvertiert wird, auch wenn es kein IIFE ist. Wie läuft dieser Hilfecode also schneller? </p>

useEffect(() => {
  // ... 使用handleChange做一些事情
}, [handleChange]);

const Parent = () => {
  const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);
  return <Child handleChange={handleChange}/>
}

const Child = React.memo(({ handleChange }) => {
  // ... 使用handleChange做一些事情
})