setState()方法使用详解

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

当需要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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值