React 与 React Native 区别

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事件。