React进阶—性能优化

时间  2019-11-08
标签 react 进阶 性能 优化 栏目 React 繁體版
原文   原文链接

React性能优化思路

软件的性能优化思路就像生活中去看病，大体是这样的：javascript

  1. 使用工具来分析性能瓶颈（找病根）html

  2. 尝试使用优化技巧解决这些问题（服药）java

  3. 使用工具测试性能是否确实有提高（疗效确认）react

React性能优化的特殊性

看过《高性能JavaScript》这本书的小伙伴都知道，JavaScipt的语言特性、数据结构和算法、浏览器机理、网络传输等均可能致使性能问题。一样是web实现，跟传统的技术（如原生js、jQuery）相比, react的性能优化有什么不一样呢？git

使用jQuery时，要考虑怎么使用选择器来提升元素查找效率、不要在循环体内进行DOM操做、使用事件委托呀等等。到了React这里，这些东西好像都用不上了。是的，由于React有一个很大的不一样点，它实现了虚拟DOM，而且接管了DOM的操做。你不能直接去操做DOM来改变UI，你只能经过改变数据源（props和state）来驱动UI的变化。github

提及React的性能分析，还得从它的生命周期和渲染机制提及：web

React组件生命周期

图片描述

当 props 和 state 发生变化时，React会根据shouldComponentUpdate方法来决定是否从新渲染整个组件。算法

React组件树渲染机制

图片描述

父亲组件的props 和 state发生变化时，它和它的子组件、孙子组件等全部后代组件都会从新渲染。chrome

综上所述，能够得出React的性能优化就是围绕shouldComponentUpdate方法（SCU）来进行的，无外乎两点：浏览器

  1. 缩短SCU方法的执行时间(或者不执行)。

  2. 不必的渲染，SCU应该返回false。

React 性能分析工具

Web通用工具：Chrome DevTools

最经常使用到的是Chrome DevTools的Timeline和Profiles。

  • Timeline工具栏提供了对于在装载你的Web应用的过程当中，时间花费状况的概览，这些应用包括处理DOM事件, 页面布局渲染或者向屏幕绘制元素。

  • 经过Timeline发现是脚本问题时，使用Profiles做进一步分析。Profiles能够提供更加详细的脚本信息。

React特点工具：Perf

Perf 是react官方提供的性能分析工具。Perf最核心的方法莫过于Perf.printWasted(measurements)了，该方法会列出那些不必的组件渲染。很大程度上，React的性能优化就是干掉这些无谓的渲染。

有童鞋开发了Chrome扩展程序“React Perf”（戳这里）。相比本身在代码中插入Perf方法进行分析，这个小工具更加灵活方便，墙裂推荐！

案例分析：TodoList

TodoList的功能很简单，就是对待办事项进行增长和删除操做：
图片描述

import React, {PropTypes, Component} from 'react';

class TodoItem extends Component {

    static propTypes = {
        deleteItem: PropTypes.func.isRequired,
        item: PropTypes.shape({
            text: PropTypes.string.isRequired,
            id: PropTypes.number.isRequired,
        }).isRequired,
    };

    deleteItem = ()=>{
        let id = this.props.item.id;
        this.props.deleteItem(id);
    };

    render() {
        return (
            <div>
                <button style={{width: 30}} onClick={this.deleteItem}>X</button>
                &nbsp;
                <span>{this.props.item.text}</span>
            </div>
        );
    }

}

class Todos extends Component {

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            items: this.props.initialItems,
            text: '',
        };
    }

    static propTypes = {
        initialItems: PropTypes.arrayOf(PropTypes.shape({
            text: PropTypes.string.isRequired,
            id: PropTypes.number.isRequired,
        }).isRequired).isRequired,
    };

    addTask = (e)=> {
        e.preventDefault();
        this.setState({
            items: [{id: ID++, text: this.state.text}].concat(this.state.items),
            text: '',
        });
    };

    deleteItem = (itemId)=> {
        this.setState({
            items: this.state.items.filter((item) => item.id !== itemId),
        });
    };

    render() {
        return (
            <div>
                <h1>待办事项</h1>
                <form onSubmit={this.addTask}>
                    <input value={this.state.text} onChange={(v)=>{this.setState({text:v.target.value});}}/>
                    <button>添加</button>
                </form>
                {this.state.items.map((item) => {
                    return (
                        <TodoItem key={item.id}
                                  item={item}
                                  deleteItem={this.deleteItem}/>
                    );
                })}
            </div>
        );
    }
}

