React useMemo useCallback useEffect 的区别（保姆级教程）

编程入门行业动态更新时间:2024-10-08 12:34:13

React useMemo useCallback useEffect 的区别（<a href=https://www.elefans.com/category/jswz/34/1768653.html style= 保姆级教程）"/>

React useMemo useCallback useEffect 的区别（保姆级教程）

因个人工作原因，在2023年学起了React + TS 这个 “前端大佬” “高阶玩家” 标配的技术栈，一套学习下来个人总结就是：React真特么难用！传染病式的渲染逻辑是真让人难受！维护之前的代码就是深渊！难怪React项目标配TS，没个TS给这货加点限制这玩意写出来的代码就更没法看了！——以上总结仅代表个人使用感受，至于React的设计如何牛逼，我感受不到，我也不配讨论，勿喷！

如何解决React组件抽风式的刷新问题，小编使用解释和源码示例的方式讲解一下

memo

父组件属性变化都会导致子组件重新执行，即使传入子组件props没有任何变化，甚至子组件没有依赖于任何props属性，都会导致子组件重新渲染
使用memo包裹子组件时，只有props发生改变子组件才会重新渲染,以提升一定的性能

// 子组件
// 若不适用 memo API,父组件每次跟新 time 时，子组件都会重新渲染，输出 'List 被渲染'
const List = memo((props:{list:Array<string>
})=>{console.log('List 被渲染')return (<><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {const [ time,setTime ] = useState(0);const [ list,setList ] = useState<string[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])return (<><h1>页面浏览时长：{time}秒</h1><List list={list} /></>);
};

useMemo

父组件将一个值传递给子组件，若父组件的其他值发生变化时，子组件也会跟着渲染多次，会造成性能浪费； useMemo是将父组件传递给子组件的值缓存起来，只有当 useMemo中的第二个参数状态变化时，子组件才重新渲染
useMemo便是用于缓存该函数的执行结果，仅当依赖项改变后才会重新计算

// 子组件
const List = memo((props:{oddOrEven?:string,list:Array<string>
})=>{console.log('List 被渲染')return (<><h3>列表长度为：{props.oddOrEven}</h3><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {  const [ time,setTime ] = useState(0);const [ list,setList ] = useState<string[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])// 奇数或偶数// 当传递给子组件的值是通过函数返回的情况下，需要使用 useMemo Hookconst oddOrEven = useMemo(()=>{return (list.length % 2 === 0 ? '偶数':'奇数');},[list])return (<><h1>页面浏览时长：{time}秒</h1><List list={list} oddOrEven={oddOrEven} /></>);
};

useCallback

父组件将一个方法传递给子组件，若父组件的其他状态发生变化时，子组件也会跟着渲染多次，会造成性能浪费； usecallback是将父组件传给子组件的方法给缓存下来，只有当 usecallback中的第二个参数状态变化时，子组件才重新渲染
如果传入的props包含函数，父组件每次重新渲染都是创建新的函数，所以传递函数子组件还是会重新渲染，即使函数的内容还是一样，我们希望把函数也缓存起来，于是引入useCallback

// 子组件
const List = memo((props:{list:Array<number>,click:(number:any)=>void
})=>{console.log('List 被渲染')return (<><button type='button' onClick={()=>{const t = new Date().getTime();props.click(t);}}>添加</button><ol>{props?.list.map(item=>{return ( <li key={item}>{item}</li> )})}</ol></>)
})export default () => {const [ time,setTime ] = useState(0);const [ list,setList ] = useState<number[]>([]);useEffect(()=>{setTimeout(() => {setTime(time+1);}, 1000);},[time])// 若传递给子组件的属性有函数，需要使用 useCallback Hook，否则子组件发疯式的重新渲染const handleClick = useCallback((time:number)=>{setList([...list,time])},[list])return (<><h1>页面浏览时长：{time}秒</h1><List list={list} click={ handleClick } /></>);
};