关于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>Test2</Text>            </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>Test2</Text>            </View>        );    }}

总结

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