let ID = 0;
const items = [];
for (let i = 0; i < 1000; i++) {
    items.push({id: ID++, text: '事项' + i});
}

class TodoList extends Component {
    render() {
        return (
            <Todos initialItems={items}/>
        );
    }
}

export default TodoList;

在待办事项输入框里输入一个字母，接下来咱们以这个行为为例来进行性能分析和优化。

第一次优化

使用Chrome开发者工具的Timeline记录下这个过程：
clipboard.png

重点关注出现的红色块，表明这个行为存在性能问题。从上图咱们能够看出，耗时的Event(keypress)长条花了98.8ms,其中98.5ms用于脚本处理，可见脚本问题是罪魁祸首。

接着，咱们使用Profiles来进一步分析脚本问题：
clipboard.png

对Total Time进行降序排列，发现耗时最长的是dispatchEvent，来自react源码。这时，咱们就能够肯定是react这一层出现了性能问题。

嗯，轮到Perf出场了：
clipboard.png

上图表示，有1000次没必要要的渲染发生在TodoItem组件上.

打开react面板，咱们来看看组件的层次和相应的state、props值：
clipboard.png

TodoItem是Todos的子组件，当咱们在输入框输入字母“s”时，Todos的state值发生改变时，文章开头所说的react的渲染机制致使Todos下的1000个TodoItem组件都会从新渲染一次。可是，TodoItem的展示其实没有任何变化。
从代码中，咱们能够看出，TodoItem组件展示只跟props（deleteItem、item）相关。props没有变化，TodoItem就不必渲染。

因此，咱们应该优化下TodoItem的SCU方法：

class TodoItem extends Component {
    
    ...
    
    //在props没有变化的时候返回false，不从新渲染
    shouldComponentUpdate(nextState,nextProps) {
        if(this.props.item == nextProps.item && this.props.deleteItem == nextProps.deleteItem){
            return false;
        }
        return true;
    }

    render() {
       ... 
    }

}

(PS: TodoItem中的SCU方法，使用的是浅比较，也可使用PureComponent代替。实际项目中，每每须要使用复杂的深比较，能够考虑使用Immutable.js)

验证下优化效果，使用Perf测试，发现1000个多余的渲染被干掉了！
再次使用Timeline分析，Event(keypress)耗时从98.5ms降到了26.49ms，性能提高了2.7倍：
clipboard.png

疗效还不错！

第二次优化

经过SCU返回false，咱们避免了无谓的渲染。可是，咱们仍是调用了1000次TodoItem的SCU方法，这也是一笔不小的性能开支。

是否能够不用调用呢？经过合理地规划组件粒度，能够作到：

//将增长待办事项抽象成一个组件
class AddItem extends Component{
     constructor(props) {
       super(props);
       this.state = {
           text:""
       };
     }

    static PropTypes = {
      addTask:PropTypes.func.isRequired
    };

    addTask = (e)=>{
        e.preventDefault();
        this.props.addTask(this.state.text);
    };

    render(){
        return (
            <form onSubmit={this.addTask}>
                <input value={this.state.text} onChange={(v)=>{this.setState({text:v.target.value});}}/>
                <button>添加</button>
            </form>
        );

    }
}

class Todos extends Component{
    constructor(props) {
        super(props);
        this.state = {
            items: this.props.initialItems,
        };
    }

    static propTypes = {
        initialItems: PropTypes.arrayOf(PropTypes.shape({
            text: PropTypes.string.isRequired,
            id: PropTypes.number.isRequired,
        }).isRequired).isRequired,
    };

    addTask = (text)=>{
        this.setState({
            items: [{id: ID++, text:text}].concat(this.state.items),
            text: '',
        });
    };

    deleteItem = (itemId)=>{
        this.setState({
            items: this.state.items.filter((item) => item.id !== itemId),
        });
    };

    render() {
        return (
            <div>
                <h1>待办事项V3</h1>
                <AddItem addTask={this.addTask}/>
                {this.state.items.map((item) => {
                    return (
                        <TodoItem key={item.id}
                                  item={item}
                                  deleteItem={this.deleteItem}/>
                    );
                })}
            </div>
        );
    }
}

把增长待办事项抽象成一个AddItem组件。这样一来，组件树从原来的
clipboard.png

变成

clipboard.png

输入信息时触发变化的text这个state值，被下放到AddItem组件来管理，所以不会致使兄弟组件（TodoItem）的从新渲染。

再次运行Timeline测试，这时Event(keypress)耗时从26.49ms降到了7.98ms,性能提高了2.3倍：
clipboard.png

至此，性能优化完毕~

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程