关于state刷新界面的思考

我们知道当state更新时，界面会重新绘制，render会被执行，但是一个界面包含许多控件，state更新导致界面重绘，那么是否所有的控件都重绘呢？

验证

通过一个点击事件来改变state的值，然后看看界面有什么变化，代码如下：

import React,{Component} from 'react';
import {
    View,
    TouchableOpacity,
    Text,
} from 'react-native';

export default class Test extends Component{

    constructor(props){
        super(props);
        this.state = ({
            count:0,
        });
    }

    _onPress(){
        var count = this.state.count + 1;
        this.setState({
            count:count,
        });
    }

    render(){
        return(
            <View>
                <TouchableOpacity onPress={this._onPress.bind(this)}>
                    <Text>刷新界面{this.state.count}Text>
                TouchableOpacity>
                <Test2 />
            View>
        );
    }
}
//定义另一个组件Test2，被Test所引用
class Test2 extends Component{

    render(){
        console.log('Test2 render');
        return(
            <View>
                <Text>Test2Text>
            View>
        );
    }
}

点击‘刷新界面’，可以看到Test下的Text内容改变了，Test2的日志也有输出，说明在这种情况下，state的改变，会重写执行render，使界面重新绘制，并且所有子控件默认都会重新绘制。可是你发现Test2只是固定显示一个文本，那么即使再重新绘制它还是不变的，这样就做了无用功，浪费了界面渲染时间。所以，是否可以优化这种state带来的界面重新渲染的性能问题呢？答案是有的。

每个Component都有一个函数shouldComponentUpdate，这个函数返回是否需要更新组件。当state的值有变化时，先执行此方法，此返回值为true/false，判断是否执行更新操作，即是否执行render渲染。那么，在我们这个例子中，Test2组件只是显示一个固定的文本，所以返回一个false即可。

class Test2 extends Component{

    shouldComponentUpdate(nextProps,nextState){
        //写自己的逻辑判断是否需要更新组件
        return false;
    }

    render(){
        console.log('Test2 render');
        return(
            <View>
                <Text>Test2Text>
            View>
        );
    }
}

总结

在项目开发的过程中，我们总会自定义一些组件，这些组件总会被其他组件所引用，在知道了state的刷新问题之后，重写shouldComponentUpdate这个函数，对我们来说格外重要，可以让我们清楚的明白，这个组件什么情况下需要被更新，什么情况下不需要更新。这样做的好处就是，可以大大的提高界面的刷新速度，而这不就是我们所追求的吗！