写文章
  1. 码农之家首页
  2. 前端教程

React性能优化：memo、useMemo、useCallback 深入解析

我心飞翔 • • 前端教程 • 阅读 16

在对 React 项目做性能优化的时候，memeo、useMemo、useCallback 三个API总是形影不离。但对于我们是否正确的使用它们，值得我们深入思考。本文就这三个API进行深入解析

memo

memo 的作用

在 React 的渲染流程中，一般来说，父组件的某个状态发生改变，那么父组件会重新渲染，父组件所使用的所有子组件，都会强制渲染。而在某些场景中，子组件并没有使用父组件传入的没有发生更改的状态时，子组件重新渲染是没有必要的。因此有了 React.memo

memo 的使用

memo 是个高阶组件， 结合了 PurComponent 和 shouldComponentUpdate 功能，会对传入的 props 进行浅比较，来决定是否更新被包裹的组件

memo 接受两个参数：

  • WrapComponent：你要优化的组件
  • (prev, next) => boolean：通过对比 prev（旧 props），next（新 props）是否一致，返回 true（不更新）、false（更新）

注意：memo 只针对 props 来决定是否渲染，且是浅比较

现在我们来看一个的例子：

import { Button } from "antd";
import React, { useState } from "react";

const Child = () => <div>{console.log("子组件又渲染")}</div>;

const Parent = () => {
  const [number, setNumber] = useState(0);
  const [flag, setFlag] = useState(false);

  return (
    <>
      <Child />
      <Button type='primary' onClick={() => setFlag(!flag)}>
        {flag ? "显示" : "隐藏"}
      </Button>
    </>
  );
};

export default Parent;

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

在上面的例子中，父组件中的两个状态 number、flag 都和 Child 组件没有关系，当我点击按钮时，flag 发生改变，此时父组件重新渲染，按钮文案变为显示，控制台却打印出 "子组件又渲染" 的信息，说明子组件也跟着重新渲染了。而这肯定是不合理的，我们不希望子组件做无关的刷新，此时我们可以给子组件加上 React.memo

import { Button } from "antd";
import React, { useState } from "react";

const Child = React.memo(() => <div>{console.log("子组件又渲染")}</div>);

const Parent = () => {
  const [number, setNumber] = useState(0);
  const [flag, setFlag] = useState(false);

  return (
    <>
      <Child />
      <Button type='primary' onClick={() => setFlag(!flag)}>
        {flag ? "显示" : "隐藏"}
      </Button>
    </>
  );
};

export default Parent;

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

在给子组件加上 memo 包裹后，再次点击按钮，flag 发生改变，此时控制台并没有打印 "子组件又渲染" 的信息，说明此时子组件不会做无关的刷新，从而达到了性能优化的目的。

总而言之，如果组件被 memo 包裹，那么组件的 props 不发生改变时，组件不会重新渲染。这样，我们合理的使用 memo 就可以为我们的项目带来很大的性能优化。

memo 的注意事项

虽然，memo 可以帮助我们避免组件无意义的重新渲染，达到性能优化的目的，但是你还是得注意一下 memo 的一些注意事项

memo 对 props 是浅比较

上文我们也说了，memo 对于新旧 props 的比较是浅比较，当一个引用类型的 props 改变时，只要它的地址没有发生改变，那么就算 props 中某一项数据发生了改变，那么被 memo 包裹的组件是不会重新渲染的。

比如下面的例子：

import { Button, Divider } from "antd";
import React, { useState } from "react";

const Child = React.memo((props) => (
  <div>
    {props.list.map((item) => (
      <div style={{marginLeft: '20px'}}> {item} </div>
    ))}
  </div>
));

const Parent = () => {
  const [list, setList] = useState([1, 2, 3]);

  return (
    <>
      <Child list={list} />
      <Divider />
      <Button
        type='primary'
        onClick={() => {
          list.push(4);
          console.log('list', list)
        }}
      >
        点击改变 list
      </Button>
    </>
  );
};

export default Parent;

上面的代码，当我们点击按钮后，运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

我们可以看见，虽然点击了按钮改变了 list，但此时子组件渲染的只有初始的 1 2 3，并没有重新渲染，这是因为虽然 list 内容改变了，但是 list 是引用类型的数据，memo 对新旧 list 进行浅比较，发现地址没变，就不重新渲染。

那这种情况怎么办呢？很简单，返回一个新的数组即可

onClick={() => {
 setList([...list, 4])
}}

React性能优化：memo、useMemo、useCallback 深入解析
此时，再次点击按钮更新 setList，子组件重新渲染

memo 是否用的越多越好

既然 memo 可以对组件进行性能优化，那能不能所有组件都用 memo 包裹呢？

答案肯定是否定的。

因为缓存本身也是需要开销的。如果每一个组件都用 memo 去包裹一下，那么对浏览器的开销就会很大，本末倒置了。

所以我们应该选择性的用 memo 包裹组件，而不是滥用。

