React(精读官方文档) -高级指引 -性能优化

性能优化

使用 Chrome Performance 标签分析组件

• 打开 Chrome 开发者工具的 Performance 标签
• 降速显示：cpu -> 4 x slowdown
• 记录： 点类似循环的按钮：Start profiling and reload page
• 停止记录：它会自动停止记录

虚拟长列表

• 用于渲染长列表（上百甚至上千的数据），推荐使用‘虚拟滚动’
• 这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量
• 虚拟滚动库：react-window 、react-virtualized

避免调停

• React 构建并维护了一套内部的 UI 渲染描述，它包含了来自组件返回的 React 元素。该描述使得 React 避免创建 DOM 节点以及没有必要的节点访问，因为 DOM 操作相对于 JavaScript 对象操作更慢
• 简单理解： 避免创建、访问不必要的的DOM节点
• 优化：shouldComponentUpdate、React.PureComponent
• shouldComponentUpdate
• • 该方法会在重新渲染前被触发，其默认实现总是返回 true，让 React 执行更新
• • 如果不需要更新可以让其返回false

    	 shouldComponentUpdate(nextProps, nextState) {
    	    if (this.props.color !== nextProps.color) {
    	      return true;
    	    }
    	    if (this.state.count !== nextState.count) {
    	      return true;
    	    }
    	    return false;
    	  }
    

• React.PureComponent
• • 浅比较,只能比较简单的数据
• • 适用于组件比较复杂的情况

         class CounterButton extends React.PureComponent {
         constructor(props) {
           super(props);
           this.state = {count: 1};
         }
       
         render() {
           return (
             <button
               color={this.props.color}
               onClick={() => this.setState(state => ({count: state.count + 1}))}>
               Count: {this.state.count}
             </button>
           );
         }
       }