ReactNative特性

作者: 952625a28d0d | 来源:发表于2018-04-09 14:22 被阅读18次

在线模拟器

http://dabbott.github.io/react-native-web-player/

静态变量声明

image.png
变量作用域
局部变量，函数结束销毁
class内部变量，在单个class内读写，class实例销毁则销毁，需要使用this.来访问

defaultProps和class内部变量区别

defaultProps内部的变量是所有class实例共享的，只有一份
但是class内部声明的变量则是每个实例都会拥有一份的。
class外部声明的比如 const d = [1,2,3]; 则在整个文件中都可以使用
class外部声明的变量，比如global.c=0 ; 则在整个项目中都可以引用。是作用域最大的变量，但是使用的前提就是只有该句执行之后，才能使用。

image.png

class内部成员变量的写法

image.png

组件的循环生成，循环生成的组件需要唯一的key值来区分

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

const names = ['fage','tingting','xixi','haimian'];

class GoodMorning extends Component {
  static defaultProps = {
    name:'somebody',
  };
  render() {
    return(
      <View style={styles.container}>
        <Text>
          Good, Morning, {this.props.name}!
        </Text>
        </View>
    )
  }
}
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {
//         带大括号则写return , 不带大括号则不写，需要注意一下。
        names.map(name=> {
          return <GoodMorning key={name} name={name}/>
        })
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

image.png

可以使用内容值，也可以使用index下标

names.map((name,index)=> {
          return <GoodMorning key={name} name={name}/>

如果我们在同一个View组件中，循环生成两套组件，会不会造成key值重复的问题呢？
代码如下：

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

const names = ['fage','tingting','xixi','haimian'];

class GoodMorning extends Component {
  static defaultProps = {
    name:'somebody',
  };
  render() {
    return(
      <View style={styles.container}>
        <Text>
          Good, Morning, {this.props.name}!
        </Text>
        </View>
    )
  }
}

class GoodEvening extends Component {
  static defaultProps = {
    name:'somebody',
  };
  render() {
    return(
      <View style={styles.container}>
        <Text>
          Good, Morning, {this.props.name}!
        </Text>
        </View>
    )
  }
}

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        {
//         带大括号则写return , 不带大括号则不写，需要注意一下。
        names.map((name,index)=> {
          return <GoodMorning key={name} name={name}/>
        })
        }
        
        {
//         带大括号则写return , 不带大括号则不写，需要注意一下。
        names.map((name,index)=> {
          return <GoodEvening key={name} name={name}/>
        })
        }
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
})

AppRegistry.registerComponent('App', () => App)

如上图，key值在两套循环中生成会有重复，但是在同一套循环中生成的Key值没有重复即可。所以，以上是可行的。

image.png

state

特性：界面变化刷新靠state
state修改靠setState方法
不能直接修改state的值
setState是合并操作，可以但修改其中一个值即可，而不会修改其他属性的值
setState是异步操作，修改不会直接生效的。那如果想使用修改过后的值判断怎么做呢？使用以下方法即可。

state = {
    likes:0
  };

  onPress = ()=>{

    const {likes} = this.state;

    const newStates = this.state.likes + 1;
    this.setState({
      likes : newStates,
    });

  };