react native 学习笔记之state

原创 2016年08月30日 20:55:43
state状态还是可以理解为Android,ios中一个类的成员变量,而props和state的区别是,props一经指定,就不能修改,而state是可以修改的。一般来讲,你需要在constructor中初始化state,然后在需要修改时调用setState方法。

下面是一个闪烁文字的例子。

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Blink extends Component {
  constructor(props) {                       //哈哈,终于看到大家熟悉的构造函数了
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';   //这就是大家熟悉的问号表达式,当状态showText为真时,                                                                //设置为text。否者为空.而showText被上面setInterval所控制

    return (
      <Text>{display}</Text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <View>
        <Blink text='I love to blink' />   
        <Blink text='Yes blinking is so great' />
        <Blink text='Why did they ever take this out of HTML' />
        <Blink text='Look at me look at me look at me' />
      </View>
    );
  }
}

AppRegistry.registerComponent('BlinkApp', () => BlinkApp);

更多内容参看:http://reactnative.cn/docs/0.31/state.html

相关文章推荐

React Native 学习笔记(四)-- State和Props

Part OneImage组件的自带属性Part Two自定义组件并添加属性上面的贴图中我们总结了组件属性的使用和赋值,在JSX语法中给属性赋值,值一般都是对象。比如上面的source={pic}。下...

React Native从零开始(三)Props(属性)和State(状态)

React Native从零开始(三)Props(属性)和State(状态) 一、Props(属性) 首先官网上的介绍:...

React Native 学习笔记四(关于state的使用)

前面我已经大概写了props和state 的区别  接下来整理下state的使用 需要在constructor中初始化state(译注:这是ES6的写法,早期的很多ES5的例子使用的是getInit...

1.3props与state

先看看props:http://reactnative.cn/docs/0.44/props.html#content 官网的说法是:大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数...

React-Native 基础(三) 使用State改变状态

参考文档: http://reactnative.cn/docs/next/state.html#content http://reactnative.cn/docs/next/state.htm...

ReactNative-通过setState控制组件的更新和变化

前言 ReactNative内部分别使用了props, state来区分组件的属性和状态。props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变。而state维持组...

混合开发的大趋势之一React Native State (状态),Style(样式)

转载请注明出处:王亟亟的大牛之路先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android 今天又加了几个疑难杂症哦!!上一篇讲了属性...

React-Native中this的带给大家的困惑

最近在学习react-native时候,一直会遇到this.setState()或者this.props报如下的错误: 问题描述这是什么原因导致的呢?当时都没有认真的分析该问题的发生点,一直让这个问题...

React学习笔记---Props&State

Propsprops是什么?props是properties(属性、性能)的缩写,我们可以通过他把任意类型的数据传递给组件。 大部分组件从Props获取数据并渲染 他是只读的!!!来看一个例子va...

react学习笔记 item4 --- 状态(state)

React 把组件看成是一个状态机(State Machines)。本文介绍了react中组件的state(状态),以及常用的关于 state 的两个组件 API : setState 和replac...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native 学习笔记之state
举报原因:
原因补充:

(最多只允许输入30个字)