Heim  >  Fragen und Antworten  >  Hauptteil

Wie läuft der useCallback-Hilfecode schneller?

<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>
P粉924915787P粉924915787449 Tage vor477

Antworte allen(1)Ich werde antworten

  • P粉834840856

    P粉8348408562023-08-19 00:29:53

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

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

    例如,如果您需要将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做一些事情
    })

    Antwort
    0
  • StornierenAntwort