聊聊渲染优化

Posted 2021-05-01 兔老白爱分享

作为「页面切图工程师」一定要关注页面渲染性能，只要用心关注，还是有很多技巧的

  减少DOM层级

除了合理设计页面布局，React官方还提供了React.Fragment, 用于减少非必要的包裹标签, 不过现在通常使用 <></> 

class Index extends PureComponent {
 render() {
 return (
 <>
 <p>title</p>
 <p>subTitle</p>
 </>
 )
 }
}

  使用函数式组件

如果组件不依赖生命周期且无状态，优先使用函数式组件；组件无须被实例化，不用分配多余内存「能省一点是一点」

const Index = (props) => {
 const { name } = props;
 return (
 <div>
 `hello ${name}~`
 </div>
 )
}
Index.propTypes = {
 name: PropTypes.string
}

  尽量减少空dom

服务端返回字段不确定，最好每个字段做一层判断「安全第一」

{name && <div>{name}</div>}

虽然很不美观，确实可以减少非必要的渲染耗时。用性能换“优雅”

  避免render负责运算

完全看个人“修为”，尽可能避免在render中处理复杂的运算。

  减少重复渲染

创建类组件的时候，尽量不要直接 extends Component ，推荐使用PureComponent

import React, { PureComponent } from 'react'
class Index extends PureComponent {
 render() {
 return (
 <div>
 user PureComponent
 </div
 )
 }
}

  按需加载「闲时加载」

有些框架会自动处理，组件按需加载。但是闲时加载这块还没研究过

参考资料

【1】https://www.infoq.cn/article/KVE8xtRs-uPphptq5LUz

https://juejin.im/post/5d045350f265da1b695d5bf2#0%EF%B8%8F%E2%83%A3-%E4%B8%8D%E8%A6%81%E5%9C%A8%E6%B8%B2%E6%9F%93%E5%87%BD%E6%95%B0%E9%83%BD%E8%BF%9B%E8%A1%8C%E4%B8%8D%E5%BF%85%E8%A6%81%E7%9A%84%E8%AE%A1%E7%AE%97

【2】https://react.docschina.org/docs/optimizing-performance.html

https://segmentfault.com/a/1190000020353236