API

onClick{(){setCount(count1)}}加1/buttonName

name{name}/Name/)

Name(props){console.log(Name组件重新渲染了);return

点击按钮count改变后整个App组件会重新渲染即使Name组件的props没有改变Name组件也被重新渲染了

如果一个过于复杂的组件的props没有改变那么重新渲染它会增加渲染负担

props

没有改变这个记忆化版本就不会在其父组件重新渲染时重新渲染。

这就称之为记忆化是一种性能优化的办法

因此memo

将需要进行记忆化的组件用memo包裹起来通过arePropsEqual函数判断props是否变化可自定义不写就默认使用Object.is()判断然后返回新的react组件

import

onClick{(){setCount(count1)}}加1/buttonName

name{name}/Name/)

不传入arePropsEqual函数就默认用Object.is判断

const

Name(props){console.log(Name组件重新渲染了);return

上面提到了不自定义比较函数的话memo采用Object.is()方法来比较props是否变化

但是Object.is()只能比较浅层数据是否变化如果对复杂数据类型进行比较会发现

结果为false这表明了传入复杂数据类型的prop仍会导致memo组件重新渲染

import

onClick{(){setCount(count1)}}加1/buttonName

不传入arePropsEqual函数就默认用Object.is判断

const

Name(props){console.log(Name组件重新渲染了,props);return

如何避免

函数也是复杂数据类型中的一种所以传入的就算是同一个函数父组件的重新渲染也会引起记忆化的组件重新渲染这样memo就失效了

针对props传入的函数就要采用另一个HookuseCallback

(4)使用自定义比较函数

一定要确保使用比较函数的时间比重新渲染要快不然写个比较函数还浪费那么久时间简直白白干了

const

oldProps.dataPoints.every((oldPoint,

index)

newProps.dataPoints[index];return

oldPoint.x

注意比较函数内一定要将props的所有prop都比较到包括函数。

避免在

确定你正在处理的数据结构具有已知有限的深度。

深比较可能会变得非常缓慢并且如果有人稍后更改数据结构这可能会卡住你的应用数秒钟。

3.什么时候使用memo

api并不是是个组件就给安上的首先要考虑到组件的重新渲染对页面会不会造成影响比如有动画的组件重新渲染会导致动画重新播放如果不想变化的话就加个memo

(二)useMemo

举例用counterFilter模拟运行时间长的函数每次点击todo长度加1按钮都会等待0.5s

不使用useMemo的话即使len不发生改变count发生改变时也会重新渲染运行counterFilter

使用useMemo()后当len发生改变时才会重新计算todoSlice的值而点击count1按钮不会造成卡顿

import

这里todos是个数组也过不了Object.is()所以套一层useMemoconst

todos

}}count加1/button{todoSlice.map(value

key{value}todo:

Hook设计来是用于存储运算时间长的计算结果以避免重复渲染的一种优化手段我自认为是这样

2.useMemo实现组件记忆化

术业有专攻记忆函数要使用react专门提供的一个hook也就是下面要讲到的

(三)useCallback

将返回在最新一次渲染中传入的函数并且将其缓存以便之后使用。

React

不会调用此函数而是返回此函数。

你可以自己决定何时调用以及是否调用。

props、state和所有在你组件内部直接声明的变量和函数。

函数setName本质是对象即使传入的函数没有改变Object.is()判断也是false这样就导致memo失去了记忆化

function

onClick{(){setCount(count1)}}加1/buttonName

name{name}

setName{(name){setName(name)}}/Name/)

}const

Name(props){console.log(Name组件重新渲染了);return

onClick{()

这个useCallback里的依赖数组为空是因为setName这个函数本身就是不变的不受变量影响

import

onClick{(){setCount(count1)}}加1/buttonName

name{name}

setName{setNameCallback}/Name/)

}const

Name(props){console.log(Name组件重新渲染了);return

onClick{()

今天学了memo、useMemo、useCallback感觉花太多时间在memo上了后面两个hook就写的稍微有点水有点漏洞

memo用于实现组件记忆化如果props传递的是对象那么memo就没意义了

useMemo立即执行函数返回结果并保存。

可以和memo结合使用传递props不变则不重新渲染也可以用于存储较花费事件的数据

useCallback和memo结合使用是保存函数但不会执行。