函数组件只需要接受props参数并且返回一个React元素，class组件需要继承component，还需要创建render 并且返回React元素，语法看起来麻烦点。
函数组件没有this,没有生命周期，没有状态state。
类组件有this,有生命周期，有状态state。
类组件：
import React,{Component} from 'react'
import {View,Text} from 'react-native'
export default class App extends Component{
render(){
return(
<View>
<Text >Hello Word</Text>
</View>
)
}
}
函数组件：
import React,{Component} from 'react'
import {View,Text} from 'react-native'
const SiteNameComponent = (props) => {
return (
<View>
<Text >Hello Word </Text>
</View>
)
}
props理解
props 和我们OC中的属性比较相似，是用来组件之间单向传值用的。
- 不需要提前声明，组件传值；
//classA组件
export class classA extends Component {
render() {
return (<Text>Hello {this.props.name}!</Text>);
}
}
//classB组件
export class classB extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
//调用classA组件，并对name变量赋值
<classA name='Hello Word' />
</View>
);
}
}
2.组件中必须包含某种变量类型的某变量，就要用到PropTypes做声明；
3.可以设置默认值；
export class classA extends Component {
static propTypes: {
//设置title变量的类型
title: React.PropTypes.string.isRequired,
},
static defaultProps = {
title:'Hello Word',
}
render() {
return (
<View>
<Text> {this.props.title} </Text>
</View>
);
}
}
state
react中的函数组件通常只考虑负责UI的渲染，没有自身的状态没有业务逻辑代码，是一个纯函数。它的输出只由参数props决定,不受其他任何因素影响。为了解决给函数组件加状态，可以使用Hooks技术实现。
1）useState 使用
import React, { Component, useState } from "react";
import { View,StyleSheet, TextInput,Text } from "react-native";
const UselessTextInput = () => {
//使用Hooks技术添加value状态，并设置默认值
const [value,setValue] = useState('rfradsfdsf')
return (
<View style={styles.container}>
<TextInput
style={{ height: 40}}
placeholder='请输入用户名'
onChangeText={(text)=>{
setValue(text)
}}
value={value}
/>
<Text>{value}</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
paddingTop: 50,
backgroundColor: '#ffffff',
borderBottomColor: '#000000',
borderBottomWidth: 1,
},
});
export default UselessTextInput;
