ReactNative-通过setState控制组件的更新和变化

前言

ReactNative内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组件内部的状态更新和变化, 组件渲染出来后响应用户的一些操作,更新组件的一些状态。如果组件内部状态不需要更新,即没有调用过this.setState, 全部通过props来渲染也是没问题的, 不过这种情况不常见。本文所介绍的内容就是通过props和state的定义来谈谈ReactNative的受控组件和非受控组件。

通过this.setState来控制组件的更新和变化，和iOS原生开发中控制组件变化的思想是有很大区别的，iOS中可以直接设置控件的属性值。初次接触ReactNative中的这种设计思想还是挺难的。

非受控组件

顾名思义, 非受控组件即组件的状态改变不受控制.接来下我们以一个简单TextInput组件代码来描述。

<TextInput/>

在这个最简单的输入框组件里,我们并没有干涉TextInput中的value展示,即用户通过键盘输入的内容都会展示在上面，但是不能从其他地方改变其内容。

受控组件

上面提到过,既然通过设置input的value属性, 无法改变输入框值,那么我们把它和state结合在一起,再绑定onChange事件,实时更新value值就行了

constructor(props) {  super(props);  this.state = {    value: "",  }}handleChange(e) {  this.setState({    value: e.nativeEvent.text  })}render() {  return (    <TextInput      style={styles.style_user_input}      value={this.state.value}      onChange={e => this.handleChange(e)}    />  );}

这就是最简单的受控组件模型, 我们可以通过在onChange的回调里控制input要显示的值，

给value赋予this.state.value，通过setState对state的value进行更新，这时会出发render刷新页面，就会执行到value={this.state.value}，TextInput中的内容就得到了更新。

举两个简单的应用场景例子：

1.点击一个按钮，TextInput中的内容增加一个特定字符串，比如聊天界面点击emoji表情，输入框增加一段“[微笑]”；

2.点击另一个按钮，获取到TextInput中的内容，比如说聊天界面的发送消息。

第一个场景目的是要从外部给TextInput输入内容，第二个场景是要从外部取到TextInput的内容。这两个操作都离不开state。

示例

下面展示一个简单的demo：

完整代码：

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {   AppRegistry,  StyleSheet,  Text,  Image,  View,  TextInput,  TouchableOpacity,} from 'react-native'; class RNTextIput extends Component {constructor(props) {    super(props);    this.state = {        value: "",        gotText: "",    }}  handleChange(e) {    this.setState({        value: e.nativeEvent.text    })  }  sendAction() {    this.setState({        gotText: this.state.value    })  }  render() {    return (         <View style={{backgroundColor:'#f4f4f4',flex:1}}>                    <TextInput               style={styles.style_user_input}              placeholder='QQ号/手机号/邮箱'              numberOfLines={1}              autoFocus={true}              underlineColorAndroid={'transparent'}               textAlign='center'              value={this.state.value}               onChange={e => this.handleChange(e)}          />          <TextInput               style={styles.style_pwd_input}              numberOfLines={1}              autoFocus={true}              underlineColorAndroid={'transparent'}               textAlign='center'              value={this.state.gotText}           />          <View style={{height:1,backgroundColor:'#f4f4f4'}} />          <TouchableOpacity              onPress={() => {                this.sendAction();              }}            >              <View  style={styles.style_view_commit} >                <Text style={{color:'#fff'}}>                  发送                </Text>              </View>          </TouchableOpacity>          <TouchableOpacity              onPress={() => {                this.setState({value:this.state.value + "文字~"});              }}            >              <View  style={styles.style_view_commit} >                <Text style={{color:'#fff'}}>                  手动加入文字                </Text>              </View>          </TouchableOpacity>      </View>    );  }}const styles = StyleSheet.create({  style_image:{    borderRadius:35,    height:70,    width:70,    marginTop:40,    alignSelf:'center',  },  style_user_input:{        backgroundColor:'#fff',      marginTop:100,      height:35,  },   style_pwd_input:{        backgroundColor:'#fff',      height:35,      marginTop:10,  },   style_view_commit:{        marginTop:15,      marginLeft:10,      marginRight:10,      backgroundColor:'#63B8FF',      height:35,      borderRadius:5,      justifyContent: 'center',      alignItems: 'center',  },});AppRegistry.registerComponent('RNTextIput', () => RNTextIput);

参考：

http://www.cnblogs.com/qingguo/p/5857923.html

http://www.lcode.org/%E3%80%90react-native%E5%BC%80%E5%8F%91%E3%80%91react-native%E6%8E%A7%E4%BB%B6%E4%B9%8Btextinput%E7%BB%84%E4%BB%B6%E8%AE%B2%E8%A7%A3%E4%B8%8Eqq%E7%99%BB%E5%BD%95%E7%95%8C%E9%9D%A2%E5%AE%9E%E7%8E%B011/