react-useMemo/useCallback/memo使用单组件内使用父子组件内使用

109 阅读 0 评论 72 点赞

我是靠谱客的博主孤独棒球，这篇文章主要介绍react-useMemo/useCallback/memo使用单组件内使用父子组件内使用，现在分享给大家，希望可以做个参考。

react提供useMemo/useCallback/memo方法，提高页面刷新效率。若组件依赖的属性没有发送变化，组件可以不刷新。以下提供两个场景的具体使用

单组件内使用

使用语法

复制代码

1
2
3
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>

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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变化了，也不会改变标签的

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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次刷新

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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声明

程序响应：

1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
2.每次count变化，子组件都会重新渲染（控制台打印日志counter）

代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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声明

程序响应：

1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
2.当count为2，3的时候，子组件会重新渲染（控制台打印日志counter）

代码如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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声明

程序响应：

1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
2.每次count变化，子组件都会重新渲染（控制台打印日志counter）,原因是btnClick是箭头函数定义的，react页面更新都会重新渲染子组件

代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//函数组件，父组件，子组件
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声明

程序响应：

1. <Counter counter = {double}></Counter> 当count为2，3的时候，double发生变化
2.当count为2，3的时候，子组件会重新渲染（控制台打印日志counter）
1. const btnClick = useCallback(()=>{console.log('click')}, [])，关注useCallback第二个参数，
  ** a.当第二个参数不设置，则每次count变化，子组件都会重新加载，即使counter = {double}不发生变化，因为btnClick是首次加载和更新都会重新加载，导致子组件也会重新加载
  ** b.当第二个参数为[]出现2的现象，原因是子组件的double发生变化
  ** c.当第二个参数为[double]出现2的现象，原因是double发生比变化

代码

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//函数组件，父组件，子组件
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>
)
}