React Native 04(初始React Native组件化开发)

React Native

class / function 都可以是 "积木" (组件)

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

class GoodMorning extends Component {
    render() {
        return (
            <Text>
                Good morning
            </Text>
        );
    }
}

const GoodEvening = () => {
    return (
        <Text>
            Good evening
        </Text>
    );
}

class App extends Component {
    render() {
        return (
            <View>
                <GoodMorning />
                <GoodEvening />
            </View>
        );
    }
}

使用属性props定制"积木"(组件)

class GoodMorning extends Component {
  render() {
    return (
      <Text>
        Good morning {this.props.name}!
      </Text>
    );
  }
}

const GoodEvening = (props) => {
  return (
    <Text>Good evening {props.name}</Text>
  );
}

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <GoodMorning name="Sir"/>
        <GoodEvening name="Madam"/>
      </View>
    )
  }
}

defaultProps默认值和propTypes类型约束

class Demo extends Component {

  static defaultProps = {
    name: 'somebody', // 赋予默认值'somebody'
  }

  static propTypes = {
    name: React.propTypes.string, // 约定需要的类型(为字符串)
  }

}

• defaultProps和propTypes写法类似(都为静态成员属性),容易混淆
  • 建议按英文字面意思来记忆，default默认值，types类型(约束)
• propTypes类型约束只在开发阶段有效，发布时会被自动移除。
  • 编码习惯，根据需要和爱好自由取舍。

变量作用域

• 函数内的局部变量，只能函数内读写，函数运行完后销毁(闭包除外)
• class内的成员变量，在单个class的实例内读写，实例销毁时一并销毁
  • 使用时不要忘记this
• class内的静态成员变量，在所有的class的实例内共享，不会自动销毁。
  • 其他模块可通过此class访问(类public)
• class外的变量，在所有class的实例内共享(共有),不会自动销毁
  • 除非明确export，否则其他模块不可访问(类private)
• global全局变量，任何地方可读写(类浏览器的window)，不会自动销毁