react - 8. state

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

内容简介:参考:在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文件中加上路由之后, 就可以打开这个页面了

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


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

查看所有标签

猜你喜欢:

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

Ant Colony Optimization

Ant Colony Optimization

Marco Dorigo、Thomas Stützle / A Bradford Book / 2004-6-4 / USD 45.00

The complex social behaviors of ants have been much studied by science, and computer scientists are now finding that these behavior patterns can provide models for solving difficult combinatorial opti......一起来看看 《Ant Colony Optimization》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

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

HSV CMYK互换工具