本文可能会让你感觉到很啰嗦，我想尽量线索清晰，但是好像有点失败...
1. 背景
先看下面这段代码
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. 使用什么方法解决
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
