react hooks useMemo

使用语法

import React, { useMemo } from 'react'
useMemo(() => {}, [] ) 

• 1.useMemo第一个参数是函数，第二个参数是数组
• 2.如果第二个参数不传递，与useEffect类似，意味着每次都会执行第一个函数参数，则使用useMem就毫无意义
• 3.如果第二个参数传的是空数组[]， 与useEffect类似，只执行一次,类似类组件componentDidmount
• 4.useMemo与useEffect有不一样的一点就是调用时机 —— useEffect执行的是副作用，所以一定是在渲染之后运行的；而useMemo是需要有返回值的，返回值会参与渲染，所以useMemo是是在渲染期间完成的。
• 5.useMemo，定义了一段函数逻辑，根据第二个参数判断是否执行第一个函数执行

1.case1 （不设置第二个参数，无优化效果）useMemo第二个参数不设置，页面首次加载和页面更新，都会重新加载

const [count, setCount] = useState(0);

const double = useMemo(()=>{

console.log('double')

return count * 2

})//关注点

2.case2 （设置第二个参数为[]，首次加载更新）页面首次加载，控制台打印double；每次点击点击+1，控制台打印无打印日志，同时标签Double始终为0

const [count, setCount] = useState(0);

const double = useMemo(()=>{

console.log('double')

return count + 2

},[])//关注点

3.case3 （设置第二个参数为[arr]，arr变化就会更新）

const double = useMemo(()=>{

console.log('double')

return count + 1

},[count])//关注点