Hook改变的React Component写法思路(2) - useCallback和useMemo

最新推荐文章于 2025-09-05 14:58:48 发布

原创最新推荐文章于 2025-09-05 14:58:48 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Hook #React #钩子 #useCallback #useMemo

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文探讨如何通过React的useCallback和useMemo Hook优化Component性能。useCallback避免了匿名函数重复声明导致的不必要的渲染，而useMemo则用于缓存计算值，减少重复计算。详细解释了这两个Hook的使用场景和比较参数的重要性。

文章目录

- useCallback把匿名回调“存”起来
- useMemo保存一些计算值

useCallback把匿名回调“存”起来

在之前版本的文档和大牛的blog中都有提到避免在component render时候声明匿名方法，因为这些匿名方法会被反复重新声明而无法被多次利用，然后容易造成component反复不必要的渲染。

在Class component当中我们通常将回调函数声明为类成员：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.clickCallback = this.clickCallback.bind(this);
    }
    clickCallback() {
        // ...
    }
    render() {
        return <button onClick={this.clickCallback}>Click Me!</button>;
    }
}

使用useCallback hook就可以避免bind操作：

function MyComponent(props) {
    const clickCallback = React.useCallback(() => {
        // ...
    }, []);
    return <button onClick={clickCallback}>Click Me!</button>;
}

这个回调也可以接收参数：

function MyComponent(props) {
    const clickCallback = React.useCallback((value) => {
        // ...
    }, []);
    const clickCallbackEmpty = React.useCallback(() => clickCallback(void 0), [clickCallback]);
    return <button onClick={clickCallbackEmpty}>Click Me!</button>;
}

这里我为了不使用匿名函数，额外再声明了一个clickCallbackEmpty回调函数。看起来挺奇怪的，不过实际使用过程中为了提高代码重用性不可避免地有一些这样的用法。

除此之外，如果想避免使用匿名回调，并且必须要传入一些事件对象里没有的参数，那就要考虑拆分component了。

同useEffect一样，useCallback的第二个参数是用于比较memo的上下文中对应值是否变化，如果有变化则会重新声明回调函数。如果这个参数为空数组，则只会在component挂载时运行。如果不存在这个参数，则会在每次渲染时运行。

上例中，clickCallbackEmpty声明时的第二个参数里，传入了clickCallback，因为我在clickCallbackEmpty中调用了clickCallback。我只需要在component挂载时，和clickCallback发生变化时，更新clickCallbackEmpty就好。

实际上监测clickCallback变化在上例中是没有什么卵用的，因为我的clickCallback并不会变化，它的值已经在component挂载时就敲定了。但为了后续增删代码防止出错，个人建议还是加上比较好。

useMemo保存一些计算值

从component props中获得原始数据，计算、转换格式后再显示是非常常见的需求。使用useMemo可以轻松防止不必要的重复计算。

function MyComponent(props) {
    const computedVal = useMemo(() => 
        props.a + props.b,
        [props.a, props.b]
    );
    return <div>{computedVal}</div>;
}

实际上useCallback就等同于

useMemo(() => callback, [var1, var2, ...]);