setState()方法使用详解

最新推荐文章于 2025-06-11 21:18:16 发布

慕天远

最新推荐文章于 2025-06-11 21:18:16 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React Native

本文链接：https://blog.youkuaiyun.com/Cui_xing_tian/article/details/93708845

React Native 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了React Native中用于更新组件状态的关键方法setState，包括其功能、使用方式及优化策略。通过实例展示了如何在输入框事件中使用setState，以及事件回调函数的简写形式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当需要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 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. 事件回调方法简写

在上面样例中，当onChangeText事件触发的时候会自动调用updateText方法，然后在updateText方法中修改状态机变量text.

onChangeText={ (newText) => this.updateText(newText) }

我们可以使用bind函数来绑定回调函数：

onChangeText={this.updateText.bind(this)}

也可以不调用其他方法，直接在事件方法中改变状态机变量。

onChangeText={ (text) => this.setState({text}) }