在项目中，一般如果一个子组件经常被重新渲染，那需要根据具体情况具体分析，有目的性的去缓存它。

useMemo

useMemo 的作用

useMemo 它可以缓存一个结果，当这个缓存结果不变时，可以借此来进行性能优化。

举个例子：

import { Button, Divider } from "antd";
import React, { useState } from "react";

const Parent = () => {
  const [num, setNum] = useState(0);

  const clickHadler = () => {
    setNum(num + 1)
  }

  const computeResult = () => {
    // 模拟需要花费时间的大量计算
    for(let i = 0; i < 10000; i++) {
      
    }
    
    console.log('进行了大量计算')
  }

  return (
    <>
      {computeResult()}
      number值: {num}
      <Divider />
      <Button
        type='primary'
        onClick={() => clickHadler()}
      >
        点击计算
      </Button>
    </>
  );
};

export default Parent;

在上面的代码中，当我们点击了按钮后，会更改状态 num，导致组件重新渲染，这个时候 computeResult 又会重新执行一遍，又进行依次大量的计算，这样就会增加性能开销，因此，我们可以使用 useMemo 来优化一下。

useMemo 的使用

useMemo 接受两个参数：

  • callback：计算结果的执行函数
  • deps：相关依赖项数组

最终 useMemo 在执行了 callback 后，返回一个结果，这个结果就会被缓存起来。当 deps 依赖发生改变的时候，会重新执行 callback 计算并返回最新的结果，否则就使用缓存的结果

我们来把上面的例子用 useMemo 改造一下

import { Button, Divider } from "antd";
import React, { useState, useMemo } from "react";

const Parent = () => {
  const [num, setNum] = useState(0);

  const clickHadler = () => {
    setNum(num + 1)
  }

  // 使用 useMemo 缓存计算的结果
  const computeResult = useMemo(() => {
    for(let i = 0; i < 10000; i++) {
      
    }

    console.log('进行了大量计算')
  }, [])

  return (
    <>
      {computeResult}
      number值: {num}
      <Divider />
      <Button
        type='primary'
        onClick={() => clickHadler()}
      >
        点击计算
      </Button>
    </>
  );
};

export default Parent;

React性能优化：memo、useMemo、useCallback 深入解析

这样就达到了性能优化的目的

useMemo 的注意事项

useMemo 是不是用的越多越好？

useMemo 并不是用的越多越好，缓存本身也需要开销

比如下面的例子：

const App = () => {
    
    //这种就是完全没必要被 useMemo 缓存的，计算过程一共也就一个创建变量
     const caculateCallback1 = () => {
        let number = 0;
        number = numebr +1;
        return number;
    }

    //这个就需要缓存一下了，毕竟他每次计算的计算量还是蛮大的。
    const caculateCallback2 = () => {
        let number =  0;
        for(let i=0;i<100000;++i){
            number = number +i-(number-i*1.1);
        }
        return number;
    }
    
    return <div>
        不需要缓存：{caculateCallback1()} 
        需要缓存：{caculateCallback2()} 
    </div>
}

useMemo 配合 memo 使用

看下面的例子：

import {useMemo, memo} from 'react';

const Child = React.memo(() => {
  console.log("子组件刷新")
  return <div>子组件</div>
})

const Parent = () => {
  const [num,setNum] = useState(0);
  
  const caculateResult = () => {
      console.log("需要传入子组件的计算属性");
      return 1000;
  }
  
  return (<div>
        <Button 
          type='primary'
          onClick={() => setNum(num + 1)}
        >
           点击更改 num
        </Button>
        <Child result={caculateResult}></Child>
  </div>)
}

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

在上面的代码中，caculateResult 执行计算结果的函数传入了子组件，当点击按钮时，更改了 num，此时虽然子组件被 memo 包裹了，但是子组件也会重新渲染，控制台会打印 “子组件刷新”

这是因为，父组件重新渲染时，又创建了一个函数（或者说又开辟了一个内存地址）赋值给 caculateResult，而 memo 只做浅比较，发现地址改变了，所以子组件重新渲染，这个时候就需要使用 useMemo 来进行优化

import {useMemo, memo} from 'react';

const Child = React.memo(() => {
  console.log("子组件刷新")
  return <div>子组件</div>
})

const Parent = () => {
  const [num,setNum] = useState(0);
  
  const caculateResult = useMemo(() => {
      console.log("需要传入子组件的计算属性");
      return 1000;
  }, [])
  
  return (<div>
        <Button onClick={() => setNum(num + 1)}>
           点击更改 num
        </Button>
        <Child result={caculateResult}></Child>
  </div>)
}

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

此时，再次点击按钮修改 num 后，子组件不会重新更新，达到了性能优化的目的

useCallback

useCallback 的作用

useCallback 类似于 useMemo，只不过 useCallback 用于缓存函数罢了，同样可以防止无关的刷新，对组件做出性能优化

同样也来举个例子：

import { Button, Divider } from "antd";
import React, { useState } from "react";

