Wie läuft der useCallback-Hilfecode schneller?

Question

Man sagt also, dass useCallback eine Funktion zwischenspeichern kann. Ich denke, die Absicht besteht darin, die Ausführung des Codes zu beschleunigen.

Wenn ich beispielsweise Folgendes habe:

 const handleChange = (ev) =>
    setMsg(ev.target.value);
  };

Ich könnte es auch ändern in:

 const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);

Die Funktion wird jetzt zwischengespeichert. Muss diese Funktion jedoch trotzdem erstellt werden, wenn die Komponente erneut gerendert wird?

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.

Siehe: https://codesandbox.io/s/jolly-nightingale-zxqp8k

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?

Answer 1

是的，这是正确的。每次渲染都会创建一个新的函数，然后新的函数会被缓存的函数所替代。

加速并不是因为跳过了创建函数的步骤，而是因为其他代码能够跳过它们自己的工作。这是因为如果它们每次都传递相同的函数，它们就知道没有相关的内容发生了变化。

例如，如果您需要将handleChange传递给useEffect的依赖数组中，每次都传递一个稳定的引用非常重要，否则该effect将在每次渲染时重新运行：

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

或者，如果handleChange作为prop传递给一个组件，并且该组件想要使用React.memo跳过渲染。只有在props没有改变时，才能跳过渲染：

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

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