React Native 亲切的组件们(函数式组件/class组件)和陌生的样式

写多了taro, 看见react native中的组件好亲切啊，几乎一模一样。

一、函数式组件 --- 常用

1）无状态，每次刷新都是生成一个新的状态

2）基于状态变化的管理

3）简洁，代码少，易于服用

javascript 复制代码

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

// 子组件 TestFunctionDemo.js
export default function TestFunctionDemo(props) {
    const { name, info: {age, sex} } = props

    const [address, setAddress] = useState('中国')

    useEffect(() => {
        // 第一次加载完成
        setTimeout(() => {
            setAddress('大陆')
        }, 2000)
    }, [])

    useEffect(() => {
        // 监听address
    }, [address])

    return (
        <View style={{height: 200, width: '80%', padding: 20, borderRadius: 10, backgroundColor: '#ccc'}}>
            <Text>我是子组件</Text>
            <Text>姓名：{ name }</Text>
            <Text>年龄：{ age }</Text>
            <Text>性别：{ sex }</Text>
            <Text>{`地址：${ address }`}</Text>
            { props.children}
        </View>
    )
}


// 简写
const TestFunctionDemo = (props) => {
	// ...
}
export default TestFunctionDemo

// 或
export default (props) => {
   // ...
}

二、class组件

1）有状态state, 每次都是修改的同一个状态

2）基于生命周期的管理

javascript 复制代码

// 子组件 TestClassDemo .js
class TestClassDemo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            address: '中国'
        }
    }

    componentDidMount() {
        setTimeout(() => {
            this.setState({
                address: '大陆'
            })
        }, 2000)
    }

    render() {
        const { name, info: {age, sex} } = this.props
        const { address } = this.state
        return (
            <View style={{height: 200, width: '80%', padding: 20, borderRadius: 10, backgroundColor: '#ccc'}}>
                <Text>我是子组件</Text>
                <Text>姓名：{ name }</Text>
                <Text>年龄：{ age }</Text>
                <Text>性别：{ sex }</Text>
                <Text>{`地址：${ address }`}</Text>
                { this.props.children}
            </View>
        )
    }
}

export default TestClassDemo

三、父组件引入

javascript 复制代码

// 父组件app.js中引入
import TestFunctionDemo from './src/components/TestFunctionDemo';
import TestClassDemofrom './src/components/TestClassDemo';

// ...
const info = {
  age: 20,
  sex: 'nan'
}

// ...

<TestFunctionDemo 
  name="zhangsan" 
  info={info}>
  <Text>我是通过插槽加入的！</Text>
</TestFunctionDemo>

<TestClassDemo 
  name="zhangsan" 
  info={info}>
  <Text>我是通过插槽加入的！</Text>
</TestClassDemo>

以上是不是和react一模一样

四、样式

！！！这里和react不一样

javascript 复制代码

import React from "react";
import { View, Text, StyleSheet } from 'react-native';

// 子组件 TestFunctionDemo.js
export default (props) => {
   // ...

 	return (
        <View style={styles.box}>
        	// 多个样式用数组
            <Text style={[styles.textLine, styles.title]}>我是子组件</Text>
            <Text  style={styles.textLine}>姓名：{ name }</Text>
            // ...
        </View>
    )
}

// 样式
const styles = StyleSheet.create({
    box: {
        height: 200, 
        width: '80%', 
        padding: 20, 
        borderRadius: 10, 
        backgroundColor: '#ccc'
    },
    textLine: {
        fontSize: 18,
        color: 'blue'
    },
    title: {
        fontWeight: "bold"
    }
})