const Child = (props) => (
  <>
    {props.add()}
  </>
)

const Parent = () => {
  const [num, setNum] = useState(0);

  const add = () => {
    console.log("传入子组件的函数")
  };

  return (
    <div>
      num：{num}
      <Divider />
      <Button type='primary' onClick={() => setNum(num + 1)}>点击更改 num</Button>
      <Child add={add}></Child>
    </div>
  );
};

export default Parent;

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

当我们点击按钮，更改了父组件的 num 状态后，父组件重新渲染，但此时控制台打印 “传入子组件的函数” 这一信息，说明了此时子组件也重新渲染了，但是传入子组件的 add 方法和 num 这个状态没有任何关系，我们肯定不希望它做无关的渲染，因此可以使用 useCallback 对函数进行缓存对组件进行性能优化

useCallback 的使用

useCallback 同样接受两个参数：

  • callback：传入子组件的函数
  • deps：相关依赖项数组

最终 useCallback 会把传入的 callback 缓存起来。当 deps 依赖发生改变的时候，会重新缓存最新的 callback ，否则就使用缓存的结果

我们来把上面的例子用 useCallback 改造一下

import { Button, Divider } from "antd";
import React, { useState, useCallback } from "react";

const Child = (props) => (
  <>
    {props.add()}
  </>
)

const Parent = () => {
  const [num, setNum] = useState(0);
  const [age, setAge] = useState(22);

  // add 用 useCallback 缓存
  const add = useCallback(() => {
    console.log("传入子组件的函数")
  }, [age]);

  return (
    <div>
      num：{num}
      <Divider />
      <Button type='primary' onClick={() => setNum(num + 1)}>点击更改 num</Button>
      <Child add={add}></Child>
    </div>
  );
};

export default Parent;

运行结果如下：

React性能优化：memo、useMemo、useCallback 深入解析

我们发现，虽然我们使用了 useCallback 对 add 进行了缓存，且依赖项是不会改变的 age，但是当点击按钮更改 num 后，控制台同样会打印出信息，此时子组件同样重新渲染了，这是为什么呢？

原来，单独使用 useCallback 起不到优化的作用，反而会增加性能消耗，需要和 memo 一起使用

import { Button, Divider } from "antd";
import React, { useState, useCallback } from "react";

//子组件用 memo 包裹
const Child = React.memo((props) => (
  <>
    {props.add()}
  </>
))

const Parent = () => {
  const [num, setNum] = useState(0);
  const [age, setAge] = useState(22);

  // add 用 useCallback 缓存
  const add = useCallback(() => {
    console.log("传入子组件的函数")
  }, [age]);

  return (
    <div>
      num：{num}
      <Divider />
      <Button type='primary' onClick={() => setNum(num + 1)}>点击更改 num</Button>
      <Child add={add}></Child>
    </div>
  );
};

export default Parent;

再次运行：

React性能优化：memo、useMemo、useCallback 深入解析

此时父组件更改 num 后，子组件不会重新渲染，达到了性能优化的目的。

总结

memo：

  • 父组件重新渲染，没有被 memo 包裹的子组件也会重新渲染
  • 被 memo 包裹的组件只有在 props 改变后，才会重新渲染
  • memo 只会对新旧 props 做浅比较，所以对于引用类型的数据如果发生了更改，需要返回一个新的地址
  • memo 并不是用的越多越好，因为缓存本身也是需要开销的。如果每一个组件都用 memo 去包裹一下，那么对浏览器的开销就会很大，本末倒置了
  • 项目中可以针对刷新频率高的组件，根据实际情况，使用 memo 进行优化

useMemo：

  • useMemo 是对计算的结果进行缓存，当缓存结果不变时，会使用缓存结果
  • useMemo 并不是用的越多越好，对于耗时长、性能开销大的地方，可以使用 useMemo 来优化，但大多数情况下，计算结果的开销还没有使用 useMemo 的开销大，应视情况而定
  • 当父组件传了一个引用类型的结果 result 给子组件，且子组件用 memo 包裹时，需要使用 useMemo 对 result 进行缓存，因为 memo 只对 props 做浅比较，当父组件重新渲染时，会重新在内存中开辟一个地址赋值给 result，此时地址发生改变，子组件会重新渲染

useCallback：

  • useCallback 与 useMemo 类似，只不过是对函数进行缓存
  • useCallback 可以单独使用，但是单独使用的使用对性能优化并没有实质的提升，且父组件此时重新渲染，子组件同样会渲染
  • useCallback 需要配合 memo 一起使用，这样当父组件重新渲染时，缓存的函数的地址不会发生改变，memo 浅比较会认为 props 没有改变，因此子组件不会重新渲染

原文链接：https://juejin.cn/post/7233304089370296357 作者：Jolyne_

赞 (0)
我心飞翔我心飞翔
0 0
上一篇 2023年5月16日 上午10:58
下一篇 2023年5月16日 上午11:09

相关推荐

发表回复

登录后才能评论