学习记录434@react之userMemo及其与useEffect的区别-CSDN博客

在这里插入图片描述

背景
先看下面这段代码

import React, {Fragment} from 'react'
import { useState, useMemo } from 'react'

// 产品名称列表
const nameList = ['apple', 'peer', 'banana', 'lemon']

const example = (props) => {
    // 产品名称、价格
    const [price, setPrice] = useState(0)
    const [name, setName] = useState('apple')
  
    // 假设有一个业务函数  获取产品的名字
    function getProductName() {
        console.log('getProductName触发')
        return name
    }

    return (
        <Fragment>
            <p>{name}</p>
            <p>{price}</p>
            <p>{getProductName()}</p>
            <button onClick={() => setPrice(price+1)}>价钱+1</button>
            <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </Fragment>
    )
}
export default example

现在问几个问题：
发生下面几种情况会重新渲染界面吗（也就是getProductName函数会被触发）？

点击价钱+1按钮？
点击修改名字按钮？
很显然在进行DOM相关操作（如setState）后，都会触发getProductName函数，但是我们想知道这个产品的名字，产品的价格怎么变不是我们关心的，所以我们需要让这个函数只在产品名字改变的时候再触发，而不是每次重新渲染都触发。

不控制重复渲染容易产生一些奇怪的问题

   // 假设在上面函数组件里面有一个定时任务
       setInterval(() => {
         console.log('触发了定时器')
       }, 5000)

当你点击修改价格或者修改名字的时候，每次都会触发渲染，说白了就是将这个函数组件的函数，再执行一次，显然又会添加一个定时器，这时就容易产生内存泄漏，当然你也可以在组件外部定义一个变量保存定时器id

使用什么方法解决
2.1 useEffect？
最开始遇到这个问题时，由于我刚接触hook,我认为使用useEffect就能解决

// 将上面的函数用useEffect包裹，并设置依赖，只有name发生变化的时候才触发
 useEffect(() => {
    getProductName()
}, [name])

我的想法很简单，就是让getProductName只对name有效果，只有name修改的时候才会执行。
显然这是一个错误的认识，我只理解了useEffect可以设置依赖，并没有理解到副作用到底是什么东西

看下面一段代码

import React, {Fragment} from 'react'
import { useState, useEffect, useCallback, useMemo } from 'react'
import { observer } from 'mobx-react'


const nameList = ['apple', 'peer', 'banana', 'lemon']
const Example = observer((props) => {
    const [price, setPrice] = useState(0)
    const [name, setName] = useState('apple')
    
    
    function getProductName() {
        console.log('getProductName触发')
        return name
    }
    // 只对name响应
    useEffect(() => {
        console.log('name effect 触发')
        getProductName()
    }, [name])
    
    // 只对price响应
    useEffect(() => {
        console.log('price effect 触发')
    }, [price])

    return (
        <Fragment>
            <p>{name}</p>
            <p>{price}</p>
            <p>{getProductName()}</p>
            <button onClick={() => setPrice(price+1)}>价钱+1</button>
            <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </Fragment>
    )
})
export default Example

先看看useEffect的工作顺序，若点击修改名字按钮会打印什么？

> getProductName触发 
> name effect 触发
> getProductName触发

官方文档有说过当你调用 useEffect 时，就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数

所以这个顺序很好理解

因为修改了名字，然后react更改了DOM，触发了getProductName
随后调用了name的effect（在dom更新之后触发，这也是为什么叫做副作用）
effect中调用了getProductName
看看问题解决没有，若点击价钱+1按钮会打印什么？

  > getProductName触发 
  > price effect 触发

我改变的是价格，还是触发了getProductName
稍微分析：
显然当我使用setPrice的时候，产生DOM操作，刷新页面DOM的同时也，触发了在p标签中的getProductName函数
然后调用副作用触发了price的effect
就如前面我所提出的问题，我们的目标是在DOM发生变化时，不相关的函数不需要触发（也就是这里的getProductName在我修改价格的时候不应该触发），而useEffect只能在DOM更新后再触发再去控制，所以这个马后炮并没有什么🐦用

2.2 useMemo？
使用useMemo可以解决这个问题
为什么useMemo可以解决？官方文档说过传入 useMemo 的函数会在渲染期间执行，所以使用useMemo就能解决之前的问题，怎么在DOM改变的时候，控制某些函数不被触发。
和useMemo相近的还有一个useCallback，只是后者返回一个函数useCallback(fn, deps) 相当于 useMemo(() => fn, deps)，这里我们返回一个memo函数，
在上面的代码中加入useMemo作对比

import React, {Fragment} from 'react'
import { useState, useEffect, useCallback, useMemo } from 'react'
import { observer } from 'mobx-react'


const nameList = ['apple', 'peer', 'banana', 'lemon']
const Example = observer((props) => {
    const [price, setPrice] = useState(0)
    const [name, setName] = useState('apple')
    
    
    function getProductName() {
        console.log('getProductName触发')
        return name
    }
    // 只对name响应
    useEffect(() => {
        console.log('name effect 触发')
        getProductName()
    }, [name])
    
    // 只对price响应
    useEffect(() => {
        console.log('price effect 触发')
    }, [price])
  
    // memo化的getProductName函数   🧬🧬🧬
    const memo_getProductName = useMemo(() => {
        console.log('name memo 触发')
        return () => name  // 返回一个函数
    }, [name])

    return (
        <Fragment>
            <p>{name}</p>
            <p>{price}</p>
            <p>普通的name：{getProductName()}</p>
            <p>memo化的：{memo_getProductName ()}</p>
            <button onClick={() => setPrice(price+1)}>价钱+1</button>
            <button onClick={() => setName(nameList[Math.random() * nameList.length << 0])}>修改名字</button>
        </Fragment>
    )
})
export default Example

同样两个问题

点击价钱+1按钮会发生什么

> getProductName触发
> price effect 触发

首先DOM改变，触发在p标签中的getProductName函数
然后调用effect
显然我们已经成功的控制了触发（修改了显示price的dom，但是没有触发memo_getProductName，没有输出’‘name memo 触发’’），
这也是官方为什么说不能在useMemo中操作DOM之类的副作用操作，不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect 的适用范畴，而不是 useMemo，你可以试一下，在useMemo中使用setState你会发现会产生死循环，并且会有警告，因为useMemo是在渲染中进行的，你在其中操作DOM后，又会导致memo触发

点击修改名字按钮会发生什么

> name memo 触发
> getProductName触发
> name effect 触发
> getProductName触发

首先DOM变化，触发name的memo，
然后触发p标签内的getProductName函数
DOM操作结束后触发name的effect
在name的effect中触发getProductName
从这里也可以看出，memo是在DOM更新前触发的，就像官方所说的，类比生命周期就是shouldComponentUpdate

转载自：https://www.jianshu.com/p/94ace269414d
写的真好！