【React】史上最简单的减少重复渲染思路，原来这么简单？

最新推荐文章于 2024-08-08 13:41:45 发布

东方睡衣

最新推荐文章于 2024-08-08 13:41:45 发布

阅读量1.2k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/web2022050903/article/details/126974516

版权

本文探讨了React应用中由于jsx灵活性导致的粗粒度更新问题，以及如何通过状态下沉、shouldUpdate剪枝和Provider结合状态管理来减少不必要的渲染。总结了状态管理和组件优化的优缺点，强调合理利用React API避免负优化。

摘要由CSDN通过智能技术生成

先说结论

useCallback、useMemo、memo、shouldUpdate，性能优化的API，不出性能问题你是不该使用的，盲目的使用会造成负优化，甚至还会造成延迟闭包的bug，这个结论是共识。

可是这个只是一方面，我主要想切题地讲一讲，除了这些API，React真正减少rerender的思路

React的粗粒度，可能伤及无辜，罪魁祸首 —— jsx的灵活让props难以区分变与不变

App是一个组件，Box是一个子组件

 const App = ()=>{ return <Box h="200px" w="200px" {/*.....*/}>hello</Box>
 }
 // jsx 编译后
 const App = ()=>{  return /*#__PURE__*/ React.createElement(Box, { h: "200px", w: "200px" }, "hello"); 
 };

React采用的策略是全等比较，props比了第一回的{ h: "200px", w: "200px" }和第二回的{ h: "200px", w: "200px" }，虽然看似相等，但是function每次都创建了新的object类型，地址不同，照样渲染，即使是空对象也没辙，也如泄洪一般，从脑袋顶一直渲染到脚底板。Box是会被渲染的