我整理了关于React.memo、useCallback和useMemo的内容

1 年 ago

科, 雅

1 minute

由于有机会涉及React的hooks功能中的React.memo、useCallback和useMemo这三个功能，我将它们进行了总结。

useCallback(関数をメモ化する)(メモ化→キャッシュに保存する)

const handleClick = useCallback(() => {
+    setCountHeavy(countHeavy + 1);
+  }, [countHeavy]);

只要countHeavy不发生改变，handleClick函数就不会被执行。

useMemo(値をメモ化する)

只要countHeavy没有改变，while循环就不会执行。

const handleClick = usememo(() => {
+    while(i < 1000000) {
        i++;
     }
+  }, [countHeavy]);

除非 countHeavy 被更改，否则 handleClick 函数不会被执行。

React.memo(コンポーネントをメモ化する、propsが変更されたら実行)

import React, { useState } from "react";

const Child = React.memo(props => {
console.log("render Child");
return <p>Child: {props.count}</p>;
});

这三个只是在缓存的内容上稍有差异，概念是相同的。
– useCallback= 对函数进行记忆化
– useMemo= 对值进行记忆化
– React.memo= 对组件进行记忆化