江苏电商网站开发,苍溪县规划和建设局网站,音乐网站开发背景及意义,安康市城市建设开发总公司网站因个人工作原因#xff0c;在2023年学起了React TS 这个 “前端大佬” “高阶玩家” 标配的技术栈#xff0c;一套学习下来个人总结就是#xff1a;React真特么难用#xff01;传染病式的渲染逻辑是真让人难受#xff01;维护之前的代码就是深渊#xff01;难怪React项目…因个人工作原因在2023年学起了React TS 这个 “前端大佬” “高阶玩家” 标配的技术栈一套学习下来个人总结就是React真特么难用传染病式的渲染逻辑是真让人难受维护之前的代码就是深渊难怪React项目标配TS没个TS给这货加点限制这玩意写出来的代码就更没法看了——以上总结仅代表个人使用感受至于React的设计如何牛逼我感受不到我也不配讨论勿喷
如何解决React组件抽风式的刷新问题小编使用解释和源码示例的方式讲解一下
memo
父组件属性变化都会导致子组件重新执行即使传入子组件props没有任何变化甚至子组件没有依赖于任何props属性都会导致子组件重新渲染 使用memo包裹子组件时只有props发生改变子组件才会重新渲染,以提升一定的性能
// 子组件
// 若不适用 memo API,父组件每次跟新 time 时子组件都会重新渲染输出 List 被渲染
const List memo((props:{list:Arraystring
}){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 ] useStatestring[]([]);useEffect((){setTimeout(() {setTime(time1);}, 1000);},[time])return (h1页面浏览时长{time}秒/h1List list{list} //);
};
useMemo
父组件将一个值传递给子组件若父组件的其他值发生变化时子组件也会跟着渲染多次会造成性能浪费 useMemo是将父组件传递给子组件的值缓存起来只有当 useMemo中的第二个参数状态变化时子组件才重新渲染useMemo便是用于缓存该函数的执行结果仅当依赖项改变后才会重新计算
// 子组件
const List memo((props:{oddOrEven?:string,list:Arraystring
}){console.log(List 被渲染)return (h3列表长度为{props.oddOrEven}/h3ol{props?.list.map(item{return ( li key{item}{item}/li )})}/ol/)
})export default () { const [ time,setTime ] useState(0);const [ list,setList ] useStatestring[]([]);useEffect((){setTimeout(() {setTime(time1);}, 1000);},[time])// 奇数或偶数// 当传递给子组件的值是通过函数返回的情况下需要使用 useMemo Hookconst oddOrEven useMemo((){return (list.length % 2 0 ? 偶数:奇数);},[list])return (h1页面浏览时长{time}秒/h1List list{list} oddOrEven{oddOrEven} //);
};
useCallback
父组件将一个方法传递给子组件若父组件的其他状态发生变化时子组件也会跟着渲染多次会造成性能浪费 usecallback是将父组件传给子组件的方法给缓存下来只有当 usecallback中的第二个参数状态变化时子组件才重新渲染如果传入的props包含函数父组件每次重新渲染都是创建新的函数所以传递函数子组件还是会重新渲染即使函数的内容还是一样我们希望把函数也缓存起来于是引入useCallback
// 子组件
const List memo((props:{list:Arraynumber,click:(number:any)void
}){console.log(List 被渲染)return (button typebutton onClick{(){const t new Date().getTime();props.click(t);}}添加/buttonol{props?.list.map(item{return ( li key{item}{item}/li )})}/ol/)
})export default () {const [ time,setTime ] useState(0);const [ list,setList ] useStatenumber[]([]);useEffect((){setTimeout(() {setTime(time1);}, 1000);},[time])// 若传递给子组件的属性有函数需要使用 useCallback Hook否则子组件发疯式的重新渲染const handleClick useCallback((time:number){setList([...list,time])},[list])return (h1页面浏览时长{time}秒/h1List list{list} click{ handleClick } //);
};
useMemo 和 useEffect 区别
useEffect是在DOM改变之后触发useMemo在DOM渲染之前触发useEffect可以帮助我们在DOM更新完成后执行某些副作用操作如数据获取setState不要在这个useMemo函数内部执行与渲染无关的操作诸如副作用这类的操作属于 useEffect 的适用范畴而不是 useMemo在useMemo中使用setState你会发现会产生死循环并且会有警告因为useMemo是在渲染中进行的你在其中操作DOM后又会导致触发memo
小分享我每次看完React文档后我觉得我学会了过一周后我发现自己还没学会。。这玩意坑到底还有多少我醉了 作者黄河爱浪 本文原创著作权归作者所有转载请注明原链接及出处
