react hooks--useMemo

在函数式组件开发过程中,我们会发现任何一个state值发生变化,组件都会重新渲染。当我们在一些特殊场景需要限定某个state值发生改变再进行渲染或者说项目越来越复杂需要进行渲染优化时,我们就会用到两个用于性能优化的hooks:useMemo和useCallback。今天我们先讲useMemo

一、基础用法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a,b])

useMemo接受两个参数,第一个为回调函数,第二个参数是依赖的数组。即只有当a或者b发生改变后,则执行useMemo里的回调函数,注意useMemo返回的是计算的结果值。

二、具体案例

组件中有两个state,分别是count(数字)和user(操作人)。我们希望使用useMemo函数来实现一个效果:oprationInfo(返回一个dom)只在user值变更的时候才进行渲染。

在以下案例中,仅当user值发生改变时,operationInfo里面返回的dom节点才会进行重新渲染,除此外,其它dom节点无论是count和user哪个值发生了改变,都会发生重渲染。

import React, { useState, useMemo } from 'react';
import './index.less';

const UseMemoExample: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  const [user, setUser] = useState<string>('小红');

  const oprationInfo = useMemo(() => {
    return (
      <p>
        {console.log('只有当依赖项(即user)变更时才会打印:', user, count)}
        当前操作人--使用useMemo:{user}
        <b>(数字:{count})</b>
      </p>
    );
  }, [user]);

  return (
    <div className="box-wrap">
      {console.log('每次有状态变更都会打印:', count)}
      <p>当前数字:{count}</p>
      <p>
        当前操作人:{user}
        <b>(数字:{count})</b>
      </p>
      {oprationInfo}
      <button onClick={() => setCount(count + 1)}>数字递增</button>
      <button onClick={() => setUser('小明')}>更改操作人</button>
    </div>
  );
};

export default UseMemoExample;

三、效果展示

react hooks--useMemo

刚进入页面时,从控制台打印可以看出,useMemo函数会在组件第一次渲染的时候会执行一次。

结合页面及控制台打印效果,当我们不断点击<数字递增>按钮时,除了标注使用useMemo的数字值没有发生改变,上面两个地方的数值都在不断增加1。当我们增加到5时,点击<更改操作人>按钮,标注使用useMemo的那一栏除了名字发生了改变,数字的值也更改为了5,控制台也打印了相关内容。这说明只有user值发生改变,useMemo函数才会进行渲染。

试想下,举个例子,在开发过程中,父组件可能会存在某个state值频繁变化,而每次这个值都会导致和此值无关的子组件进行重渲染,这是没有必要且消耗性能的事情,这时我们使用useMemo是不是就能解决这类型的性能问题了呢。

感谢您读完本文!如果本文对您有帮助,请点个赞呗,您的点赞是对我最大的支持和认可!

我的公众号:大前端教程,欢迎关注,会定期更新前端知识,希望能帮到您。

react hooks--useMemo

上一篇:React:使用useMemo的问题


下一篇:文件流转换(一般用于axios设置接收文件流设置时responseType: 'blob')