React基础之React.memo
React基础之React.memo
允许组件在props没有改变的情况下跳过渲染
React渲染的机制是：只要父组件重新渲染，子组件就会跟着重新渲染，如果子组件不需要进行重新更新，此时就会存在资源浪费
const xxx=memo(
)
import
{
memo
,
useMemo
,
useReducer
,
useState
}
from
“react”
;
//使用memo进行缓存
const
MemoSon
=
memo
(
function
Son
(){
console
.
log
(
'
子组件要重新渲染啦
'
);
return
<
div
this is son
</
div
}
)
function
reducer
(
state
,
action
){
return
state
1
}
function
App
() {
const
[
state
,
dispatch
]=
useReducer
(
reducer
,
0
)
return
(
<
div
className
=
“App”
<
button
onClick
=
{
()
=>
{
dispatch
()}
}
{
state
}
++
</
button
<
MemoSon
/>
</
div
);
}
export default
App
;
此时，点击按钮改变父组件，子组件也不会发生改变
比较机制
机制：使用memoe缓存组件之后，React会对每一个prop使用Object.is比较新值与老值，返回为true，就是没有发生变化
当传入的值为简单类型的时候，如果其发生变化，那么组件就会重新渲染，如果不发生变化，组件就不会重新渲染
当简单类型的值发生变化时
import
{
memo
,
useMemo
,
useReducer
,
useState
}
from
“react”
;
//使用memo进行缓存
const
MemoSon
=
memo
(
function
Son
({
count
}){
console
.
log
(
'
子组件要重新渲染啦
'
);
return
<
div
this is son
{
count
}
</
div
}
)
function
App
() {
const
[
count
,
setCount
]=
useState
(
0
)
const
num
=
100
return
(
<
div
className
=
“App”
<
button
onClick
=
{
()
=>
{
setCount
(
count
1
)}
}
count++
</
button
<
MemoSon
count
=
{
count
}
/>
</
div
);
}
export default
App
;
因此这里传入的count会发生变化，所以说子组件会重新渲染
如果我们传入的简单类型不会发生变化
import
{
memo
,
useMemo
,
useReducer
,
useState
}
from
“react”
;
//使用memo进行缓存
const
MemoSon
=
memo
(
function
Son
({
count
}){
console
.
log
(
'
子组件要重新渲染啦
'
);
return
<
div
this is son
{
count
}
</
div
}
)
function
App
() {
const
[
count
,
setCount
]=
useState
(
0
)
const
num
=
100
return
(
<
div
className
=
“App”
<
button
onClick
=
{
()
=>
{
setCount
(
count
1
)}
}
count++
</
button
<
MemoSon count = { num }
/>
</
div
);
}
export default
App
;
组件就不会重新渲染
当传递的是一个引用类型的props，此时比较的就是新值与旧值是否相等
import
{
memo
,
useMemo
,
useReducer
,
useState
}
from
“react”
;
//使用memo进行缓存
const
MemoSon
=
memo
(
function
Son
({
list
}){
console
.
log
(
'
子组件要重新渲染啦
'
);
return
<
div
this is son
{
list
}
</
div
}
)
function
App
() {
const
[
count
,
setCount
]=
useState
(
0
)
const
list
=[
1
,
2
,
3
]
return
(
<
div
className
=
“App”
<
button
onClick
=
{
()
=>
{
setCount
(
count
1
)}
}
count++
</
button
<
MemoSon
list
=
{
list
}
/>
</
div
);
}
export default
App
;
因为传入的props时引用类型，当父组件因为按钮发生变化的时候，会产生新的数组类型，所以说子组件中的props每次都会发生变化
但是如果存储引用类型不发生改变，不需要引起子组件的重新渲染的话，我们可以使用useMeno来修饰变量
import
{
memo
,
useMemo
,
useReducer
,
useState
}
from
“react”
;
//使用memo进行缓存
const
MemoSon
=
memo
(
function
Son
({
list
}){
console
.
log
(
'
子组件要重新渲染啦
'
);
return
<
div
this is son
{
list
}
</
div
}
)
function
App
() {
const
[
count
,
setCount
]=
useState
(
0
)
const list = useMemo (() => {
return [ 1 , 2 , 3 ]
},[])
return
(
<
div
className
=
“App”
<
button
onClick
=
{
()
=>
{
setCount
(
count
1
)}
}
count++
</
button
<
MemoSon
list
=
{
list
}
/>
</
div
);
}
export default
App
;
此时，就算父组件发生变化，这里的数组不会发生变化，所以说不会引起子组件发生变化
