useMemo

作者: 就问你怕不怕 | 来源:发表于2021-12-08 09:39 被阅读0次

    useMemo:根据名字翻译为"备忘录",他在react的hooks中发挥什么样的作用呢?
    先根据查找到的资料,发现它的用法同useEffect很像,也是接受第二个参数作为判断是否执行useMemo的依赖项。
    其实它是解决这样的一个场景中的问题,先看代码:

    import { useState, useMemo} from "react";
    import * as ReactDOM from "react-dom";
    // 产品名称列表
    const nameList = ['apple', 'peer', 'banana', 'lemon']
    function App() {
      // 产品名称、价格
      const [price, setPrice] = useState(0)
      const [name, setName] = useState('apple')
      // 假设有一个业务函数  获取产品的名字
      function getProductName() {
        console.log('getProductName触发')
        return name
      }
      return (
        <>
          <p>{price}</p>
          <p>{getProductName()}</p>
          <button onClick={() => setPrice(price+1)}>价钱+1</button>
          <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </>
      )
    }
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    
    微信截图_20211207172607.png

    在这个示例中,getProductName算作是一个子组件,从内部可以看到它只是使用到了name,因此可以认为它只需要在name发生变更的时候执行,其他的状态和它无关。特别的,如果getProductName中是一个开销非常大的计算,那么其他状态的变更不应该触发它,否则就是一种浪费。

    那么这个问题该如何解决呢?似乎好像一下子想到了useEffect,它可以以第二个数组参数作为依赖,只在依赖项发生变更的时候才执行。但是突然又想到,useEffect的使用语法似乎并不适合这里的getProductName函数,因为useEffect内部如果将getProductName返回,尚不清楚返回的还是不是getProductName函数本身,带着这个问题,我们测试看看useEffect方法返回的是什么东西。

     const test = useEffect(()=>{
        function getProductName() {
          console.log('getProductName触发')
          return name
        }
        return getProductName
    
      }, [name])
      console.log(test)
    
    image.png

    可以看到,将useEffect赋给一个变量且内部返回一个函数,但useEffect函数并不返回任何数据(test是undefined)。因此,使用useEffect的想法失败。
    这个时候让咱们来尝试useMemo吧!

    import { useState, useMemo, useEffect} from "react";
    import * as ReactDOM from "react-dom";
    // 产品名称列表
    const nameList = ['apple', 'peer', 'banana', 'lemon']
    function App() {
      // 产品名称、价格
      const [price, setPrice] = useState(0)
      const [name, setName] = useState('apple')
    
      // 假设有一个业务函数  获取产品的名字
      const memo_getProductName = useMemo(()=>{
        console.log('getProductName触发')
        return name
      }, [name])
      console.log(memo_getProductName)
      
      return (
        <>
          <p>{price}</p>
          <p>{memo_getProductName}</p>
          <button onClick={() => setPrice(price+1)}>价钱+1</button>
          <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </>
      )
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    
    image.png

    可以看到useMemo生效了,当我点击价格按钮,只是价格变动,memo_getProductName内部并没有执行。
    同时发现初始进入页面的时候useMemo也是会执行一次的,这和useEffect保持了一致,也就是相当于在componentDidMount的生命周期会执行。

    由此可得出这个结论:useMemo 返回一个 memoized 值,在依赖参数不变的的情况返回的是上次第一次计算的值,当依赖参数发生变化时useMemo就会自动重新计算返回一个新的 memoized值。
    用自己的理解就是:useMemo基本上同useEffect起到一样的作用,只根据依赖项数组中的状态是否发生变更来判断自己是否需要执行,只是useMemo的执行可返回一个具体的结果供其他地方使用。

    当然,useMemo并不一定需要在内部返回一个什么,也可以是纯粹的在useMemo中写一些逻辑。以下是antd-design中upload组件有一段使用到了useMemo的代码。

      // Control mode will auto fill file uid if not provided
      React.useMemo(() => {
        const timestamp = Date.now();
    
        (fileList || []).forEach((file, index) => {
          if (!file.uid && !Object.isFrozen(file)) {
            file.uid = `__AUTO__${timestamp}_${index}__`;
          }
        });
      }, [fileList]);
    

    只要fileList发生变更,useMemo内部就会执行,useMemo并不需要将自己赋给谁去调用,这个时候和useEffect是完全一样的作用。

    与useEffect?

    如上所述useMemo与useEffect的区别好像并不大,那我是否可以随意混用?带着这个问题,且看官网的一段描述:

    记住,传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作,诸如副作用这类的操作属于 useEffect 的适用范畴,而不是 useMemo。
    你可以把 useMemo 作为性能优化的手段,但不要把它当成语义上的保证。将来,React 可能会选择“遗忘”以前的一些 memoized 值,并在下次渲染时重新计算它们,比如为离屏组件释放内存。先编写在没有 useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo,以达到优化性能的目的。

    这说的什么意思?意思是大多数时候其实并不需要使用到useMemo,除非真的需要做性能优化才考虑到它。
    那么说的“会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作”该如何理解?来写个例子看看。

    import { useState, useMemo, useEffect } from "react";
    import * as ReactDOM from "react-dom";
    // 产品名称列表
    const nameList = ["apple", "peer", "banana", "lemon"];
    function App() {
      // 产品名称、价格
      const [price, setPrice] = useState(0);
      const [name, setName] = useState("apple");
    
      // 假设有一个业务函数  获取产品的名字
      useMemo(() => {
        setName(nameList[(Math.random() * nameList.length) << 0])
      });
    
      return (
        <>
          <p>{price}</p>
          <p>{name}</p>
          <button onClick={() => setPrice(price + 1)}>价钱+1</button>
        </>
      );
    }
    
    const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);
    
    image.png

    我在useMemo中使用尝试使用setState改变一个状态的值,但编辑器自动提示陷入死循环,也就是说,useMemo会在组件渲染的时刻执行,因为初始进入页面useMemo会执行一次,所以name就会被变更,随着name的变更,页面重新渲染,useMemo在这次渲染中又执行,name又被变更...这样就陷入了死循环。
    但是当我在依赖数组中加入price的时候就不会陷入死循环:

      // 假设有一个业务函数  获取产品的名字
      useMemo(() => {
        setName(nameList[(Math.random() * nameList.length) << 0])
      }, [price]);
    

    原因是,在这里的useMemo中只是触发name的变更,加上了price的依赖后排除了name引起的useMemo执行。但这么写其实并没有什么意义,不如直接使用useEffect更直接(当然,useEffect如果在不设依赖项的情况下也不应该setState,否则也会陷入死循环)。
    因此还是官网推荐的:除非非有必要使用useMemo来做性能优化才去选择它。

    我自己感觉useMemo有点像vue中的computed。

    完。

    相关文章

      网友评论

        本文标题:useMemo

        本文链接:https://www.haomeiwen.com/subject/esdaxrtx.html