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),不会自动销毁