React—useMemo与useCallback

Love The Way You Lie 2023-06-08 04:44 44阅读 0赞

看到“memo”这个字眼，很多人应该会想到`memo`方法。这是一个高阶函数，它会返回一个函数组件，作用相当于`PureComponent`。

而`useMemo`的作用也有点像，只不过它不是作用在函数组件上，而是在一段逻辑上，例如：

const [count, setCount] = useState(0);
    
    const doubleCount = useMemo(() => {
        
        return 2 * count;
    }, [count]);

`useMemo`的用法与`useEffect`非常相似，如果第二个参数为空则函数组件每次被渲染，`useMemo`内的逻辑都会被执行。如果第二个参数为一个空数组，那么仅会在组件第一次被渲染时执行。**其他的情况都是在数组内元素完全相同时才不执行。**

那么上面代码中的`doubleCount`是依赖`count`计算出来的，那么很显然当`count`没有发生变化，`doubleCount`计算出的结果也不会变化，因此也就没有必要重复计算，这就是`useMemo`最主要的作用，就是**性能优化的手段**。

在上面的代码中，`useMemo`内的计算依赖于`count`，因此需要把`count`添加到第二个参数中。**理论上所有`useMemo`内依赖的变量都一个添加到第二个参数中**。

需要注意的是，`useMemo`尽管看起来跟`useEffect`用法很像，但是`useEffect`是执行在渲染完成后，而`useMemo`则是在渲染期间执行的，所以`useMemo`中不要执行一些有副作用的操作。

--------------------

给子组件传递回调函数时，会出现因为每次传递给子组件的回调函数的句柄不同（逻辑相同）而出现的不必要的渲染。因此我们希望能够传递给子组件句柄相同的回调函数。那么就可以用到`useMemo`了：

const callback useMemo(()=>{
        
        return () => {
        
            console.log('this is a callback');
        }
    }, [])

而`useCallback`就可以理解为一个语法糖，它省略了`return`：

const callback useCallback(()=>{
        
        console.log('this is a callback');
    }, [])

还没有评论，来说两句吧...