react - 8. state

栏目: IOS · Android · 发布时间: 5年前

内容简介:参考:在React native中, 一次赋值之后就不变的,用props ,典型例子: <Book name="三体"/> 这里的赋值之后, 会发生变化的变量, 用state . 典型的例子:

参考: https://facebook.github.io/react-native/docs/state

在React native中, 一次赋值之后就不变的,用props ,典型例子: <Book name="三体"/> 这里的 name是固定不变的

赋值之后, 会发生变化的变量, 用state . 典型的例子:

某个页面需要从远程读取数据。 (例如变量名字叫 remote_book_name)

1. 页面刚刚打开时 ,对应的内容是空白的。 remote_book_name = ''

2. 页面发起http request

3. 该页面获得了远程的结果, 把结果赋值给 remote_book_name = "决斗在网络"

可以看到,上面例子中,这个变量是随着程序的状态发生变化的,所以是个典型的 state.

下面是一个例子:

(screens/StateDemo.js)

import React,  { Component} from 'react';
import {Image, Platform, StyleSheet, Text, View, Button} from 'react-native'

export default class MyFavorateBooks extends Component{
  constructor(props){
    super(props)
    this.state = {
      isToChange: false
    }
  }
  // 由于 state变量的每次发生变化,都是跟之前的有一定的关系的, 所以这里的函数有一个参数: previousState
  change = () => {
    this.setState(previousState => (
      {
        isToChange: !previousState.isToChange
      }
    ))
  }

  // 为了演示方便,我没有把下面的代码做重构, 直接用最原始的方式来表现了。
  render(){
    if(!this.state.isToChange){
      return(
        <View>
          <Text>早上起来, 拥抱太阳 </Text>
          <Button
            title="看下一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
    else{
      return(
        <View>
          <Text>让身体充满, 灿烂的阳光! </Text>
          <Button
            title="看前一句歌词"
            onPress={this.change}
            />
        </View>
      )
    }
  }
}

从Home.js页面加上入口,在App.js文件中加上路由之后, 就可以打开这个页面了

点击按钮,就可以看到页面的文字发生了变化


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

深入理解Java虚拟机(第2版)

深入理解Java虚拟机(第2版)

周志明 / 机械工业出版社 / 2013-9-1 / 79.00元

《深入理解Java虚拟机:JVM高级特性与最佳实践(第2版)》内容简介:第1版两年内印刷近10次,4家网上书店的评论近4?000条,98%以上的评论全部为5星级的好评,是整个Java图书领域公认的经典著作和超级畅销书,繁体版在台湾也十分受欢迎。第2版在第1版的基础上做了很大的改进:根据最新的JDK 1.7对全书内容进行了全面的升级和补充;增加了大量处理各种常见JVM问题的技巧和最佳实践;增加了若干......一起来看看 《深入理解Java虚拟机(第2版)》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具