react提供useMemo/useCallback/memo方法，提高页面刷新效率。若组件依赖的属性没有发送变化，组件可以不刷新。以下提供两个场景的具体使用
单组件内使用
使用语法
import React, { useMemo } from 'react'
useMemo(() => {}, [] )
- 1.
useMemo第一个参数是函数，第二个参数是数组 - 2.如果第二个参数不传递，与
useEffect类似，意味着每次都会执行第一个函数参数，则使用useMem就毫无意义 - 3.如果第二个参数传的是空数组
[]， 与useEffect类似，只执行一次,类似类组件componentDidmount - 4.
useMemo与useEffect有不一样的一点就是调用时机 —— useEffect执行的是副作用，所以一定是在渲染之后运行的；而useMemo是需要有返回值的，返回值会参与渲染，所以useMemo是是在渲染期间完成的。 - 5.
useMemo，定义了一段函数逻辑，根据第二个参数判断是否执行第一个函数执行
useMemo
case1 （不设置第二个参数，无优化效果）
-
useMemo第二个参数不设置 - 代码表现：每次点击
点击+1，控制台打印double，同时标签Double每次刷新 - 代码解析：
useMemo第二个参数不设置，页面首次加载和页面更新，都会重新加载<div>Double is :{double}</div>
import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'
// 函数组件，当前组件中useMemo的使用
function App() {
const [count, setCount] = useState(0)
const double = useMemo(()=>{
console.log('double')
return count * 2
})//关注点
return (
<div>
<button onClick={() => {
setCount(count + 1)
}}>点击+1
</button>
<div>Count is :{count}</div>
<div>Double is :{double}</div>
</div>
)
}
case2 （设置第二个参数为[]，首次加载更新）
-
useMemo第二个参数设置为[]，这组件只会在页面首次加载更新，类似类组件的componentDidMount - 代码表现：页面首次加载，控制台打印
double；每次点击点击+1，控制台打印无打印日志，同时标签Double始终为0 - 代码解析：
useMemo第二个参数设置[]，<div>Double is :{double}</div>只有在首次页面加载，即double变化了，也不会改变标签的
import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'
// 函数组件，当前组件中useMemo的使用
function App() {
const [count, setCount] = useState(0)
const double = useMemo(()=>{
console.log('double')
return count * 2
},[]) //关注点
return (
<div>
<button onClick={() => {
setCount(count + 1)
}}>点击+1
</button>
<div>Count is :{count}</div>
<div>Double is :{double}</div>
</div>
)
}
case3 （设置第二个参数为[count===2]）
-
useMemo第二个参数设置为[count===2] - 代码表现：页面首次加载，控制台打印
double；点击点击+1，当count=2，count=3的时候控制台打印double，同时标签<div>Double is :{double}</div>更新两次，分别为Double is :4和Double is :6 - 代码解析：
useMemo第二个参数设置[count===2]，表示当count===2的时候才会更新组件，count从1，2，3对应count===2变化为false, true, false，因此只有2次刷新
import React, {useState, useCallback, useEffect, useMemo, memo} from 'react'
// 函数组件，当前组件中useMemo的使用
function App() {
const [count, setCount] = useState(0)
const double = useMemo(()=>{
console.log('double')
return count * 2
},[count===2]) //关注点
return (
<div>
<button onClick={() => {
setCount(count + 1)
}}>点击+1
</button>
<div>Count is :{count}</div>
<div>Double is :{double}</div>
</div>
)
}
父子组件内使用
目标：
子组件的依赖属性更新，才会重新加载子组件
操作：
- 1.子组件用
memo声明， - 2.子组件对父组件依赖的
所有属性用useCallback或者useMemo声明
子组件没用memo声明
程序响应：
-
<Counter counter = {double}></Counter>当count为2，3的时候，double发生变化
-
- 2.每次
count变化，子组件都会重新渲染（控制台打印日志counter）
代码如下
function Counter(props) {
console.log('counter')
return (
<div>
double is : {props.counter}
</div>
)
}
function App (){
const [count, setCount] = useState(0)
const double = useMemo(()=>{
return count * 2
}, [count === 2])
return (
<div>
<button onClick={()=>{setCount(count + 1)}}>点击+1</button>
<div>count is : {count}</div>
<Counter counter = {double}></Counter>
</div>
)
}
子组件用memo声明
程序响应：
-
<Counter counter = {double}></Counter>当count为2，3的时候，double发生变化
-
- 2.当count为2，3的时候，子组件会重新渲染（控制台打印日志
counter）
代码如下
const Counter = memo(function Counter(props) {
console.log('counter')
return (
<div>
double is : {props.counter}
</div>
)
})
function App (){
const [count, setCount] = useState(0)
const double = useMemo(()=>{
return count * 2
}, [count === 2])
return (
<div>
<button onClick={()=>{setCount(count + 1)}}>点击+1</button>
<div>count is : {count}</div>
<Counter counter = {double}></Counter>
</div>
)
}
子组件用部分属性useMemo声明
程序响应：
-
<Counter counter = {double}></Counter>当count为2，3的时候，double发生变化
-
- 2.每次
count变化，子组件都会重新渲染（控制台打印日志counter）,原因是btnClick是箭头函数定义的，react页面更新都会重新渲染子组件
代码
//函数组件，父组件，子组件
const Counter = memo(function Counter(props) {
console.log('counter')
return (
<div>
double is : {props.counter}
</div>
)
})
function App (){
const [count, setCount] = useState(0)
const double = useMemo(()=>{
return count * 2
}, [count === 2])
const btnClick = ()=>{
console.log('click')
}
return (
<div>
<button onClick={()=>{setCount(count + 1)}}>点击+1</button>
<div>count is : {count}</div>
<Counter counter = {double} onClick={btnClick}></Counter>
</div>
)
}
子组件用全部属性useMemo/useCallback声明
程序响应：
-
<Counter counter = {double}></Counter>当count为2，3的时候，double发生变化
-
- 2.当count为2，3的时候，子组件会重新渲染（控制台打印日志
counter） -
const btnClick = useCallback(()=>{console.log('click')}, [])， 关注useCallback第二个参数，
** a.当第二个参数不设置，则每次count变化，子组件都会重新加载，即使counter = {double}不发生变化，因为btnClick是首次加载和更新都会重新加载，导致子组件也会重新加载
** b.当第二个参数为[]出现2的现象，原因是子组件的double发生变化
** c.当第二个参数为[double]出现2的现象，原因是double发生比变化
-
代码
//函数组件，父组件，子组件
const Counter = memo(function Counter(props) {
console.log('counter')
return (
<div>
double is : {props.counter}
</div>
)
})
function App (){
const [count, setCount] = useState(0)
const double = useMemo(()=>{
return count * 2
}, [count === 2])
const btnClick = useCallback(()=>{
console.log('click')
}, [])
return (
<div>
<button onClick={()=>{setCount(count + 1)}}>点击+1</button>
<div>count is : {count}</div>
<Counter counter = {double} onClick={btnClick}></Counter>
</div>
)
}
