返回 导航

React / React Native

hangge.com

React Native - 状态设置setState()方法使用详解（附：最简写法）

作者：hangge | 2017-08-03 08:10
当需要 React Native 重新渲染 UI 时，我们使用最多的应该就是 setState 函数了。本文对 setState 的使用做个总结。

1，setState 介绍

React Native 框架使用 setState 函数来合并状态机变量。setState 函数的原型是：
setState(oldState, callback)

（1）setState 函数会将传入函数的返回值与当前状态机做一个合并操作：
  • 名称相同的变量就用新值覆盖老的。
  • 有新增加的变量则直接增加。
  • 原来就有的状态机变量，但本次没有赋新值则保证不变。

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

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

2，setState 使用样例

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

样例中 setState 函数以及方法调用都使用最完整的写法。
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   //构造函数
   constructor(props) {
    super(props);
    this.state = {text: ''};
   }

   //输入框文字改变时会调用
   updateText(newText) {
     this.setState((oldState) => {
       console.log(oldState);//老的状态值
       return {
         text: newText
       }
     }, this.updateTextDone)
   }

   //文字状态值改变，界面渲染完毕后调用
   updateTextDone() {
     console.log("文字状态值改变，界面渲染完毕!");
   }

   render() {
    return (
      <View style={[styles.flex, styles.topStatus]}>
        <TextInput style={styles.input}
          onChangeText={ (newText) => this.updateText(newText) }/>
        <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
      </View>
    );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  topStatus:{
    marginTop:25,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  tip:{
    marginLeft: 5,
    marginTop: 5,
    color: '#C0C0C0',
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

3，setState 函数简写

（1）回调是可选的，如果我们不需要回调则可以这么写：
updateText(newText) {
  this.setState((oldState) => {
    console.log(oldState);//老的状态值
    return {
      text: newText
    };
  })
}

（2）如果不需要用到老的状态机变量，可以简写为： 
updateText(newText) {
  this.setState(() => {
    return {
      text: newText
    };
  })
}

（3）我们可以把 updateText 函数的参数名直接改成状态机变量相同的名字，这样又可以进一步简化： 
updateText(text) {
  this.setState(() => {
    return {text};
  })
}

甚至可以这么写： 
updateText(text) {
  this.setState({text});
}

4，事件回调方法简写

上面样例中，当 onChangeText 事件触发的时候会自动调用 updateText 方法，然后在 updateText 方法中修改状态机变量 text。
onChangeText={ (newText) => this.updateText(newText) }

（1）也可以使用 bind 函数来绑定回调函数： 
onChangeText={this.updateText.bind(this)}

（2）还可以不调用其它方法，直接在事件方法中改变状态机变量： 
onChangeText={ (text) => this.setState({text}) }
评论

全部评论（0）

回到顶部