react组件memouseMemouseCallback使用区别示例.docx

第

react组件memouseMemouseCallback使用区别示例

目录正文memo使用useMemo使用useCallback使用

正文

memo用来优化函数组件的重复渲染行为，针对的是一个组件

useMemo返回一个memoized的值

本质都是用同样的算法来判定依赖是否发生改变，继而决定是否触发memo或者useMemo中的逻辑，利用memo就可以避免不必要的重复计算，减少资源浪费

useCallback返回一个memoized的函数

useMemo和useCallback都接收两个参数，第一个参数为fn，第二个参数为[]，数组中是变化依赖的参数memo则可以直接作用于组件，例如

exportdefaultmemo(Mycomponent)

useMemo和useEffect的执行时机是不一致的：useEffect执行的是副作用，所以一定是在渲染之后执行的，useMemo是需要有返回值的，而返回值可以直接参与渲染的，所以useMemo是在渲染期间完成的

memo使用

//父组件

constParent=()={

const[count,setCount]=useState(1)

constaddCount=()={

setCount(count+1)

return(

divaddCount}计数:{count}/div

Child/

//子组件

constChild=memo(()={

console.log(childstart---)

return(

divchild.../div

//使用memo后，子组件的props或者state没有变化时，将不会对子组件进行渲染

useMemo使用

constsum=()={

returna+b

constresult=useMemo(()={sum()},[a,b])

//只有在a或者b的值变化时才会触发sum函数执行

useCallback使用

//父组件，给子组件传递name和changeName方法

constParent=()={

const[count,setCount]=useState(1);

const[name,setName]=useState(bbz);

constaddCount=()={

setCount(count+1);

constchangeName=useCallback((n)={

setName(n);

},[]);

return(

divaddCount}计数:{count}/div

Childname={name}changeName={changeName}/

//子组件

constChild=({name,changeName})={

console.log(childstart---);

return(

()={

changeName(bobozai);

childcomps:{name}

/div

//如果不使用useCallback,则点击父组件计数的同时，子组件会console进行渲染，

//因为更新count时父组件会重新渲染，导致重新生成了一个changeName函数，

//所以子组件的props变了，导致子组件会重新渲染

//而对changeName函数用useCallback进行包裹，则对函数进行缓存不会重新生成

以上就是react组件memouseMemouseCallback使用区别的详细内容，更多关于react组件memouseMemouseCallback的资料请关注其它相关文章！