网站建设的支持条件客户管理软件
React 与 React Native 区别
同样的实现一个点击按钮，更换姓名和年龄的值的功能。两部分代码不同
React代码
import React, { useState } from 'react'
import './Button.css'export function UseStateWithoutFunc() {const [name, setName] = useState('何遇')const [age, setAge] = useState()function onChange() {setName('张三') // 修改namesetAge(23) // 修改age}return (<><div className={'nameButton'}>姓名: {name}</div><div className={'ageButton'}>年龄: {age === undefined ? '未知' : age}</div><button onClick={onChange}>click</button></>)
}
Button.css样式
.nameButton {font-size: 30px;
}
.ageButton{font-size: 20px;
}
React Native代码
import React, {useState} from 'react';
import {Text, Button, View, StyleSheet} from 'react-native';export function UseStateWithoutFunc() {const [name, setName] = useState('何遇');const [age, setAge] = useState();function onChange() {setName('张三'); // 修改namesetAge(23); // 修改age}return (<View><Text style={styles.nameButton}>姓名: {name}</Text><Text style={styles.ageButton}>年龄: {age === undefined ? '未知' : age}</Text><Button title="Press me" onPress={() => onChange()} /></View>);
}const styles = StyleSheet.create({nameButton: {fontSize: 30,},ageButton: {fontSize: 20,},
});export default UseStateWithoutFunc;
区别点：
- 样式编写：
- React 的样式编写是通过css样式选择器。可以通过对某个id、某个className来进行标记识别，然后在另一个css文件里编写对应的样式
- React Native的样式编写一般是通过在当前文件里通过在StyleSheet.create里声明对应的样式对象，然后在对应控件里的style选择相应的样式对象
- UI控件
- React 的UI控件和 React Native的UI控件来源不同，比如要显示文字，在React Native里必须用Text控件包裹起来，但是在React里可以直接在div标签中写。以及React的button控件有onclick事件，但是React Native的button只有onPress事件。