setState()方法使用详解

当需要React Native重新渲染UI时，我们使用最多的应该就是setState函数了。本文对setState的使用做个总结。

1.setState介绍

React Native框架使用setState函数来合并状态机变量，setState函数的原型是：

setState(oldState,callback)

setState函数会将传入的函数的返回值与当前的状态机做一个合并操作：

* 名称相同的变量就用新值覆盖旧值。

* 有新增加的变量则直接增加。

* 原来就有的状态机变量，但本次没有赋新值则保持不变。

当我们调用this.setState函数要求重新渲染UI界面时，React Native并不是立刻就开始重新渲染。而是会先想一想如何才能高效的重新渲染界面，然后尽快去渲染。

setState函数第二个参数是可选的，它将在setState完成并重新渲染完成后被调用。

2. setState使用样例

下面是setState使用样例。当输入框文字改变时会自动修改状态机变量，同时输入框下方实时统计输入文字的个数。

样例中setState方法以及调用都使用最完整的写法

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';
 
//默认应用的容器组件
class App ex