react 组件优化

101 阅读1分钟

image.png

useMemo和useCallback

相同点:用法上很相似,都是传递一个function和一个依赖项数组,两者都是局部的pure。
不同点:useMemo返回的是function执行后的结果,useCallback返回的是function。 用途:useMemo一般用来缓存复杂计算的值,useCallback一般用来缓存props里的function,避免不必要的更新。

shouldComponentUpdate,pureComponent,memo

这三者都是在组件级别进行缓存。
shouldComponentUpdate是class组件里用在props和state更新时,用来判断组件是否需要更新,返回true or false。
pureComponent会对组件的props进行浅比较。
memo是给函数组件用的,跟pureComponent很像,但是可以传递一个自定义函数,如果函数返回true,则取缓存的dom返回,否则重新渲染。