shouldComponentUpdate 函数 判断是否渲染，forceUpdate 函数 强制渲染

shouldComponentUpdate 函数原型

boolean shouldComponentUpdate(nextProps, nextState)

当 React Native 决定是否重新渲染组件时，会先调用 shouldComponentUpdate 函数，如果返回值为 false 则不会重新渲染组件

如下例

shouldComponentUpdate() {
        if (this.state.inputedNum.length <= 3) {
            console.log("false !!!");
            console.log('length = ', this.state.inputedNum.length);
            return false;
        }
        console.log("true !!!");
        console.log('length = ', this.state.inputedNum.length);
        return true;
    }

如果你够细心，可以发现上例中，添加数字时，this.state.inputedNum.length 比实际小1，删减数字时，this.state.inputedNum.length 比实际大1。但是，在后边 render 函数中 >Text> 您输入的手机号的长度：{this.state.inputedNum.length} >/Text> 调用时，显示的正确。

按一下删除按钮，删除一个数字

好家伙 shouldComponentUpdate 里的 length 跑慢了一步

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    View,
    Text,
    TextInput,
    PixelRatio,
} from 'react-native';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            inputedNum: '',//写法1
        };
    }

    updateNum(newText) {//写法1
        this.setState((state) => {
            return {
                inputedNum: newText
            };
        });
    }

    shouldComponentUpdate() {
        if (this.state.inputedNum.length <= 3) {
            console.log("false !!!");
            console.log('length = ', this.state.inputedNum.length);
            return false;
        }
        console.log("true !!!");
        console.log('length = ', this.state.inputedNum.length);
        return true;
    }

    render() {

        return (
            <View style={styles.container}>
                {/*写法1*/}
                <TextInput placeholder={'请输入账号'} onChangeText={(newText) => this.updateNum(newText)}/>
                <Text>您输入的手机号：{this.state.inputedNum}</Text>
                <Text>您输入的手机号的长度：{this.state.inputedNum.length}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

forceUpdate 函数原型（开发者应该尽可能避免使用此函数）

forceUpdate(callback)

调用 forceUpdate 函数的话，将不会调用 shouldComponentUpdate 来检查是否允许重新渲染